EDUCATION
Quick Recap Examples Quiz Compiler

HTML Semantic

meaningful structure and organization of content on a webpage using HTML elements to convey the intended meaning of the information.
By using semantic elements, developers can create more accessible, SEO-friendly, and maintainable web pages.

<header> Element

Represents the introductory content for a section or page. Typically includes a logo, navigation menu, or heading.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>header Element Example</title>
    </head>
    <body>
        <header>
            <h1>Welcome to Our Website</h1>
            <nav><a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a></nav>
        </header>
        <h1>Heading</h1>
        <p>Paragraph</p>
    </body>
</html>
Run

<nav> Element

Represents a section of navigation links.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>nav Element Example</title>
    </head>
    <body>
        <header>
            <h1>Welcome to Our Website</h1>
            <nav><a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a></nav>
        </header>
        <h1>Heading</h1>
        <p>Paragraph</p>
    </body>
</html>
Run

<main> Element

Represents the main content of the document, excluding headers, footers, and sidebars.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>main Element Example</title>
    </head>
    <body>
        <main>
            <article>
                <h2>Article Title</h2>
                <p>Article content goes here.</p>
            </article>
        </main>
    </body>
</html>
Run

<article> Element

Represents a self-contained piece of content that can be distributed and reused independently, such as a blog post or news article.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>article Element Example</title>
    </head>
    <body>
        <main>
            <article>
                <h2>Article Title</h2>
                <p>Article content goes here.</p>
            </article>
        </main>
    </body>
</html>
Run

<section> Element

Represents a thematic grouping of content within a document.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>section Element Example</title>
    </head>
    <body>
        <section>
            <h2>Section Heading</h2>
            <p>Section content goes here.</p>
        </section>
    </body>
</html>
Run

<aside> Element

Represents content that is tangentially related to the content around it, like sidebars or callout boxes.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>aside Element Example</title>
    </head>
    <body>
        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="/related1">Related Page 1</a></li>
                <li><a href="/related2">Related Page 2</a></li>
            </ul>
        </aside>
    </body>
</html>
Run

<footer> Element

Represents the footer of a section or a page, typically containing metadata, copyright information, and contact details.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>footer Element Example</title>
    </head>
    <body>
        <footer>
            <p>&copy; 2023 My Website. All rights reserved.</p>
            <p>Contact: [email protected]</p>
        </footer>
    </body>
</html>
Run

<figure> and <figcaption> Elements

<figure> represents any content that is referenced from the main content, typically used for images, illustrations, diagrams, videos, etc.
The description or caption for the <figure> is provided using the <figcaption> element.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>figure and figcaption Element Example</title>
    </head>
    <body>
        <figure>
            <img src="example.jpg" alt="An example image" />
            <figcaption>Example image description.</figcaption>
        </figure>
    </body>
</html>
Run

<time> Element

Represents a specific time or a range of time.
It can be used for dates, times, or both together, with optional machine-readable datetime attributes.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Time Element Example</title>
    </head>
    <body>
        <h1>Time Element Example</h1>
        <p>The event will take place on <time datetime="2023-08-15 18:00">August 15th, 2023, at 6:00 PM</time>.</p>
    </body>
</html>
Run

<details> and <summary> Elements

<details> represents a disclosure widget from which the user can obtain additional information or controls.
The summary of what is contained within the <details> element is provided using the <summary> element.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Details and summary Element Example</title>
    </head>
    <body>
        <h1>Details and summary Element Example</h1>
        <details>
            <summary>Show more information</summary>
            <p>Additional details go here.</p>
        </details>
    </body>
</html>
Run

Quick Recap - Topics Covered

Element

Description

Example

<header>

Represents the introductory content for a section or page

Run

<nav>

Represents a section of navigation links

Run

<main>

Represents the main content of the document, excluding headers, footers, and sidebars

Run

<article>

Represents a self-contained piece of content that can be distributed and reused independently

Run

<section>

Represents a thematic grouping of content within a document

Run

<aside>

Represents content that is tangentially related to the content around it

Run

<footer>

Represents the footer of a section or a page, typically containing metadata, copyright information, and contact details

Run

<figure> and <figcaption>

Represents content referenced from the main content, with a description or caption

Run

<time>

Represents a specific time or a range of time

Run

<details> and <summary>

Represents a disclosure widget with additional information or controls

Run

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example 1
Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK