#Semantic HTML Tags

HTML5 introduced many semantic tags that better express the structure and meaning of web pages. These tags improve search engine optimization (SEO), help assistive technologies (like screen readers) understand content structure, and make code more readable and maintainable.


     <header> 
     <nav>  
     
        <main> 
        
            
                <article> 
                
                    <section> 
                
            
            
                <aside> 
            
        
    
     <footer>

HTML doesn't handle layout - semantic tags only convey meaning. For example, <nav> indicates navigation and <article> indicates article content.
The actual layout is determined by styling. Learn more in the Styling section and CSS Tutorial.

Example:

Primers Programming Companion

    
         Primers Programming Companion 
    

    
        Python
        HTML
    
    
    
        
        
            
                Document Structure
                Elements and Attributes
                Semantic Tags
            
        

        
            
                HTML5 introduced many semantic tags that better express the structure and meaning of web pages. These tags improve search engine optimization (SEO), help assistive technologies (like screen readers) understand content structure, and make code more readable and maintainable.
            
        
    

    
        Copyright © 2025 Plan C All Rights Reserved.
        Powered by primers

This example uses many tags and attributes that haven't been covered yet - it's just for demonstration.

<!DOCTYPE html>
<html>
    <head>
        <title>Primers Programming Companion</title>
    </head>
    <body style="display:flex; flex-direction:column;">
        <header style="border:1px solid #39c5bb">
            <h1> Primers Programming Companion </h1>
        </header>

        <nav style="border:1px solid #39c5bb">
            <a href="/primers/document/en/02.Python">Python</a>
            <a href="/primers/document/en/03.HTML">HTML</a>
        </nav>
        
        <main style="display:flex;">
            
            <aside style="border:1px solid #39c5bb">
                <ul>
                    <li><a href="/primers/document/en/03.HTML/01.Basics/00.Document%20Structure.md">Document Structure</a></li>
                    <li><a href="/primers/document/en/03.HTML/01.Basics/01.Elements%20and%20Attributes.md">Elements and Attributes</a></li>
                    <li><a href="/primers/document/en/03.HTML/01.Basics/02.Semantic%20Tags.md">Semantic Tags</a></li>
                </ul>
            </aside>

            <article style="flex:1; border:1px solid #39c5bb">
                <section style="border:1px solid #39c5bb">
                    HTML5 introduced many semantic tags that better express the structure and meaning of web pages. These tags improve search engine optimization (SEO), help assistive technologies (like screen readers) understand content structure, and make code more readable and maintainable.
                </section>
            </article>
        </main>

        <footer style="border:1px solid #39c5bb">
            Copyright © 2025 <a href="https://xplanc.org/">Plan C</a> All Rights Reserved.
            Powered by <a href="https://github.com/hubenchang0515/primers">primers</a>
        </footer>
    </body>
</html>

Created in 5/16/2025

Updated in 6/6/2025

HTML / Basic / Table

HTML / Basic / Demo