DEV Community

Ranjith srt
Ranjith srt

Posted on

MERN - Html (Day 6)

Image description

Image description

Image description

Image description

HTML Semantic Tags | Intro

What are Semantic Tags?

Semantic tags in HTML give meaning to the content they wrap. Instead of using generic <div> and <span>, semantic tags help structure the webpage properly, making it easier for browsers, developers, and search engines to understand.

For example, instead of writing:

<div id="header">My Website</div>
Enter fullscreen mode Exit fullscreen mode

We use:

<header>My Website</header>
Enter fullscreen mode Exit fullscreen mode

This improves accessibility, SEO, and code readability.

1. Structural Semantic Tags

These tags define the layout of a webpage.

Tag Meaning
<header> Represents the header section of a webpage or section.
<nav> Contains navigation links (menus, site links).
<main> Defines the main content of the webpage.
<article> Represents independent content (blog post, news).
<section> Groups related content together.
<aside> Holds side content like ads, links, or extra info.
<footer> Defines the footer of a page or section.

Example: Basic Structure of a Webpage

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>

    <nav>
        <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
    </nav>

    <main>
        <section>
            <article>
                <h2>Blog Post</h2>
                <p>This is an article about semantic tags.</p>
            </article>
        </section>

        <aside>
            <h3>Related Links</h3>
            <p>More articles on HTML.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. Text-Level Semantic Tags

These tags are used to enhance text meaning and improve readability.

Tag Meaning Example
<h1> to <h6> Headings from largest to smallest. <h1>Main Title</h1>
<p> Defines a paragraph. <p>This is a paragraph.</p>
<blockquote> A long quote from another source. <blockquote>Famous quote...</blockquote>
<cite> Specifies the source of a quote. <cite>Book Name</cite>
<q> Short inline quote. <q>Inline quote.</q>
<time> Represents a date or time. <time datetime="2025-06-15">June 15, 2025</time>

Example: Using Text-Level Tags

<article>
    <h2>HTML Semantic Tags</h2>
    <p>Semantic tags improve website structure and SEO.</p>

    <blockquote>
        "Semantic HTML is important for accessibility."
    </blockquote>

    <p>As <cite>Tim Berners-Lee</cite> said, <q>The web is for everyone.</q></p>

    <p>Published on <time datetime="2025-06-15">June 15, 2025</time>.</p>
</article>
Enter fullscreen mode Exit fullscreen mode

3. Grouping & Media Semantic Tags

These tags help organize content & multimedia elements.

Tag Meaning Example
<div> A generic container for grouping elements. <div class="box">Content</div>
<span> Used for styling inline text. <span style="color:red;">Important</span>
<figure> Groups an image with a caption. <figure><img src="pic.jpg"></figure>
<figcaption> Caption for an image inside <figure>. <figcaption>Image Caption</figcaption>

Example: Using Grouping & Media Tags

<figure>
    <img src="image.jpg" alt="Sample Image" width="300">
    <figcaption>This is a descriptive caption.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

4. List Semantic Tags

Lists help organize content efficiently.

Tag Meaning Example
<ul> Defines an unordered list (bullets). <ul><li>Item</li></ul>
<ol> Defines an ordered list (numbers). <ol><li>First</li></ol>
<li> List item inside <ul> or <ol>. <li>Item</li>
<dl> Defines a description list. <dl><dt>Term</dt><dd>Definition</dd></dl>
<dt> Term inside a description list. <dt>HTML</dt>
<dd> Description inside a description list. <dd>Hypertext Markup Language</dd>

Example: Using List Tags

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

5. Form Semantic Tags

These tags improve form accessibility and usability.

Tag Meaning Example
<form> Defines an input form. <form>...</form>
<label> Labels an input field. <label for="name">Name:</label>
<input> Defines an input field. <input type="text">
<textarea> Multi-line text input. <textarea></textarea>
<button> Defines a clickable button. <button>Submit</button>

Example: Using Form Tags

<form>
    <label for="name">Name:</label>
    <input type="text" id="name">

    <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Top comments (0)