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

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>

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>

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>

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>

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>

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>

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>

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>

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

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.
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.
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.
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.
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)

Jon Randy 🎖️ • Nov 28 '23

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.