Semantic and Non Semantic Elements in HTML

What are Semantic Elements in HTML?

  • The elements in HTML which define their meaning are semantic elements.

  • And also these elements describe their content.

Semantic Elements

i). form: Used to take the data from the user to process on the server.

<form action="">...</form>

ii). table: Used to represent the data in tabular form.


iii). article: Used to contain, blog posts, articles, comments, etc.


iv). header: It is used to create the header part on the web page.


v). nav: It is used to create a navigation bar. And it contains many navigation links.


vi). mainThis specifies the main content on the web page.


vii). footerUsed to create the footer of the web page.


viii). sectionIt is used to create section on the web page.


ix). detailsIt is used to define additional details that a user can view or hide


x). asideIt is used to create a sidebar on the webpage.


What are Non-Semantic Elements in HTML?

  • The elements in HTML which don't represent any meaning.

  • And these elements don't describe anything about their content.

Non-Semantic Elements:

i). div: It is used to create the division of content on the web pages.


ii). span: It is used to mark up a part of the text.


Code Described in the video

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Semantic and Non-Semantic HTML Elements </title>
    <!-- Semantic Elements in HTML -->
    <!-- Navbar -->
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
    <!-- Section -->
    <section> This is used to create section </section>

    <!-- Aside -->
    <aside> This is used to create sidebar</aside>

    <!-- Table -->
    <table> This is used to create tables in HTML </table>

    <!-- Non-Semantic Elements in HTML -->
    <!-- Division tag -->
    <!-- span tag -->

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="color:red;">Neque aperiam</span> tempore sint eaque maxime, commodi magnam, alias nam quia soluta quisquam nihil nesciunt reiciendis voluptatum facere omnis odio laborum esse necessitatibus ut beatae incidunt est perspiciatis laudantium. Voluptatum, nostrum temporibus!</p>

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section