In this ever-evolving landscape of web development, it is crucial to create websites that not only look visually appealing but are also accessible and intelligible to both humans and machines. This is where semantic HTML (hyper-text-markup-language) comes into the picture.
‘Semantic’ relates to meaning in language or logic. Writing semantic HTML means that the ‘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.
By utilizing semantic HTML tags instead of generic <div> and <span> elements, we allow the web browser to understand the structure, hierarchy, and relative importance of the website content that humans instinctively understand from design and layout.
Why do we need to tell the web browser what our HTML elements represent?
Search engine optimization (SEO): Search engine crawlers, like those used by Google, visit websites to understand their content. By accurately describing HTML elements, we provide better guidance to these crawlers. This helps search engines correctly index and categorize our web pages, making them more discoverable in search results, hence improving the website’s search engine ranking.
Semantic structure: HTML offers various elements to structure and organize content, such as headings <h1> to <h6>, paragraphs <p>, lists <ul>,< ol>, and more. Using these elements properly helps search engines understand the hierarchical relationship and context of the content within a page. This improves the overall semantic structure of the webpage, making it easier for search engines to comprehend and present in search results.
Accessibility: Describing HTML elements accurately also benefits website accessibility. Assistive technologies, such as screen readers for visually impaired users, rely on these descriptions to interpret and convey the content to users. By using appropriate HTML tags like <header>, <nav>, <main>, <footer> etc., we enhance the accessibility of our website, which is an important aspect of SEO.
Rich snippets: Well-structured HTML also enables search engines to generate rich snippets and featured snippets. Rich snippets enhance search results by displaying extra information, such as star ratings, product prices, opening hours, etc. Similarly, featured snippets directly provide concise answers to user queries on the search results page. By utilizing appropriate HTML elements, we increase the chances of our content being featured in these enhanced search formats, improving visibility and click-through rates.
Maintenance: 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 applying 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.
Below are some semantic HTML5 tags using which you can improve webpage SEO:
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 if they align with the importance of the text enclosed in the 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.
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 on 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.