My understanding of HTML5 semantics is that it provides a universal structure for HTML code in order to make it more easily readable and navigable. HTML5 semantics makes understanding the code easier for both the user and any machines that are accessing the code to relay its content. Prior to the implementation of HTML5 semantics, <div> elements were used to divide up most of the content on a page. This was a problem for multiple reasons, one being that it made the code less universal across the web.
HTML5 semantics makes it easy and fast for machines to grab select content from a page due to universal elements that group the same types of content similarly across pages. In this way, it is comparable to how CSS works to improve the human user’s experience with a webpage via making it a familiar and aesthetically pleasing interface. Some basic and important semantic elements include <header>, <nav>, <footer>, and <aside>. An example of how to use these and other elements to make a document more readable is provided below.
In the script above, the semantic elements used provide an easy to navigate document. They also allow the user to easily identify a subsection and copy it to other pages across a website. The first element used, <header> contains elements within it that separate the heading items of the page from the body. These items are things like the site title and navigation bar. The navigation bar provides a way for machines to easily determine the content of the website including any subpages. Within the <nav> element, I have included an unordered list element that contains a list of links to different sections of a site.
After the header content, the remainder of the page is contained within the <main> element to signify the main page content. This section is further divided into separate articles that utilize headings and paragraph elements within them. The articles are able to stand alone and can be pulled as separate pieces by a search engine for example.
Another useful element included in the script above is <aside>. This allows an individual to delineate content that is separate from the main page but still somewhat related, such as a sponsor ad. Using an aside signifies that the content within it is not a part of the blog, article, or other content displayed. In the example above, I have created an aside that contains an additional navigation menu. When the HTML script is opened in a browser, it appears as follows:
The above page could have been reproduced by using many <div> elements instead of specific HTML5 semantic elements. However, this would make it harder to edit and read for both humans and machines. The semantic elements used help to divide the page into sections that are universally understood to contain certain predictable types of content. The example presented in this post is a simplified version of how semantics are used, and provides a foundation that can be expanded on to create a more complex webpage.
Bread & Bones 
One thought on “What are HTML5 Semantics?”