Writing quality content is vital to your SEO ranking, but there’s more you can do to help browsers and developers display that content on the page. By using Semantic HTML5 tags, you give meaning to the information displayed on the webpage or web app, as opposed to using markup for stylistic purposes. With these tags, browsers and developers can translate important elements of your content and prioritize accordingly. In a nutshell, semantic HTML5 markup describes content, not appearance.
Tags such as <div> and <span> are commonly used in HTML. The <div> tag is a block element that simply divides an HTML document into sections, and the <span> tag is an inline element used mainly for styling. Neither of these tags, however, add meaning to your work. In fact, it is highly encouraged to use an element other than <div> to ensure accessibility and maintainability, for this tag only scratches the surface of prioritizing your web page’s information. Instead, you can use semantic HTML tags to help browsers determine that component’s relevance. For example, to users looking at a website, it’s easy to locate the header and the menu, but search engines are basically blind to these elements.
For example, this block of code gives us (and browsers) little information about what a particular web page is about and which elements are the most important.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div> The moon is in fact not made of cheese </div> <div> Parmesan cheese wheels for sale! </div> ... <aside> The moon is in fact not made of cheese </aside> <main> Parmesan cheese wheels for sale! </main> |
Which set of markup best describes what the page is “about”? The second example uses semantic tags which search engines can use to understand important elements of a page.
Let’s take a look at some specific tags and learn a little bit more about when they should be used on a page.
Semantic HTML5 Tags
<header> – The header tag introduces content in your document, whether it be a new topic or a logo. It will be considered to be the introductory information for any structural markup (like <section> or <div> or even <body>) in which it is placed. This tag can be used to contain a heading, but it is not required.
<h1> to <h6> – Heading tags are used to help create an “outline” of content on the page. By using headings, you can essentially create a hierarchy of content that the browser can understand. Heading tags are one of the fastest ways a browser can determine what is “important” on a page. Use these tags accurately: Don’t use a <h1> tag followed by an <h3> tag strictly for stylistic purposes, if possible.
<nav> – The navigation tag indicates a set of navigation links; for example, a menu.
<section> – The section tag indicates a grouping of information within a document or on a web page based on thematic similarities. Use the section heading tags (<h1> to <h6>) to introduce a new section or show subsections.
<article> – The article tag indicates self-contained content within a document or on a web page; for example, a forum post, a news article, or a blog post. You may have sections within an article.
<figure> and <figcaption> – A figure tag indicates an image or any sort of visual element in your content. Within the figure element, you can include the figure caption tag to add a description either above the image source or below it. For example:
1 2 3 4 5 | <figure> <img src=”/cheese-plate.jpg” alt=”rustic cheese plate”> <figcaption>A cheese plate presented for hungry homesick moon-people. Photo by <a href=”http://www.flickr.com/photos/cameraguy”>Foe T. Grapher</a></figcaption> <figure> |
<strong> – The strong tag indicates a keyword or phrase of importance. Use this in place of the <bold> tag, as it is only used stylistically and adds no meaning to your content. Use this sparingly and accurately to avoid seeming “spammy.” This tag does not change the meaning of a sentence, it just means that a particular piece of text is very important.
<em> – On the other hand, the emphasis tag indicates words or phrases that should be read with stress emphasis, and shows up on the screen as italicized. Screen readers will also take this into consideration. The placement of this tag will change the meaning of a sentence.
<mark>– The mark tag indicates text in a document that is used for reference purposes. Perhaps it is used to highlight a quote (or a part of it) that you want user’s to notice.
<aside> – This tag indicates a section of a page that is related to adjacent content but should be considered separately. Perhaps this tag might indicate a quote that being pulled from the content for emphasis, or it could simply be an advertisement in the sidebar.
<footer>– This tag indicates any information about a section including links, citations, or even appendices. The footer usually appears at the end of section.
<main>– This tag represents the body of a page and excludes repetitive elements such as menus, copyright information, logos, etc. You shouldn’t include more than one main section within a page. In addition, it’s discouraged to use the main tag as a descendant of an article, aside, footer, header, or navigation section.
There are a slew of semantic HTML5 tags; these are just a handful of those we consider important. And although there are a lot, when using semantic tags, you should keep your content structure simple to avoid inaccurate tags and to avoid negatively affecting your SEO ranking. Check out the official W3C Recommendation for more information on semantic HTML5 tags.
Also check out Sevaa’s blog for more SEO tips and developer tricks.
