Exercise
Text, and how to render it, is an extremely important and often overlooked aspect of web design. Semantically, it is hugely important to have a grasp on the best practices for marking up your text. If your page doesn’t follow convention using the correct headers and paragraph tags, then search engines won’t be able to interpret your content, which will result in your page not displaying correctly in search engine results pages. HTML tags give us the fantastic ability to describe our content, and take control over how we want it to look and be understood, both by humans and computers. Let’s work on an example together now.
Open your webpage in your text editor and imagine you are creating a news article. You will need a headline, a few subheadlines and lots of paragraphs. You will also need some quotations. Using the tags learned in this chapter, create this news article as semantically as possible. Try to make use of all the tags we have learned. Notice how the browser displays all identical tags the same way; for example, all <h1> tags will use the same font, size and colour. Understanding this principle highlights how powerful HTML can be in helping us to create consistent-looking content without having to repeat ourselves.
Links are everywhere on the web. They can take users on a journey, guiding them along the way, explaining what lies behind the new URL, or sometimes leaving it as a mystery. Links are an essential part of webpages, but how to use them well is an aspect often overlooked by many webpages. Websites are visual journeys that we take our users on. We guide them, while giving them the option of which direction to take, through the use of the links that we provide. Link placement can be the difference between a successful website and a failing website. With all that responsibility on our shoulders, let’s understand how to use them the right way.
A hyperlink is an HTML link. They allow you to navigate between various destinations on the web. A hyperlink can point to many different destinations, not just webpages. You can point your link to just about any file type imaginable.
A link tag is formatted using an <a> tag, with the following syntax: