Sage-Code Laboratory
index<--

Semantic HTML

Semantic HTML refers to the practice of using specific HTML elements to convey the meaning and structure of web content. It was introduced in HTML5 and is an important feature of modern design.
Responsive Image

HTML4 vs HTML5

Using semantic HTML elements makes your code more readable and accessible for both people and machines. It also helps search engines to understand your content and improves your website's SEO. Next table include all new tags with description.Most of these new tags are block elements, some are inline elements.

Tag Name Description
section A thematic grouping of content, typically with a heading.
article An independent piece of content that can be distributed and reused separately from the rest of the page.
nav A section of the page that contains navigation links, such as menus and site maps.
aside A section of the page that contains content that is related to the main content, but not the primary focus.
header The top of a section or page, typically containing a logo, navigation links, and a heading.
footer The bottom of a section or page, typically containing copyright information, legal notes, and a link to the site's home page.
main The main content of a page.
figure A self-contained piece of content, such as an image or video, along with a caption.
figcaption The caption for a
element.
time A date or time value, which can be formatted and styled using CSS.
mark A piece of highlighted text.
progress A progress bar or indicator that shows the completion status of a task or process.
meter A gauge that shows a measurement value within a known range.
details A disclosure widget that can show or hide additional information when clicked.
summary The summary or label for a <details> element.

Example

This example show a typical website page that use semantic HTML tags.


<!DOCTYPE html>
<html>
  <head>
    <title>Example of Semantic HTML with Navigation Menu</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>This is the main content of the page</h2>
        <p>This is some text that is part of the main content of the page.</p>
      </section>
    </main>
    <footer>
      <p>Copyright © 2023 My Website</p>
    </footer>
  </body>
</html>

Creating CSS

To create CSS for semantic HTML, we can use the semantic HTML elements to target our CSS styles. For example, we can use the `nav` element to target the navigation bar, and the `section` element to target the main content of the page.

Example

Here is an example of CSS that we can use to style the semantic HTML example: 


/* Header and Footer */

header {
  background-color: #f9f9f9;
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
  
/* Navigation Bar */
  
nav {
  background-color: #333;
  color: white;
  padding: 10px;
  border-radius: 5px;
}
  
/* Section */
  
section {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
  
/* Headings */
  
h1 {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0;
}

/* Paragraphs */
  
p {
  font-size: 1.5em;
  line-height: 1.5;
}

This CSS will style the navigation bar with a black background and white text, and the main content of the page with a white background and 20px of padding.

Conclusion

HTML5 has introduced semantic HTML to make web pages more accessible and easier to understand for both humans and machines. Semantic HTML uses elements that have a specific meaning. This makes it easier for search engines to index web pages and for screen readers to read web pages to people with visual impairments.

Advantages

Here are some of the advantages of semantic HTML over HTML4:

Drawbacks

While semantic HTML has many advantages, there are also some criticisms and drawbacks to consider.

Overall, semantic HTML is a valuable tool for web developers, but it is important to be aware of the potential criticisms and drawbacks before using it.

Read next: Learn CSS