The course is part of this learning path
In this module, you’ll get to grips with the basics of HTML, starting with its history, the fundamental pieces that make up HTML, and how to use attributes and comments properly. After this, will take a look at how containers work, how websites respond to syntax errors, and what a few of the special characters look like in html. Finally, we’ll end off with a deep dive into structural html, and how you can use it to create systematic, well thought out websites easily and effectively.
One of the best parts of HTML5 is its structural tags. These give you the option to create a semantic description of a page, which makes the page much more user friendly. Here's what a quick example of what this looks like. As you can see, there are seven main building blocks that make up structural HTML, the header, nav, section, main, article, aside and footer tags.
In this video, I'm gonna go into some detail about each of these so you should expect this video to be a little bit longer than normal. So the best way to think about this structure is that it creates a kind of table of contents like you would get in a book. This table of contents has different levels from the highest level, which is our main header down to just the lowest levels. This table of contents is useful for a few reasons. It can be used by assistive technologies like screen readers, so users can navigate through the page really easily and search engines like Google will also check a website structure to rate it for search results so well made websites are much more likely to get hits.
Let's take a quick look at what this hierarchy looks like in practice. Here you can see that we've got a main heading, h1, underneath it, we have a short paragraph, then a heading two which sits underneath the original heading one. This is a subheading and is followed by another paragraph. After this, we have a third level of subheading, which sits underneath the previous level two subheading.
Next, we've got another level two heading. This heading is therefore as important as the other level two heading on the page. A simple way of thinking about this is an unordered list, which could look something like this or as an ordered list if you prefer, which would look something like this.
Okay, so that's how the logic of headers works. Let's move on now to how the header element works in more detail. So the header tag is normally the very first element on any document. The header tag isn't the same thing as the h1 tag or hx tag if you prefer, you know, h1, h2, h3. Instead, it's the container that normally holds the logo, links back to the home page, any other quick links you might want to include, the main title of the website and maybe even a subtitle too.
Here's a quick example. You can see that I open with a header tag to create my container. Next, I'll include an anchor tag with an href attribute. This tag tells the webpage where to look for the resources and because this tag equals forward slash, it knows to look for these resources in the root folder of the page on the server. The thing it's looking for in this case is a logo.
So I'll use the image tag with the source attribute and to be safe, I'll add an alt attribute, which provides the webpage with alternative information about the image and this means that if users, if the user's internet is slow or the page doesn't load properly, they will at least see some information. Last up, I'll add a title and a subtitle using the h1 and h2 tags. Now that I have all the information I want for my header, I can close the container with the closing header tag.
So how will the user get around your website, or in other words, how will they navigate the website? The simple answer is the nav tag. You can use the nav tag to create a menu for your website, but you should only ever link to major blocks within that website. So to do this, you'll need to create a few navigation links. Here's an example of what this looks like. Okay so I'll open with a nav tag.
Next, I'll give it a title, something like main site navigation. I've used the h2 level because it should sit beneath the overall heading of the website, but be equally important to all other headings on the site. Great, next, I need to use the ul and li tags to create an unordered list. The ul tag tells the browser that this is an unordered list while the li tag tells the browser that this is a specific item on that list. So I'll open with a ul tag then I want my first item, so I'll open a li tag.
Next, I'll use the anchor tag with the href attribute again, pointing back at the root with the forward slash. I'll add in a title for this, maybe home and remember, any text not inside a tag will be displayed. Then I'll close this li tag and I've got my first item in the menu. I'll do the same thing for an about us page like this, and then I'll close it. For now, that's all I'll add so I'll end the example by closing the nav tag. Most pages have a footer. This sits right at the very bottom of the page and might contain things like license agreements, links to other content, images, special offers and indexes for instance. It should contain information relating to the section of the document that you've been working on though.
One of the interesting things about a footer is that it doesn't need any heading elements, instead, everything in the footer is treated as equally important, but if you need to, you can add other elements into your footer. Let's take a quick look at how to create a footer in practice.
First up, I'll open the markup with an opening footer tag. Because this is a footer, I don't want it to take up too much space. For now, I'll add the small tag to kind of keep it contained. This tag tells the browser that I want this text to be rendered in small print. Great, next, I'll add some texts, something basic for now like, I don't know, this is footer text. Great, then I'll close my small and footer tags and it's as easy as that. Of course, I could also add in a nav tag here if I wanted to include any links to external content as well.
Now, within any webpage, you'll probably have a few different pieces of content that are independent of each other. Imagine you're working on a page about the ocean. On one page, you want to talk about both sharks and turtles. Now, sharks and turtles are clearly independent kinds of sea life. So how can you give them each a space of their own on your page? You'll need to use the article tag. The article tag tells your browser that everything within that article is about a specific thing, in our example, either sharks or turtles. So let's take a quick look at how this works in practice.
First, I'll open with an article tag. Next, I need a heading and I'll go with an h2 tag again. Of course, I need to actually write the heading down so this first one will be sharks and then I'll close the h2 tag. Okay, now I need to put some content. So for this, I'll just open a short paragraph and go with something like sharks are apex predators and there are at least 440 known species of them, great. Now I'll close that paragraph tag, then close that article.
Next, I'll create another article for turtles and add my text header, again, turtles. Of course, this also needs to have an h2 level header because I want both sharks and turtles to be equal but independent of each other, and then I'll close the tag. Then all I need to do is add in some content, which I'll do in the same way, and I'll write turtle shells are actually a part of their skeleton. And then I'll close this off in the same way. Sometimes you might want to give users some more information about content on your page but if that content is only related but not essential, you don't want it to take up unnecessary space. To do this, you can use the aside tag and here's how it works.
Okay, imagine you're still working on your ocean wildlife website. It looks like this, right? Now let's add in an aside to link to a glossary that has more information about the sharks, maybe including the Latin name for sharks. To do this, I'll open an aside tag under my paragraph, then link to the glossary with a heading tag. Once I've done this, I need to use the dl tag, which opens a description list, then I'll add in my text, which in this case will be sharks belong to the super order Selachimorpha.
Great, now I can close this tag and the aside. You can also add aside straight into the body of the page instead of nesting them inside an article, but if you do, you'll need to make sure that the aside references the entire page rather than any specific article. Okay, so last up, we need to talk about the section and div elements. Section tag is the most generic of the standard HTML structural elements. You can use it to break up much larger pieces of content, like an article into much smaller pieces. It is specifically used for semantic reasons rather than stylistic ones though.
So it may not even be visible to users but screen readers will be able to use them so they're really, really great for accessibility. Because of this, it's important that you give sections a title even if you don't make that title visible to users. Now, if you want to break up content for stylistic purposes on the other hand, I recommend using the div element instead. It's great because while it allows you to break up content, it does so without any semantic meaning attached to it so you won't be changing the hierarchy of the content on a page by using it.
So let's have a look at the section and div tags in action. To start with, I'll open a section tag then straightaway, I'll give it a heading. I've gone with an h2 for this, but of course, you should use whatever makes the most sense in the context of your own page. After the heading, the rest of the content will appear in paragraphs, something like this is the rest of the content, great. Imagine several paragraphs. Great, now I can close this section and move on.
Now imagine that after a chunk of text, we want to break our chunk up by putting three images in a row that are related but not essential for the context of the section. This is stylistic and would be the job of a div tag. At the end of the second paragraph, I'm gonna add a div and then place three images inside this div. This will have no effect on the layout of the document when something like a screen reader encounters it, it'll just read the alt text out. And that's it for this video. I know it was a longer one, so you may want to watch it again to make sure you really understood everything we've talked about.
We've also actually created a downloadable PDF for you, just which just summarizes exactly when you should be using different structural HTML elements. You can find it in the resources area of this course.
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.