In this lesson, we will have a look at the different elements that make up semantic markup in HTML5
Why use semantic markup?
When working with web development, we often need to place content in boxes to collect the pieces of content that are related or to place elements in relation to other elements.
Until now, we haven't had that much focus on these boxes and the connection between the pieces of content on our pages - but that is about to change...
In HTML, there are two types of boxes used to group pieces of content - the semantic ones and the non-semantic ones.
The ones of you who have worked with HTML before may have come across a lot of div elements. A couple of years back, practically every box used to create the layout on a page, was really a div element. Nowadays, however, div elements have - in most cases - been replaced by semantic elements = elements with a meaning.
Non-semantic elements, like the div element, doesn't give the browser any clue as to what's in them. They are kind of like moving boxes with no tags on them. There's no hierarchical relation between them either.
The most common non-semantic tags are:
The div element is a block element that is very commonly used in CSS Frameworks like e.g. Bootstrap.
The span element, however, is an inline element that is sometimes used to highlight and/or change the styling of some words in a paragraph.
Layout-wise you can achieve the same thing using semantic or non-semantic markup, but using semantic markup, the code will be understood more easily by other web developers as well as browsers.
When marking up the page, here are some of the semantic elements that may be used instead of div elements:
Let's have a look at some of them.
The header element
The header element usually contain the page header, but it may also be used in sections, articles or asides.
The nav element is to contain all major blocks of navigational links, like menus, tables of content, and indexes:
The main navigation is often placed inside the header element. You can find examples of this on the websites mentioned above as well.
The main element
The main element is meant to hold the primary content on a page:
The section element
The section element represent a standalone section. These sections typically have a heading:
Sections may also have a header and/or footer.
The article element
Examples of content that may be placed inside articles are blog posts and articles on news sites:
Like sections, articles typically have a heading, and may also have a header and/or footer.
The aside element
Content that is placed in the aside element should not be part of the primary content of the page. The element is often used to contain sidebars - like on a blog where they may hold some information about the blogger.
The footer element
The footer usually contains information about the author of the section, copyright data or something like that.
If you inspect the CSS-Tricks website, you'll find examples of use of most of the elements mentioned above. They are sometimes wrapped in div elements - but they are there to semantically mark up the content.
Add semantic markup to the pages that you have created so far. Beware only to add boxes where boxes are needed.
All of the semantic elements explained above are block elements. And now that we know some block elements, we might want to add some background images to some of them - just for fun.