HTML5 adds a new method of structuring web page content that makes it easier for both humans and machines to make sense of code with Semantic Element tags. These tags identify what purpose a block of site code serves by surrounding it with an opening tag and a closing tag.
These tags are named after common webpage parts including: <section>, <header>, and <footer>. In particular, the <article> and <aside> tags are useful for the content on pages created by a blog writing service because they can be used to designate what page content is the focal point and what page content is auxiliary.
In a typical case, you’d have article content in the left page column wrapped with the <article> and </article> tags while having things like social media widgets and other content modules in the right column wrapped with the <aside> and </aside> tags.
When a computer program like a web crawler examines a web page, the Semantic Element tags act like road signs to identify things like where to go to navigate to other pages, which content is unique to the page, and how that unique content breaks up into different sections. They give search engine crawlers and idea of what to pay attention to on your page so they don’t do things like waste time interpreting your page headers, page footers, and repeated modules dozens of times.
Since the Semantic Elements use words that not only break up the content, but specify what it does, they make it easier for a human to look at the code and tell what each part does. For example, instead of sifting through thousands of lines of code looking for where the footer begins, someone can just search for the word “footer” to find it.
The tags form a skeleton of the website. For example, a typical blog writing service may use semantic tags like this:
- The site navigation including links to other site pages and social media accounts belongs between <nav> tags
- The actual blog content is stored between the <article> tags
- Any widgets or modules including social media sharing features, advertisements, and links to other blogs goes between the <aside> tags
- Information about the author as well copyright information goes between <footer> tags.
Alternatively, the <article> tag can be used to surround links to different articles and blogs within a headlines listing or to surround multiple articles on the same page. The same continuous article should not be displayed with two <article> tag groups. Excluding the <header> and <footer> tags, it’s fine to use the tags more than once on the page.
While these tags make it easier for search engines to understand your site content, they serve more as an error-proofing system that helps make sure crawlers interpret your content correctly than actually helping improve your page’s ranking in results. Content is still king in ranking results. However, just because Semantic Elements won’t boost your SEO score if search engines are already successful in understanding pages, using them is still a best practice from a development standpoint because they produce cleaner code. Additionally, Semantic Elements are potentially helpful for screen reader devices that support them.
Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.
