Semantic HTML Elements and Tags

Semantic HTML tags are used to define the function and meaning of elements within a website’s Document Object Model (DOM). These tags work in conjunction with other HTML elements to create web documents that are both accessible and optimized for search engines. For example, the “main” tag indicates the primary content of a parent HTML element, while the “aside” tag denotes content that is supplementary to the main flow.

Search engines leverage semantic HTML tags by performing HTML normalization and cleansing, extracting the significant parts of web documents while removing unnecessary code clutter. Assistive web technologies like screen readers utilize semantic tags to enhance the internet experience for users with disabilities. For instance, the “strong” tag, which highlights text of particular importance, prompts screen readers to emphasize that text, often by reading it louder. The use of semantic HTML is crucial in creating an inclusive and effective web environment.

Read the definitions, functions and descriptions of semantic HTML tags below.

Article

Description: Represents a self-contained composition in a document that could stand independently.

Meaning and Function: Used for forum posts, blog entries, news articles, or similar independent items of content. Ideal for content that can be syndicated or reused.

Aside

Description: Marks content that is tangentially related to the content around it, often used as a sidebar.

Meaning and Function: Suitable for related links, glossaries, advertising, or side content that complements the main material.

Details

Description: Specifies additional details that the user can view or hide.

Meaning and Function: Ideal for FAQ sections, interactive widgets, or to manage content visibility, enhancing user interaction.

Figcaption

Description: Provides a caption or legend for a parent “figure” element.

Meaning and Function: Offers contextual explanation or description for images, diagrams, or other content enclosed in “figure”.

Figure

Description: Represents self-contained content like images, diagrams, or illustrations.

Meaning and Function: Used for grouping media content with “figcaption” to provide context and meaning.

Footer

Description: Defines a footer for a document or section.

Meaning and Function: Contains authorship information, related documents, copyright, and other related details at the end of a section or document.

Header

Description: Signifies introductory content or a set of navigational links.

Meaning and Function: Often contains heading elements, logos, and other introductory material that sets the stage for the content.

Main

Description: Specifies the primary content of a document.

Meaning and Function: Delineates the main, unique content of a page, distinct from sidebars, headers, footers, and navigation links.

Mark

Description: Denotes text that should be marked or highlighted for reference or emphasis.

Meaning and Function: Used to highlight parts of text for navigation, search terms, or important segments.

Nav

Description: Defines a section of navigation links.

Meaning and Function: Contains major navigational blocks, like primary site menus or index lists, to aid in site navigation.

Section

Description: Represents a thematic grouping of content, typically with a heading.

Meaning and Function: Used for organizing content into logical sections, enhancing readability and structure.

Summary

Description: Provides a visible heading for a “details” element.

Meaning and Function: Offers a concise overview of the collapsible content in “details”, facilitating user interaction.

Time

Description: Represents a specific period in time or a date.

Meaning and Function: Encapsulates dates, times of the day, or durations, often with a datetime attribute for machine-readable formatting.

What is Semantic HTML?

Tim Berners-Lee, the inventor of the World Wide Web, envisioned a web where information could be understood and processed by humans and machines. Semantic HTML directly responds to this vision, intertwining web design, information retrieval, and search engine optimization (SEO).

From a web design and HTML standpoint, Semantic HTML refers to using HTML elements that describe their meaning and content. Instead of merely presenting information, these elements convey the type and structure of the data they hold. This approach is crucial for accessibility and enhances the user experience, as it allows browsers and assistive technologies to interpret the page structure better.

In the context of SEO and information retrieval, Semantic HTML is pivotal. Search engines use the semantic cues from HTML elements to understand better and index web content. This semantic understanding aids in presenting more accurate search results to users. For instance, using a <nav> tag to wrap navigation links on a site tells search engines that these links are part of the site’s primary navigation structure, potentially affecting how these links are weighted in search algorithms.

What is the relevance between the Semantic Web and Semantic HTML?

The concepts of the Semantic Web and Semantic HTML are intertwined, both originating from the idea of making information on the web more accessible and interpretable by machines. The Semantic Web, an extension of the World Wide Web as proposed by Tim Berners-Lee, aims to provide a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. It’s about making web data machine-readable.

Semantic HTML plays a fundamental role in this vision. By marking up web content semantically, developers make the underlying meaning of the content understandable to web browsers and other technologies. This semantic markup is a building block of the Semantic Web, providing a layer of structured data that can be easily processed and interconnected, contributing to a more intelligent and useful web.

What is the relevance between Semantic SEO and Semantic HTML?

Semantic SEO and Semantic HTML are closely related in enhancing the visibility and understanding of web content. Semantic SEO involves optimizing a website so search engines can understand its context and meaning, leading to more relevant and targeted search results.

Practical examples demonstrate this relationship. For example, using the <article> tag for a blog post signals to search engines that the content enclosed is a self-contained composition. This clarity helps search engines index the content appropriately, improving its chances of appearing in relevant searches. Similarly, using the <header> tag for the header section of a page helps differentiate the primary content from supplementary content like sidebars or footers.

Other search engines, like Bing or DuckDuckGo, also leverage the semantic structure of HTML to enhance their indexing processes. Meaningful HTML tags contribute to a richer understanding of the page content, enabling these search engines to categorize and rank web pages more effectively.

What are the Semantic HTML Tags?

Semantic HTML tags clearly describe their meaning in human and machine-readable language. Below is a table outlining some common semantic HTML tags, their definitions, attributes, and related semantic tags:

Each tag is designed to convey specific information about the type of content and its role in the web page structure. These semantic tags contribute to a more semantically rich web, enhancing user experience and SEO.

1. “<Article>” Semantic HTML5 Tag

The <article> is an HTML element representing a self-contained composition within a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget, or any other independent content item.

Relevance to Other Semantic HTML Tags: The <article> element is often used in conjunction with other semantic elements, such as <section> for grouping different thematic groups of content, <header> and <footer> for the heading and footer of the article, and <aside> for related content like sidebars.

Web Accessibility: Search engines interpret the <article> tag as a signal that the enclosed content is significant, standalone information. This helps index the content appropriately and can contribute to better SEO, making the content more likely to be considered relevant for specific queries.

In terms of web accessibility, using the <article> tag correctly can help assistive technologies like screen readers understand the structure of the content, making it easier for users with disabilities to navigate through significant pieces of content.

Below is a code example for using a semantic <article> HTML tag.

<article>
    <!-- Header of the article -->
    <header>
        <h1>Understanding Semantic HTML</h1>
        <p>Published on: <time datetime="2024-01-03">January 3, 2024</time></p>
    </header>

    <!-- Main content of the article -->
    <p>This article explains the importance of Semantic HTML in web development...</p>

    <!-- Footer of the article -->
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

Notes and conclusions about <article> Semantic HTML tag are given below.

• The <header> and <footer> within the article, provide context about the article.
• The <h1> tag gives the article’s title, which is important for SEO and accessibility.
• The <time> tag with the datetime attribute specifies the publication date, useful for both users and search engines.

Each element makes the web content more accessible, understandable, and easily navigable for users of search engines and other web services.

2. “<aside>” Semantic HTML5 Tag

The <aside> element in HTML is designated for content indirectly related to the main content around it. This content is often presented as a sidebar and can include related links, a glossary, advertising, or additional information like a brief author biography in a blog post.

Relevance to Other Semantic HTML Tags: “<aside>” is commonly used in conjunction with <article> to indicate supportive yet distinct content from the main article. It can also be paired with <nav> elements for a group of navigational links, emphasizing its complementary nature to the primary content.

Web Accessibility: For accessibility, using “<aside>” helps assistive technologies like screen readers identify and potentially skip supplementary content that is not central to the page’s main content. This enhances the navigational experience for users with disabilities.

Code Example: “Aside” semantic HTML tag use example in HTML is demonstrated below.

<article>
    <h1>Introduction to Semantic HTML</h1>
    <p>Semantic HTML is essential for web accessibility...</p>
    <!-- Side content related to the main article -->
    <aside>
        <h2>Recommended Articles</h2>
        <ul>
            <li><a href="#">Article on Accessibility</a></li>
            <li><a href="#">Understanding HTML5 Semantics</a></li>
        </ul>
    </aside>
</article>

Notes and Conclusions about the “<aside>” Semantic HTML Tag is below.

• The <aside> tag is used within the context of an <article> to present additional, but not essential, content.
• Incorporating a heading (<h2>) within <aside> helps provide structure and context, enhancing the overall semantic layout of the page.
• This tag’s use supports the creation of a more structured and accessible web content layout, which is beneficial for user navigation and SEO.

3. “<details>” Semantic HTML5 Tag

The “<details>" element in HTML discloses additional details that users can view or hide. This element is ideal for creating interactive sections like FAQs or managing content visibility to reduce information overload.

Relevance to Other Semantic HTML Tags: It is typically used with the “<summary>” element, which provides a visible heading for the “<details>” content. This combination acts as an interactive widget, allowing users to engage with the content according to their needs.

Web Accessibility: The "<details>” and “<summary>" tags offer an inherent method to create interactive components that are accessible and easy to navigate using assistive technologies like screen readers and keyboards.

The code Example for the “<details>” semantic HTML5 tag is demonstrated below.

<details>
    <summary>More about Semantic HTML</summary>
    <p>Semantic HTML includes elements like <code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, and <code>&lt;section&gt;</code>, each with a specific meaning.</p>
</details>

Notes and Conclusions about the “<details>” Semantic HTML Tag are below.

• The <summary> element acts as a clickable heading for the <details> content, providing an intuitive user interface.
• The content within <details> is only revealed when the user opts to expand it, offering a user-friendly way to manage large amounts of information.
• This tag enhances the user experience by providing interactive and accessible content, which also benefits SEO by allowing search engines to index hidden yet relevant content.

4. “<figcaption>” Semantic HTML5 Tag

The <figcaption> element in HTML provides a caption or a legend for its parent <figure> element. It’s commonly used for images, illustrations, diagrams, code snippets, or any content that is wrapped within a <figure>.

Relevance to Other Semantic HTML Tags: The “<figcaption>” element is directly associated with the <figure> tag. This relationship is important for providing context to the content enclosed in “<figure>” enhancing the understanding of complex or significant imagery or illustrations.

Web Accessibility: The use of <figcaption> enhances web accessibility by giving descriptive text for images or other items within a <figure>. This is particularly helpful for users who rely on screen readers, as it offers a textual interpretation of visual content.

<figcaption> semantic HTML usage in Code Example is below.

<figure>
    <img src="example-image.jpg" alt="Descriptive text of the image">
    <figcaption>This is a caption describing the above image.</figcaption>
</figure>

Notes and Conclusions about the “<figcaption>” Semantic HTML Tag are below.

• <figcaption> provides a narrative or explanation for the content in <figure>, aiding in understanding the context of visual elements.
• This tag is crucial in making images and other media accessible and understandable, especially for visually impaired users.
• Its use is also essential for SEO, as it allows search engines to understand better and index the content of images and figures.

5. “<figure>” Semantic HTML5 Tag

The <figure> element in HTML represents self-contained content, often a group of images, diagrams, illustrations, code listings, etc., referenced in the document’s main flow.

Relevance to Other Semantic HTML Tags: <figure> is commonly used with <figcaption> to provide a caption or description for the content within. This semantic pairing is important for contextualizing the enclosed content, whether an image, a code snippet, or any other standalone unit.

Web Accessibility: For users who rely on screen readers and other assistive technologies, the <figure> element helps to delineate and describe complex visual information, making web content more inclusive and accessible.

Code Example for “<figure>” semantic HTML tag is below.

<figure>
    <img src="example-diagram.jpg" alt="Descriptive text of the diagram">
    <figcaption>Diagram illustrating the concept of Semantic HTML.</figcaption>
</figure>

Notes and Conclusions about the “<figure>” Semantic HTML Tag:

• The <figure> tag is essential for grouping content like images and providing them with a contextual background through <figcaption>.
• This semantic structure enhances content presentation and improves its accessibility and interpretation by search engines.
• It’s an effective way of integrating media into web content while maintaining a clear and accessible structure.

6. “<footer>” Semantic HTML5 Tag

Function: The <footer> element in HTML is used to define a footer for a document or a section within a document. It typically contains information about the author, related documents, copyright data, contact information, and other relevant details.

Relevance to Other Semantic HTML Tags: The <footer> element is often used in conjunction with <header>, <article>, and <section> tags to provide a structured and semantic layout of the web page. It usually marks the end of an article or a section, clearly indicating the content structure.

Web Accessibility: For accessibility, the <footer> tag helps screen readers and assistive technologies identify the concluding information of a page or section, aiding users in understanding the overall layout and navigation of the content.

“<footer>” Semantic HTML Tag used in the code example is below.

<footer>
    <p>© 2024 John Doe. All rights reserved.</p>
    <nav>
        <ul>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </nav>
</footer>

Notes and Conclusions about the “<footer>” Semantic HTML Tag:

• The <footer> element effectively encapsulates end-of-page or end-of-section content, providing contextual and legal information.
• Integrating a navigation block within the footer using the <nav> tag is a common practice, aiding in site-wide navigation.
• This semantic approach enhances the clarity and accessibility of the web page, ensuring that both users and search engines correctly interpret footer content.

7. “<header>” Semantic HTML5 Tag

Function: The <header> element in HTML signifies introductory content, typically a group of introductory or navigational aids. It may contain heading elements, a logo, a search form, an author name, and other elements intended to introduce the website or the section.

Relevance to Other Semantic HTML Tags: The <header> is often associated with <footer>, <nav>, and <article> elements, providing a clear, semantic beginning to a web page or section within a page.

Web Accessibility: The <header> tag plays a significant role in web accessibility, as it helps users with assistive technologies to understand the structure of a webpage, identifying where the main content begins.

The code Example for “<header> semantic HTML tag is below.

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

Notes and Conclusions about the “<header>” Semantic HTML Tag:

• The “<header>” element is crucial for defining the beginning of a content section or page, often containing navigational links or site identity information.
• Its use in combination with navigational elements (<nav>) enhances the user’s understanding and navigation of the website.
• From an SEO perspective, it helps search engines grasp the structure of a webpage and the importance of the content within the header.

Relevance to Other Semantic HTML Tags: The <main> element works in concert with other structural elements, such as <header>, <footer>, <nav>, and <aside>. It specifically denotes a page’s core topic or message, distinguishing the main content from complementary and ancillary information.

Web Accessibility: For accessibility purposes, the <main> tag is crucial as it allows assistive technologies to identify a page’s core content quickly. This is particularly helpful for users who rely on screen readers, as they can skip directly to the main content without navigating through other repeated elements.

The code Example of <main> HTML semantic tag is below.

<main>
    <article>
        <h1>Main Article Title</h1>
        <p>The main content of the webpage goes here, providing the central topic or information that the page is about.</p>
    </article>
</main>

Notes and Conclusions about the “<main>” Semantic HTML Tag:

• The <main> Element is essential for defining a webpage’s primary focus or content, aiding in content organization and SEO.
• Its proper use helps differentiate the main content from other sections like headers, footers, and navigation bars, enhancing the user experience.
• This tag signals the primary content area for search engines, which can influence content ranking and relevance in search results.

8.”<mark>” Semantic HTML5 Tag

Function: The <mark> element in HTML highlights or marks significant text within a context. It’s often used to draw attention to a part of text for reference or navigation purposes.

Relevance to Other Semantic HTML Tags: While <mark> does not directly relate to other structural-semantic tags, it plays a significant role in enhancing the semantic meaning of the content within those structures, like within an <article> or a <section>.

Web Accessibility: The <mark> tag is beneficial for accessibility as it helps users, including those using screen readers, identify key text parts. This can be particularly useful for emphasizing a document’s search terms or important information.

Code Example:

<p>In the context of web development, <mark>Semantic HTML</mark> is crucial for accessibility and SEO.</p>

Notes and Conclusions about the “<mark>” Semantic HTML Tag:

• The use of <mark> to highlight text adds an extra layer of meaning and emphasis, aiding the reader’s comprehension.
• It is a simple yet effective way to draw attention to specific content parts, enhancing the overall readability and user experience.
• From an SEO perspective, while <mark> does not have a direct impact, it contributes to better user engagement by emphasizing key phrases or terms within the content.

9. “<nav>” Semantic HTML5 Tag

Function: The <nav> element in HTML is designated for navigation links. It’s typically used for major blocks of navigation links such as primary site navigation, a table of contents, or index lists.

Relevance to Other Semantic HTML Tags: <nav> often works in conjunction with <header>, <footer>, and <aside> elements. It is meant to contain major navigational blocks and should not be used for every link group on a page to maintain its semantic importance.

Web Accessibility: The <nav> tag is crucial for accessibility, allowing assistive technologies to identify and provide quick access to navigation links. This is especially helpful for users who rely on screen readers or keyboard navigation, as they can easily locate and navigate through the primary site links.

Code Example:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Notes and Conclusions about the “<nav>” Semantic HTML Tag:

• The <nav> semantic HTML element is essential for defining major web page navigation areas, contributing to a well-structured and semantically meaningful layout.
• Its proper use enhances the user experience by providing clear, accessible navigation paths.
• For search engines, the <nav> element helps in understanding the structure of a website and the relative importance of different pages, aiding in effective indexing and SEO.

10. “<section>” Semantic HTML5 Tag

Function: The <section> element in HTML represents a thematic content grouping, typically with a heading. It divides a page into logically grouped sections of related content.

Relevance to Other Semantic HTML Tags: <section> is often used in combination with <header>, <footer>, and <article> tags. It helps structure the content in a meaningful, organized manner, enhancing the overall coherence of the document.

Web Accessibility: The use of <section> aids in accessibility by providing a clear structure for the content, making it easier for screen readers and other assistive technologies to navigate different content blocks.

Code Example:

<section>
    <h2>Section Title</h2>
    <p>This section contains content related to the above title, grouped thematically to enhance understanding and organization.</p>
</section>

Notes and Conclusions about the “<section>” Semantic HTML Tag:

• The <section> tag is vital for creating a well-structured, logically organized web page.
• It enhances the document’s readability and navigability for users and search engines by clearly demarcating different content areas.
• This semantic division of content is also beneficial for SEO, as it allows search engines to understand better and index the structure and hierarchy of the webpage’s content.

Continuing with the remaining tags in the next response.

11. “<summary>” Semantic HTML5 Tag

Function: The <summary> element in HTML is used as a visible heading for an <details> element. It provides a brief overview or label for the collapsible content defined within <details>. When clicked, it reveals or hides the additional information.

Relevance to Other Semantic HTML Tags: <summary> is specifically designed to work in tandem with the <details> tag, creating an interactive component that enhances user engagement and content organization.

Web Accessibility: The <summary> element improves accessibility by providing a concise, understandable label for expandable content sections. This is particularly helpful for users relying on screen readers, as it allows them to navigate and understand the structure of the content easily.

Code Example:

<details>
    <summary>Click to learn more about Semantic HTML</summary>
    <p>Here is a detailed explanation of Semantic HTML and its importance in web development...</p>
</details>

Notes and Conclusions about the “” Semantic HTML Tag:

• The <summary> tag, in combination with <details>, creates a user-friendly way to manage large amounts of information, making web pages less cluttered and more interactive.
• It enhances user experience by providing a clear, clickable heading for additional content, aiding in navigation and readability.
• While <summary> doesn’t directly impact SEO, its role in improving user engagement and content accessibility can indirectly benefit a website’s search engine performance.

12. “<time>” Semantic HTML5 Tag

Function: The <time> element in HTML represents a specific period in time. This could be a date, time of the day, or duration. The element can include an datetime attribute for machine-readable dates and times.

Relevance to Other Semantic HTML Tags: While <time> is not directly related to structural-semantic tags, it plays a significant role in enhancing the semantic meaning of dates and times within content, such as within an <article> or <footer>.

Web Accessibility: The <time> tag is beneficial for accessibility as it provides a standard format for dates and times, making it easier for screen readers and other assistive technologies to interpret and present this information correctly to users.

Code Example:

<article>
    <h1>Event Announcement</h1>
    <p>The event will take place on <time datetime="2024-08-24">August 24th, 2024</time>.</p>
</article>

Notes and Conclusions about the “” Semantic HTML Tag:

• The <time> element helps convey clear and standardized time-related information, crucial for events, deadlines, and historical references.
• It aids in SEO by providing search engines with precise and structured data about times and dates, which can be used for rich snippets and accurate indexing.
• Its use enhances the readability and comprehensibility of time-sensitive information for users and search engines.

These tags collectively contribute to a more semantically rich and accessible web, aligning with the principles of good web design and SEO practices.

To learn more about HTML Tags, read the detailed tags, attributes guide.

• Author
• Recent Posts

Koray Tuğberk GÜBÜR

Owner and Founder at Holistic SEO & Digital

Koray Tuğberk GÜBÜR is the CEO and Founder of Holistic SEO & Digital where he provides SEO Consultancy, Web Development, Data Science, Web Design, and Search Engine Optimization services with strategic leadership for the agency’s SEO Client Projects. Koray Tuğberk GÜBÜR performs SEO A/B Tests regularly to understand the Google, Microsoft Bing, and Yandex like search engines’ algorithms, and internal agenda. Koray uses Data Science to understand the custom click curves and baby search engine algorithms’ decision trees. Tuğberk used many websites for writing different SEO Case Studies. He published more than 10 SEO Case Studies with 20+ websites to explain the search engines. Koray Tuğberk started his SEO Career in 2015 in the casino industry and moved into the white-hat SEO industry. Koray worked with more than 700 companies for their SEO Projects since 2015. Koray used SEO to improve the user experience, and conversion rate along with brand awareness of the online businesses from different verticals such as retail, e-commerce, affiliate, and b2b, or b2c websites. He enjoys examining websites, algorithms, and search engines.

Latest posts by Koray Tuğberk GÜBÜR (see all)

• Sliding Window - August 12, 2024
• B2P Marketing: How it Works, Benefits, and Strategies - April 26, 2024
• SEO for Casino Websites: A SEO Case Study for the Bet and Gamble Industry - February 5, 2024