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.

<table>...</table>


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

<article>...</article>


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

<header>...</header>


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

<nav>...</nav>


vi). main: This specifies the main content on the web page.

<main>...</main>


vii). footer: Used to create the footer of the web page.

<footer>...</footer>


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

<section>...</section>


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

<details>...</details>


x). aside: It is used to create a sidebar on the webpage.

<aside>...</aside>


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.

<div>...</div>


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

<span>...</span>


Code Described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Semantic and Non-Semantic HTML Elements </title>
</head>
<body>
    <!-- Semantic Elements in HTML -->
    <!-- Navbar -->
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!-- 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 -->
    <div></div>
    <!-- span tag -->
    <span></span>

    <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>
</body>
</html>

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section