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). main: This 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). footer: Used to create the footer of the web page.
<footer>
<p> @ Copyright All rights resered - Geeks Help</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 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). aside: It 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
