Final HTML5 Semantics Wrapper
This article was written to introduce a tool that would help front end developers understand how various websites use semantic HTML5 tags to develop their sites.
1. Introduction
Over the last two weeks as a cohort of Microverse, I had the opportunity to reproduce well-known websites using HTML & CSS with a fellow cohort, Tiffany Arellano. The following are links to the projects that we have developed:
What we learned from these projects was valuable as it taught us to become well versed in using semantic HTML to develop websites in a more meaningful way.
To facilitate the understanding of how tags are used on various websites, I have developed a browser extension currently available in the Chrome Web Store called the Semantic HTML Viewer.
- The screenshots in this article were gathered by using the aforementioned extension tool, you can install it extract the most of this article.
2. But first, why is Semantics so important?
What is a semantic HTML?
Semantic HTML is the focus on how a website is developed in a more meaningful way for both humans and machines. It is a way of writing HTML codes to communicate its structure and how it serves its purpose in the grand scheme of its development.
Benefits of using semantic HTML (MDN)
- Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching through endless
divs with or without semantic or namespaced classes - Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
Most important semantic tags (HTML Spec)
- The
headerelement represents a group of introductory or navigational aids. It is intended to usually contain the section's heading (h1-h6) and is also used to wrap a section's table of contents, a search form, or any relevant logos. - The
footerelement typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. - The
navelement represents a section of a page that links to other pages or parts within the page: a section with navigation links. - The
mainelement represents the dominant contents of the document. A document must not have more than onemainelement. - The
asideelement represents a section of a page that consists of content that is tangentially related to the content around theasideelement, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. - The
articleelement represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. - The
sectionelement represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.
3. About the extension
The extension works by indicating the various semantics used on a website using a color system. When you activate the extension, differing elements will be wrapped by a colored box with a color-key revealed to you on the left-hand side of the screen.
For further efficiency, you are also given the semantic tag used when you hover over an item.
Here is a slice of the code. You can check it all on my GitHub.
Check the following websites for a few examples of this extension being used.
4.1. The New York Times
I highly recommend that you install the extension for the full experience of how it works but in the meantime, let’s take a look at some of these screenshots below.
Full website semantic markups screenshot.
The <body> is divided by 4 semantic elements: <header>,<main>, <nav> and <footer>. Let’s see how the slices use the semantic tags.
If you haven’t downloaded it yet, here is the link for the extension!
4.2. The Next Web
Full website semantic markups screenshot.
The <body> content is divided with three semantic tags <nav>, <main> and <footer>.
5. Conclusion
The HTML semantic markup makes the content more readable by programmers and search engines, there are some differences at the implementation of these tags, no golden rule. But you should always use them whenever possible, respecting its hierarchy.
