One of the benefits of HTML is it lets you structure information to better illustrate it’s meaning. This is called semantics and it’s very important to the web page construction process. Here is the structure of a typical website:
Without hierarchy and structure it’s difficult to tell how the content relates to one another especially for people not using a screen to access the website and for bots like search engines. This is where HTML sectioning and heading elements are used. These elements group content together and give semantic meaning. These are the heading tags, h1 to h6 and the nav, section, article and aside elements.
In addition to the sectioning elements HTML has several other semantic elements to add structure and meaning to a web document. These are header, main and footer.
Below are most these elements in use together on the typical website as shown above:
I can’t stress enough how important it is for new web developers to understand and correctly use these sectioning and semantic elements. It makes documents easier to read by humans and machine alike, increase your accessibility and even your search engine results.
The code below is an example of semantic code and demonstrates a handful of the elements discussed.
<h4>Sub Sub Heading</h4>
Planning your outline for your page and your site as a whole is very important part of building the site semantically. What’s an outline I hear you ask, well think of it as a table of contents that lays out the structure of your HTML document. For example the above code would produce the following outline:
The 2 Untitled Section‘s are the nav and the footer. As these have no h element with a heading they come up as untitled.
A good well structured layout that makes sense both logically and semantically is essential for a site that will be received by all users, human and bot, as intended.
A great tool for checking your outline is at https://gsnedders.html5.org/outliner/