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 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