In this article, we will discuss the semantics or non-semantic elements firstly we will try to understand the basic meaning of HTML semantic and non-semantic, and then we will use those tags in the HTML program we will understand properly, so start with the semantic tags HTML.
What are Semantic elements?
The semantic elements clearly describe the meaning of that element to both the developer and the browser.
let us know by the examples of the semantic tag of html: <header> If we see the header tag we understand clearly this tag describes the header of the web page similarly when we see the <nav> tag then both the browser and the developer can understand this tag is used for the navigation bar and below there are many examples of semantic tag in html.
<header>
<nav>
<aside>
<article>
<section>
<footer>
<header> It is used to define a header for a webpage, The header section usually contains introductory content of the page like a logo, site name, and navigation elements,
<nav> is used to define a block of navigation links, within the <nav> elements the primary navigation menu of the site is included.
<header>
<h2>lovewithcode</h2>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
here if we see the <header> elements it wraps the entire header section including the site logo and navigation link menubar.
<nav> This is specifically for the navigation links.
<aside> It represents content related to the surrounding content.
- it is new in html5
- aside tags contain author information, links, and surrounding content-related highlights.
<article>
<h1>lovewithcode</h1>
<p>This is the main content of this website. it include the core information for the reader</p>
<aside>
<h2>Related Information</h2>
<p>hello welcome to lovewithcode.com here the all core informatiom about the programming are avilable</p>
</aside>
<p>More main informatiom continues , and visit our home page</p>
</article>
what are non-semantic elements?
non-semantic elements do not clearly describe the meaning of that element to both the developer and the browser.
example:- if we see the <div> tag and <span> tag we can not understand the meaning clearly while if we see the semantic tags like <header>,<nav> it describes the meaning of why these tags are used.
- div is a block element.
- it takes 100% width of the page.
- div element always starts with the new line.
examples
<h1> <footer> <div>
<artical> <p> <video>
<aside> <address> <pre>
<ol> <table> <form>
<ul> <section>
<div>
<p style="border : 2px solid green"> lovewithcode</p>
</div>
What is the inline element in HTML?
inline elements in html are the elements that take up as much width as necessary, html inline elements don’t start with the new line. now some examples of HTML inline tags are below.
- span is an inline element.
- it takes up as much width as necessary.
- it does not occupy the full width of the page.
- it does not start with the new line.
examples of HTML inline tags
<a> <abbr> <b> <big> <sup> <sub> <strong> <span> <map>
<buttom> <textarea> <objects> <lable> <img>
<span>
<p style="border : 2px solid green"> lovewithcode</p>
</span>
conclusion
In this article, we are covering the semantic and non-semantic elements in HTML5 in the previous article we saw the introduction to HTML, if you do not see this go and see this and then learn about the HTML semantic tags and non-semantic tags.
Read more
Pingback: Intoduction To HTML | What is HTML? - Lovewithcode.com
Pingback: List tags in HTML | What are the list tags in HTML?
Pingback: Top 5 Best offline coding classes in Mumbai for students..