HTML Semantic and Non-Semantic Elements

HTML provides a wide range of tags to structure web pages. These tags can be divided into two categories, namely semantic and non-semantic elements. Semantic elements give meaning to the content they wrap, while non-semantic elements are simply used for layout and presentation purposes.

HTML Semantic Elements

The following are some examples of semantic elements in HTML5:

  1. <header> - This tag represents the header of a page or section. It typically contains the site logo, navigation menu, and other introductory information.

  2. <nav> - This tag is used to define a set of navigation links for a web page. It can be placed within the header, footer, or any section of the web page.

  3. <main> - This tag represents the main content of the web page, and it should only appear once on each page.

  4. <section> - This tag is used to group related content together, such as blog posts or news articles.

  5. <article> - This tag is used to represent a self-contained piece of content, such as a blog post, news article, or product review.

  6. <aside> - This tag represents content that is related to the main content of the page, but not essential to understanding the main content.

  7. <footer> - This tag represents the footer of a page or section. It typically contains copyright information, contact details, and other supplementary information.

HTML Non-Semantic Elements

The following are some examples of non-semantic elements in HTML:

  1. <div> - This tag is used for grouping content together, and for applying styles to groups of elements.

  2. <span> - This tag is used to apply styles to specific sections of text or content.

  3. <table> - This tag is used to create tables of data, but it does not provide any meaning to the content it wraps.

  4. <br> - This tag is used to create line breaks, and it does not provide any meaning to the content it wraps.

Example

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Example of HTML Semantic and Non-Semantic Elements</title>
5  </head>
6  <body>
7    <header>
8      <h1>My Website</h1>
9      <nav>
10        <ul>
11          <li><a href="#">Home</a></li>
12          <li><a href="#">About</a></li>
13          <li><a href="#">Contact</a></li>
14        </ul>
15      </nav>
16    </header>
17    <main>
18      <section>
19        <h2>Latest News</h2>
20        <article>
21          <h3>Article Title</h3>
22          <p>Article content goes here.</p>
23        </article>
24        <article>
25          <h3>Another Article Title</h3>
26          <p>More article content goes here.</p>
27        </article>
28      </section>
29      <aside>
30        <h3>Related Content</h3>
31        <ul>
32          <li><a href="#">Related Link 1</a></li>
33          <li><a href="#">Related Link 2</a></li>
34          <li><a href="#">Related Link 3</a></li>
35        </ul>
36      </aside>
37    </main>
38    <footer>
39      <p>&copy; 2025 My Website. All Rights Reserved.</p>
40      <p>Contact: info@mywebsite.com</p>
41    </footer>
42  </body>
43</html>