Semantic Element & Non-Semantic Elements

 

Semantic HTML5 Elements

• 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="">

    Name: <input type="text" name="name" id=""> <br>

    Last Name: <input type="text" name="lastName" id=""> <br>

    <input type="submit" value="Submit">

</form>

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

<table>

    <tr>

        <th> Name </th>

        <th> Role </th>

    </tr>

    <tr>

        <td> Naveen </td>

        <td> Developer </td>

    </tr>

    <tr>

        <td> naveen </td>

        <td> Youtuber </td>

    </tr>

</table>

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

<article>

    <h3> HTML Simplified Series</h3>

    <p> I covered most of the topics of HTML to learn </p>

</article>

<article>

    <h3> CSS Master</h3>

    <p> I covered most of the basic concepts of CSS.</p>

</article>

<article>

    <h3> JavaScript Doctory Series </h3>

    <p> I covered most of the basic concepts to learn JavaScript </p>

</article>

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

<header>

    <h1> HTML Simplified Series </h1>

    <p> I covered most of the topics of HTML to learn </p>

</header>

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

<nav>

    <a href="https://html.com/"> HTML </a>

    <a href="https://css-tricks.com"> CSS </a>

    <a href="https://javascript.info"> JavaScript </a>

</nav>

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

<main>

    <h3> HTML Simplified Series</h3>

    <p> I covered most of the topics of HTML to learn</p>

</main>

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

<footer>

    <p> @ Copyright All rights resered - dev junction point</p>

</footer>

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

<section>

    <h3> Section 1 </h3>

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sapiente odit mollitia laborum consectetur quisquam totam perferendis, similique dolorum quos! </p>

</section>

<section>

    <h3> Section 2 </h3>

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sapiente odit mollitia laborum consectetur quisquam totam perferendis, similique dolorum quos! </p>

</section>

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

<details>

    <summary> HTML Series </summary>

    <p>In this series, I covered most of the topics of HTML to learn </p>

</details>

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

<aside>

    <h4> JavaScript Doctory Series </h4>

    <p> I covered most of the basic concepts to learn JavaScrip </p>

</aside>

Non-Semantic HTML5 Elements

• The elements in HTML that 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>

    <section>

        <h3> HTML Simplified Series</h3>

        <p> I covered most of the topics of HTML to learn </p>

    </section>

    <aside>

        <h4> JavaScript Doctory Series </h4>

        <p>covered most of the basic concepts to learn JavaScrip</p>

    </aside>

</div>

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

<span> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam commodi a sapiente vel adipisci id odit nam eveniet ea necessitatibus. </span>