What Is Semantic Markup?

Date First Published: 12th November 2022

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 6/10

CONTENTS

Examples Of Semantic and Non-Semantic Tags
Benefits Of Semantic Tags

Learn more about what semantic markup is in this article.

Semantic markup, also known as semantic HTML is the use of HTML markup to effectively describe the meaning and purpose of page elements. The word 'semantic' means a word or sentence properly connected with the meaning. This can be applied to HTML as semantic markup is HTML tags that are used in a way that is properly connected with the meaning of the words used in the tags and say what they actually do. Most HTML tags are semantic as the name of the tag contains some information about the type of content found between the opening and closing tags.

Semantic HTML markup specifies the meaning of different tags to users and computers. Semantic HTML tags also have names that tell the person or computer reading the markup exactly what they do.

Examples Of Semantic and Non-Semantic Tags

Examples of semantic tags are:

The <p> tag. This tag is a semantic HTML tag as it can be clearly identified that the text within the opening and closing tags is a paragraph. Anyone reading this tag will understand its purpose.
<ol> and <ul> tags. The <ol> is used to create an ordered (numbered) list and the <ul> tag is used to create an unordered (bullet point) list.
<button> tag. Obviously, this tag is used to create a button.
<strong> tag. Indicates that the element is of greater importance.
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags. Headings in a HTML document in descending order of importance (size).

With the release of HTML5, lots of new tags were added to provide semantic meaning to the elements and define different parts of a webpage. A lot of the semantic tags came from the analysis of webpage markup performed by companies, such as Opera and Google. They found that a lot of websites use id and class attributes to specify the meaning of the contents of non-semantic elements, such as '<div id="footer">' and '<div class="heading">'. These findings helped the W3C to identify and target new semantic tags to include in HTML5. What these tags define is very obvious. Examples include:

<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
<figure>
<summary>
<time>

Examples of non-semantic tags are:

The <div> and span tags. Even though they are useful for styling and formatting webpages, these tell nothing about the purpose of the content. As stated above, website owners use id and class attributes to specify the meaning of the non-semantic elements.

Benefits Of Semantic Tags

The benefits of semantic tags are:

Accessibility

Screen readers rely on semantic tags to identify the elements of the HTML document and provide accessibility features, which is helpful for users with visual impairments or users who find it difficult to use a mouse. Visiting a webpage using a screen reader can be difficult if a webpage does not use semantic markup. For example, if a webpage is completely structured using <div> and <span> tags, it will be unclear to those who cannot see the page how the sections relate to each other. Semantic tags divide a page into separate parts.

Another example of an accessibility feature is that some semantic elements come with built-in keyboard accessibility. When a screen reader detects a <table> element, users can use special keyboard controls to move up and down rows and across columns. This cannot be accomplished with a <div> tag as this tag does not tell the screen reader that this element acts as a table. Writing semantic HTML can enable additional accessibility features on a website.

SEO

Semantic markup helps search engine bots get a better understanding of the structure and contents of a page, which is good for SEO. It tells them what content is important on a page. For example, keywords within a <h1> tag indicate much more important than the <p> tag as the <h1> tag indicates the main title of the page rather than a block of text, which is what the <p> tag indicates.

Readability

Semantic markup will make HTML tags easier to understand, more organised, and easier to locate. Without semantic markup, developers would have to look through a large number of <div> or <span> tags, which is time-consuming.