PrevNext

SEMANTIC TAGS

HTML5 introduced a range of semantic tags that provide meaning to the structure of web content. This blog will guide you through the importance and usage of these tags.

Why to use Semantic Tags?

Semantic tags in HTML are elements that carry meaning about the structure and content of a webpage. They provide a way to convey the intended meaning of different parts of the document, making the HTML code more readable, maintainable, and accessible.

  • They enhance SEO, improve accessibility, and make your code easier to read and maintain.

Commonly Used Semantic Tags

Here are some commonly used semantic tags in HTML:

  • header: Contains introductory content.
  • footer: Holds footer information.
  • article: Encapsulates a self-contained composition.
  • section: Represents a standalone section.
  • aside: Contains content aside from the content it is placed in.
  • nav: Holds navigation links.

For Example

app/index.html
1<body>
2    <header>
3        <h1>Page Title</h1>
4        <nav>
5            <ul>
6                <li><a href="#">Home</a></li>
7                <li><a href="#">About</a></li>
8                <li><a href="#">Contact</a></li>
9            </ul>
10        </nav>
11    </header>
12
13    <main>
14        <section>
15            <h2>Section Title</h2>
16            <p>This is some content within a section.</p>
17        </section>
18
19        <article>
20            <h3>Article Title</h3>
21            <p>This is a self-contained article with some content.</p>
22        </article>
23
24        <aside>
25            <h2>Aside Section</h2>
26            <p>This content is related but tangentially to the main content.</p>
27        </aside>
28    </main>
29
30    <footer>
31        <p>&copy; 2024 Small Semantic Example</p>
32    </footer>
33
34</body>

Conclusion

Using HTML's semantic tags can greatly benefit both your website's SEO and the maintainability of your code. They offer a way to structure your HTML in a meaningful manner, making your website more accessible and easier to understand.

PrevNext