DEV Community

Cover image for Understanding Semantics html
Henrietta Okechukwu O (Hariet)
Henrietta Okechukwu O (Hariet)

Posted on • Updated on

Understanding Semantics html

Power of Semantics html

When it comes to making information easy to understand for everyone, it's important to use semantic HTML. Semantic HTML uses tags that accurately represent the meaning of content, making it easier for screen readers and search engines to understand. This approach helps structure web content effectively.

While divs with ids are still used for different purposes, relying solely on them for styling can result in unstructured and difficult-to-read code.

Semantic HTML provides a more modern approach by using elements that accurately represent the meaning of content, making it easier for everyone to understand.

What is Semantic HTML

When we talk about semantics, we're referring to the meaning of a word or phrase. In the context of HTML, the term 'semantic' refers to a coding technique that uses elements to clearly define the structure and purpose of a web page. This helps to improve both accessibility and SEO by making it easier for screen readers and search engines to understand and index the content.

Examples of some Semantics HTML element

Element Name Purpose Positioning Content
<header> describe the header of webpage or section top of the page but can be elsewhere logo, search form, nav links etc
<nav> Define navigation menu Header of page List of links for page navigation
<main> Define main content of webpage Body of Page Text, images, tables, videos, forms
<section> Define distinct sections of content body of page Text, images, videos, or other elements that form a coherent section
<aside> Define supplementary information that is related to the main content but not part of it Great! Just to recap, the It can be placed on the left, right, top, or bottom of the page or within the margin but should not replace navigation links Text, images, videos, or other elements that form a related but separate piece of information
<article> Define independent piece of content that could stand on its own body of page Text, images, videos, or other elements that comprise a self-contained article
<details> Define additional information to a section of content Within a section or article Text, images, or other content that is shown when a user clicks to "open" the details
<Mark> Define emphasized text within a section within a section or article Text that is emphasized with styling, such as bold or italics, to draw the user's attention
<figure> Define an image, video, or other media content in a section or article within a section or article Image, video, or other media content with an optional caption
<figcaption> Define a caption for a figure Within a element, as a child element Text describing the image, video, or other media content in a figure
<summary> Define a summary of a details element Within a element, as a child elements Text summarizing the contents of a details element when it is collapsed
<time> Define a date and/or time in a machine-readable format Anywhere within the document A valid date and/or time, in a machine-readable format
<footer> Define website information and resources Bottom of page, but can be elsewhere Company name, copyright information, contact details etc

Example of html Semantic syntax

Example of html semantic syntax

Nb: This is just an example, you can decide to structure it anyway you prefer.

Codes illustrating html semantics.

  • <header> <nav>
<header> 
 <nav>    
 <ul>    
  <li><a href="#">Home</a></li>    
  <li><a href="#">About</a></li>    
  <li><a href="#">Services</a>.  
</li>     
 <li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Enter fullscreen mode Exit fullscreen mode

In the example above, the <header> element is used to define the header section of a webpage, while the <nav> element represents the navigation menu.

  • <main> <article> <section> <aside>
<main>
    <section>
      <h2>About Us</h2>
      <article>
        <h3>Our Story</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere neque in tortor varius, eget pellentesque risus pretium.</p>
      </article>
      <article>
        <h3>Our Team</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere neque in tortor varius, eget pellentesque risus pretium.</p>
      </article>
    </section>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">Partners</a></li>
        <li><a href="#">Events</a></li>
      </ul>
    </aside>
  </main>
Enter fullscreen mode Exit fullscreen mode

The <main> tag contains the main content of the webpage, including <section> elements that represent different sections such as "About Us".
Each section contain multiple <article> elements for specific content with respective headings <h2> and <h3> and paragraphs <p>.

The <aside> element represents a section that contains content tangentially related to the main content. In this example, it contains related links.

  • <footer>
<footer>
    <p>&copy; 2022 Company Name. All rights reserved.</p>
  </footer>
Enter fullscreen mode Exit fullscreen mode

This code defines a footer section with two paragraphs, one with copyright information and the other with a credit to Codeme Inc.

  • <details>
<details>
    <summary>Additional Information</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere neque in tortor varius, eget pellentesque risus pretium.</p>
  </details>
Enter fullscreen mode Exit fullscreen mode

The <details> element is used to hide additional information until the user clicks on the <summary>element.
This is helpful for providing more information about something without cluttering the page.

The details are only shown when the user is interested in seeing them.

In the example code, the details are hidden by default, and can be revealed by clicking on the summary text.

  • <mark>
  <mark>This sentence is highlighted for emphasis.</mark>
Enter fullscreen mode Exit fullscreen mode

In this example, <mark> is used to highlight the content inside it to make it more noticeable.
This can be helpful for emphasizing specific information or keywords.

  • <figure>
<figure>
    <img src="https://example.com/image.jpg">
    <figcaption>A picture of a cat.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

This code would display an image of a cat, with the caption "A picture of a cat" below it.

  • <time>
<time datetime="2023-01-01">January 1, 2023</time>
Enter fullscreen mode Exit fullscreen mode

In this example, the text "January 1, 2023" is wrapped in a <time>element, which makes it a machine-readable date.

Another way to use the <time> element is to create a link to a specific date and time on a calendar, like this:

<p>Let's meet on <time datetime="2023-01-15T18:00">January 15th at 6pm</time>.</p>
Enter fullscreen mode Exit fullscreen mode

This code would create a link to the date and time specified, making it easy for users to add the event to their calendar.

Why HTML semantics should be used

  1. Accessibility

    Semantic HTML ensures that websites are accessible to all users, including those with disabilities or using assistive technologies.

    By using semantic elements, developers can create pages that are more likely to be correctly interpreted by search engines, making the content easier to find. In addition, using meaningful HTML tags can help with content management, allowing for more efficient editing and updating of a website.

  2. SEO Benefits

    Search engines are designed to analyze and organize content based on its semantic meaning.

    By using HTML tags that convey the meaning and structure of the content, websites can improve their search engine optimization (SEO) and gain a competitive advantage in the search results.
    Semantic HTML provides a set of tags that are specifically designed to convey the meaning and structure of the content, allowing search engines to understand and index the content more effectively.
    This boosts visibility and search rankings.

  3. Code Maintainability

    The use of semantic HTML makes it easier to maintain and update code.

    The tags are self-explanatory and follow a logical structure, making it easy to find and fix errors.

    Additionally, it allows developers to update and modify the code without breaking the existing structure and functionality. This means that websites built with semantic HTML are easier to scale and adapt as content and requirements change.

  4. Cross-Device and Cross-Browser Compatibility

    Semantic HTML promotes consistent user experiences across different devices and browsers. It ensures that the structure and formatting of a webpage remain intact and responsive regardless of the device or browser being used.
    This results in a more user-friendly and accessible experience for all users, regardless of their device or browser of choice.

  5. Future-Proofing

    Semantic HTML allows developers to create websites that are future-proofed against changes in technologies and design trends. Because the content is represented by tags that describe its purpose rather than its presentation, the code remains adaptable and flexible as new technologies emerge. This provides a long-term solution for maintaining and updating websites, saving time and resources in the future.

Conclusion

Incorporating semantic HTML elements into our web pages can have numerous benefits.

It improves accessibility for assistive technologies and search engines, making it easier for them to understand and navigate the content.

Semantic HTML is essential for web developers as it enhances accessibility, improves search engine visibility, simplifies website maintenance and scalability, ensures compatibility, and future-proofs websites.

It also promotes best practices, enhances user experience, and provides a solid foundation for successful web development projects.

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

HTML by it's very nature has always been semantic. That is the whole point of HTML - to add some meaning and context to plain text. Sure, some HTML tags have no real semantic meaning at all (span and div being the most obvious examples), but most of them do. The examples you give in the table are the most recent additions (added in HTML5), but tags like a, p, img, ul, ol, li, table, and almost any other tag you can think of are also semantic.

Collapse
 
henrietta_hariet profile image
Henrietta Okechukwu O (Hariet)

Thank you for your comment Jon, you are right that's why I focused more on newer semantics added in HTML 5.

Collapse
 
evadon profile image
Chinwendu Evans

Each time I read your blog post, it opens my eyes to something new. Thanks for putting out these articles here

Collapse
 
henrietta_hariet profile image
Henrietta Okechukwu O (Hariet)

Thank you so much Evans, I am glad you got value.