HTML5 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> Raju </td>
        <td> Frontend Developer </td>
    </tr>
    <tr>
        <td> Jassi </td>
        <td> Youtuber </td>
    </tr>
</table>


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

<article>
    <h3> HTML Simplified Series</h3>
    <p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
</article>

<article>
    <h3> CSS Master</h3>
    <p> This is another series of raju_webdev at geekshelp in this series I covered the most of the basic concepts of CSS.</p>
</article>
<article>
    <h3> JavaScript Doctory Series </h3>
    <p> This series is on JavaScript in which 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> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF. </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). mainThis specifies the main content on the web page.

<main>
    <h3> HTML Simplified Series</h3>
    <p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
</main>


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

<footer>
    <p> @ Copyright All rights resered - Geeks Help</p>
</footer>


viii). sectionIt 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). detailsIt is used to define additional details that a user can view or hide

<details>
    <summary> HTML Simplified Series </summary>
    <p>This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF</p>
</details>


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

<aside>
    <h4> JavaScript Doctory Series </h4>
    <p> This series is on JavaScript in which I covered most of the basic concepts to learn JavaScrip </p>
</aside>





Non-Semantic HTML5 Elements

  • 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>
    <section>
        <h3> HTML Simplified Series</h3>
        <p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
    </section>
    <aside>
        <h4> JavaScript Doctory Series </h4>
        <p>This series is on JavaScript in which I 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>


Semantic & Non-Semantic Tags in HTML




Post a Comment

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

Top Post Ad

Below Post Ad