Everyone knows the importance of enhancing search engine optimization (SEO) through keywords, but relatively few people are aware of the SEO benefits of using semantic HTML. In fact, you might be surprised to learn that your own web developer may be unfamiliar with semantic HTML. The earlier the HTML version used for your website’s development, the more likely that it was not developed with semantic HTML in mind. Additionally, if you have an earlier version of an HTML-developed website, it probably has not been updated with HTML5 features, which includes a significant expansion of its semantic capabilities.
Confused yet? OK, then, let’s start with the basics.
What is Semantic HTML?
Simply put, semantic HTML is the use of code tags that not only indicate how web text is displayed on the page, but also explain the purpose of the text. Not only does this help web developers keep track of how the page is arranged, but helps web browsers and search engines navigate through web pages more efficiently, which can enhance your website’s SEO. While the improved website navigation helps search engines better pick up on keywords, it also helps the search engines pick out the most appropriate featured snippet for use on search results pages.
The most recognizable, and commonly used, semantic HTML tags are the header tags—<h1> through <h6>—which clearly define the level of importance of headlines and subheads used on the page. For the purposes of SEO, search engines consider keyword importance by their position within the HTML hierarchy, which can be dictated in part by semantics. Thus, your keyword placement has more value in <h1> than it does in the lower numbered headers, and more value than placement in <p>, for paragraph, which has limited importance within semantic HTML code.
In practice, for example, you might want to tag your large-type headline <h2> and its longer subhead <h1> should the subhead contain the most important keyword(s) on the page, or have more of them than the actual headline.
The <b> and <i> tags, which designate the bolding or italicizing of specific text used to be considered prime examples of non-semantic HTML. While HTML5 has apparently redefined them as semantic, they have not been re-purposed to better capture the attention of search engines. Otherwise, web developers would be bolding and italicizing all keywords.
HTML5 Marks an Evolution in Semantic HTML
The release of HTML5 marked a standardization of the classification of style elements used in HTML coding and increased the number of semantic codes search engines and browsers seek out to better define webpage elements and navigate through them. Those incorporating these new codes on their websites should definitely gain an SEO edge over those not using them. And those who actively strategize the use of semantic HTML5 tags and related keyword placement should see even bigger SEO gains.
Whereas prior HTML version semantics provided search engines with information about the basic elements on a webpage, such as headers and “main” text, HTML5 provides much more detail about the purpose of specific text. Among the most important—and potentially SEO-valuable—HTML5 semantic components are:
<main> — identifies and highlights the main body of text on a given web page.
<article> — placed within the <main> tag or as a stand-alone, <article> designates the content as text that can stand alone as a blog post, news story, commentary, or other information within the page’s content.
<section> — helps delineate sections within <main> and/or <article> that contain related content that can serve as a subset.
<aside> — this tag identifies information that is supplementary to either the main body of text or an associated <article>. It can be used to identify sidebars, or provide details about the author, readership, or anything else pertinent to the surrounding text.
<figure> — specifically highlights photos, illustrations, charts, diagrams, and other graphics, this tag helps search engines link their relevance with the associated text.
<figcaption> — used to highlight the caption or other relevant details specific to the associated <figure>. Can only be used once as a subset within each specific <figure> details, no matter how many actual images may be included with the <figure>.
<mark> — this tag allows you to specifically highlight components of text, apparently without any restrictions (it is unclear how much weighting search engines give to this tag for SEO purposes).
<nav> — identifies and highlights navigation links related to a specific block of text.
<details> — specifies additional details about the content that can either be hidden or visible. Can be used to identify an interactive widget that a user can open and close.
It’s Never Too Late to Incorporate Semantic HTML on Your Website
Whether you’re in the midst of developing a new website, or have a website that was developed under an older HTML version, it’s never too late to incorporate HTML5 semantics. HTML5 semantic code can be added into the mix, and/or can substitute existing code, as long as coding rules and code hierarchy placement are followed. Strategizing it for SEO purposes may prove the more difficult task given the constantly changing search engine algorithms and their relative lack of transparency, but knowledgeable website developers who keep abreast of SEO trends tend to have a good grasp of how to best utilize HTML semantics.
We’re here to help. If you would like to learn more about enhancing SEO through HTML semantics, or learn about other elements relating to successful web development and SEO, contact our team today.