HTML Semantic Elements - HTML Tutorial

Semantic elements in HTML provide meaning and structure to the content. They enhance the accessibility and search engine optimization (SEO) of a webpage by clearly defining different sections and their roles within the document.

HTML Semantic Elements Syntax

Common Semantic Elements:

<header>: Defines the header section of the document or a section.
<nav>: Represents a section of navigation links.
<article>: Defines a self-contained piece of content, like a news article.
<aside>: Contains content that is related to the main content but not essential.
<footer>: Marks the footer of the document or section.

<header>This is a header section.</header>
<nav>This is a navigation section.</nav>
<article>This is an article.</article>
<aside>This is an aside section.</aside>
<footer>This is a footer section.</footer>

HTML
​x
 
<header>This is a header section.</header><nav>This is a navigation section.</nav><article>This is an article.</article><aside>This is an aside section.</aside><footer>This is a footer section.</footer>

HTML Semantic Elements Example Code

Explanation of Code:

In this example, we utilize various semantic elements to create a structured webpage. The <header> contains a title and introductory text, providing context for the page.
The <nav> section includes a list of links, guiding users through the site.
The <article> tag contains the main content of the page, making it clear where the primary information is located.
The <aside> provides additional information that complements the article but isn’t critical to its understanding.
Finally, the <footer> wraps up the page with copyright details, indicating ownership.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Semantic Elements</title>
</head>
<body>
    <header>
        <h1>My Website Header</h1>
    </header>
    
    <nav>
        <p><a href="#home">Home</a> | <a href="#about">About</a> | <a href="#contact">Contact</a></p>
    </nav>
    
    <article>
        <h2>Main Article</h2>
        <p>This is where the main content of the page goes.</p>
    </article>
    
    <aside>
        <p>Additional information or links related to the article.</p>
    </aside>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

HTML
 
<!DOCTYPE html><html><head>    <title>Simple Semantic Elements</title></head><body>    <header>        <h1>My Website Header</h1>    </header>        <nav>        <p><a href="#home">Home</a> | <a href="#about">About</a> | <a href="#contact">Contact</a></p>    </nav>        <article>        <h2>Main Article</h2>        <p>This is where the main content of the page goes.</p>    </article>        <aside>        <p>Additional information or links related to the article.</p>    </aside>        <footer>        <p>&copy; 2024 My Website</p>    </footer></body></html>

HTML Semantic Elements Syntax

HTML Semantic Elements Example Code

HTML Labs