5 Ways to Write Semantic HTML and Improve Webpage SEO and Accessibility
While hierarchy and meaning in a webpage are intuitive to humans, semantic HTML makes the same understanding easier for machines.
Semantic relates to meaning in language or logic. Writing Semantic HTML means that tags are never chosen based on the way they appear in a web browser, instead, they’re chosen based on the importance and structure of the content.
Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance. Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
Why do we need to tell the browser what our HTML elements represent?
SEO:
Search engines weigh keyword importance by their placement in the HTML hierarchy. For example, keywords enclosed in an <h1> tag are given more importance than those enclosed in an <p>. By putting your most important keywords higher up in the hierarchy, you’re effectively telling search engines what your page is about and why people searching for those keywords would be interested in your content, hence improving the Search Engine Optimization of your page.
Accessibility:
Over the years, accessibility has become a major component of web design. With roughly 1 billion people in the world with disabilities, it has become just as important for screen readers to be able to perceive and understand web pages as it is for humans. Because semantic HTML uses elements for their given purpose, it’s easier for both people and machines to read and understand it. Making applications accessible not only ensures equal access for people with disabilities but also benefits people without disabilities by allowing them to customize their experiences. Creating a clear hierarchy for the page allows other tools and devices to properly serve up your content.
Maintainance:
One of the best ways in which using Semantic HTML helps you as a developer is by rewarding you with easy maintenance. Since tags are used for meaning and not appearance, the content is completely separated from the presentation, giving you the liberty to change styles without touching the data, or apply styles to multiple types of data.
Because semantic HTML uses elements for their given purpose, it’s easier for both people and machines to read and understand it.
Here are some ways through which you can make sure your HTML markup is semantically correct by the use of appropriate semantic tags:
1. Headings <h1> to <h6>
HTML heading tags range from <h1> to <h6> going from the text of highest importance represented in the largest font-size, down to that of the lowest importance represented in the smallest font size.
However, it is important to note that in order to ensure a semantic markup, heading tags shouldn't be used based on how they make the text appear but instead on the importance of the text enclosed.
Some important points to keep in mind are:
- Use <h1>, <h2>, <h3> only is they align with the importance of the text enclosed in context of the webpage. If you’re merely using the heading tags to give the text a certain appearance, use CSS instead.
- Do not skip heading levels. Every <h2> should be present within an <h1>, every <h3> should be present within an <h2>, and so on, since the heading levels act as sub-headings based on the hierarchy.
- Ideally, a page should only have a single <h1> tag, indicating the gist of the entire web page. This has been known to help with SEO. But of late, it has become a debatable topic with many arguing that various sectional <h1> work fine too. Even Google has now said that multiple <h1>’s wont really hamper your SEO. This is now a decision best left up to you, based on the significance of the concerned text on your webpage.
2. Document Structure
If you’re sectioning your webpage purely using <div> and <span>, you’re developing a page that might look okay but is neither meaningful nor accessible.
<div> and <span> are non-semantic tags, which means they do not convey any underlying meaning regarding your elements to the machine, and if used for significant parts of the page, can ruin its SEO and accessibility since the browser cannot identify what the different sections of the document represent.
Instead, you should be using semantic tags such as <header>, <nav>, <footer>, etc to section the various parts of your document so that the browser can identify and understand the significance and meaning of your document and use this information to improve accessibility and SEO.
- <header>: A container to be used for a web page header that typically contains the site logo, heading elements, and site navigation.
- <footer>: A container to be used for a web page footer that contains authorship, contact, and copyright information in addition to navigational links and a link back to the top of the web page.
- <main>: A high-level element used to contain all of the content that is unique to a single web page and not repeated across multiple web pages.
- <nav>: An element to contain blocks of site navigation links. This element is typically placed in the page <header> and <footer>, and may also be used in an <aside> (sidebar) element as well.
- <section>: The <section> element is used to mark off sections of a document, such as chapters or major sections of a long-form post.
- <aside>: Use to identify content that is related to the main content on the page but not part of the primary flow of the document. For example, the <aside> element may contain a glossary definition of a term that appears in a blog post or it may contain advertisements related to the contents of the page.
- <article>: The article element is used to identify a block of content suitable for reuse and syndication in other settings, such as a blog post or technical article.
3. Textual Meaning (Bold, Italics, Highlight)
Often in a document, you see text that appears bold or italicized. While this is sometimes done to convey meaning, other times is purely due to aesthetic and presentational reasons. HTML tags <b> and <i> are used to make the enclosed text bold and italic, respectively, but they do not convey any meaning. Since meaning and design need to be kept separate for semantic HTML, it is important to use semantic tags for the same purpose.
- <strong>: Text that is marked with <strong> tags is not only displayed in a bold typeface but is also given added importance by the browser.
- <em>: This not only italicizes the text enclosed but also tells visitors using screen readers or other computers to access the content that the tags are applied to add emphasis to the tagged content.
Some other tags that can be used for textual meaning are:
- <mark>: This tag is used to highlight text of specific importance in a specific context. For example, it can be used to highlight every occurrence of a search term in a search results page.
- <cite>: The <cite> element is used to identify the original work from which a bit of content originates.
- <blockquote> and <q>: The <blockquote> and <q> (quote) elements are used to identify text that is a direct quotation from another source.
- <time>: The <time> element can be used to tell browsers, web crawlers, and other smart devices that a specific bit of content represents time on a 24-hour clock or a specific calendar date.
4. Media Type
HTML5 also includes three tags that identify the type of media served up between the tags. These tags serve a dual purpose. First, they signal to the browser the need to queue up a specific technical resource such as a video playback engine. Second, they assign semantic meaning to the content.
- <audio>: Used to add one or more sources of audio content to a document and to allow the browser to pick the best option based on the visitor’s device and browser.
- <video>: It is used to add video content to a markup document.
- <picture>: The picture element is used to allow a web browser to pick the best image from the available options based on the results of a media query.
5. Correlation Tags
Several HTML elements are used to signal a correlation between multiple elements and tell the browser that the items are related to each other.
- <ol> and <ul>: the use of an ordered list <ol> tells the browser that the items on the list need to appear in a specific order. Unordered lists <ul> on the other hand are used to signal a relationship between the items on the list and to indicate that they do not need to be understood in a specific order.
- <figure>: The <figure> element is used to group together a piece of content, such as an image, chart, graph, or text, and a caption marked off by <figcaption> tags. By nesting the caption and the content between the <figure> tags a relationship between the nested elements is identified.
- <address>: This attribute is used to associate contact information with the parent element that contains the <address> element. For example, when added to an <article>,the <address> element provides contact information for the article author, and when added to a web page <footer> the <address> identifies contact information for the web page owner.
Structure, relative importance, and hierarchy are things that humans understand instinctively from the design and layout. Correctly using the correct semantic HTML tags in the place of <div> and <span> simply makes that understanding easier for machines.
