HTML Semantic Elements

HTML semantic elements are special elements introduced in HTML5 that provide meaningful structure to web pages.

Here are some commonly used HTML semantic elements:

<header> – Container for a group of introductory content at the top of a section.
<nav> – Used for the navigation section.
<main> – Specifies the main content of a document and it is unique.
<table> – Used to create tables.
<form> – Used to create forms.
<article> – Defines independent, self-contained content. Used for blogs, news articles, etc.
<section> – Defines a standalone section of content within a document.
<aside> – Used for sidebar content.
<footer> – Used to create a footer.

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

#header-section {
            background: #004aad;
            color: white;
            padding: 20px;
            text-align: center;
        }
  #nav-section {
            background: #002252;
            padding: 10px;
            text-align: center;
        }
#nav-section a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-size: 18px;
        }
 #main-section {
            max-width: 900px;
            margin: 20px auto;
            background: #eea731;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
 #main-section h1 {
            text-align: center;
            color: white;
        }
 #about-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #eef;
            border-left: 5px solid #004aad;
            border-radius: 5px;
        }
   #article-section {
            background: #fff;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
   #aside-section {
            background: #f8f9fa;
            padding: 15px;
            border-left: 3px solid #004aad;
            border-radius: 5px;
        }
               #team-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #eef;
            border-left: 5px solid #004aad;
            border-radius: 5px;
        }
#team-section table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

#team-section table, #team-section th, #team-section td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

#team-section th {
            background: #004aad;
            color: white;
        }
                #contact-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #eef;
            border-left: 5px solid #004aad;
            border-radius: 5px;
        }
        #contact-section form {
            margin-top: 20px;
        }

#contact-section input,
        #contact-section select,
        #contact-section textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

#contact-section input[type="submit"] {
            background: #004aad;
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px;
            font-size: 16px;
        }

#contact-section input[type="submit"]:hover {
            background: #002252;
        }
  #footer-section {
            background: #333;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
            border-top: 5px solid #004aad;
        }
        .submit-btn-form{
          padding: 5px 10px;
        }
    </style>
  </head>
    
     <header id="header-section">
        <h2>Header Section</h2>
    </header>

<nav id="nav-section">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>

<main id="main-section">
        <h1>Main Section</h1>

<section id="about-section">
            <h2>About Us</h2>
            <p>This is a brief introduction about our website. It contains different sections using semantic HTML.</p>
        </section>

<article id="article-section">
            <h3>Latest News (Article Section)</h3>
            <p>This is an example of an article. Articles are independent, self-contained content such as blog posts.</p>
        </article>

<aside id="aside-section">
            <h3>Side Content (Aside Section)</h3>
            <p>This is an aside section, typically used for related information, ads, or links.</p>
        </aside>

<section id="team-section">
            <h2>Our Team</h2>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Contact</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>Web Developer</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Jane Smith</td>
                        <td>Designer</td>
                        <td>jane@example.com</td>
                    </tr>
                </tbody>
            </table>
        </section>

<section id="contact-section">
        <h2>Contact Us</h2>
           <form>
            <div class="input-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>

</form>
        <button class="submit-btn-form">Submit</button>
        </section>

</main>

Important Note: Want to download the full HTML course as a PDF? Click here to save it locally!

PREVIOUS NEXT

HTML Semantic Elements

Here are some commonly used HTML semantic elements:

HTML Code

Output

Leave a Comment Cancel reply