Introduction
HTML is a markup language that was created to design documents on the early internet. As the internet expanded in popularity and more people used it, it needed some new updates. Now, people want to make the web look nicer and pretty.
But initially, the web was not built to be designed that way, so programmers utilised various hacks to get things laid out in various ways. Instead of using <table></table> to describe the data using a table, programmers would rather use them to arrange other elements on a page.
As the use of visually designed layouts grew, programmers started using a generic “non-semantic” tag like the <div> tag. They would often give these tags a class or id attribute to explain their purpose. For example, instead of writing <footer> this was written as <div class="footer">.
Therefore, all the HTML tags are classified into two types, mainly known as Semantic and Non-Semantic elements.
What are Semantic elements in HTML?
Semantic elements are elements having meaningful names that describe the content in a human and machine-readable way.
Elements such as <main>, <header>,<footer> and <section> are all considered as semantic elements as they accurately describe the primary purpose as well as the type of content these tags contain.
Let’s have a look at some of the elements with their examples:
HTML <article> Element
The <article> element contains independent content without any other reference. It can be used in Forum posts, Product cards and Newspaper articles etc.
Example:
<article>
<h2> Data Structure </h2>
<p>A data structure is a way of organizing data in a computer so that it can be used effectively.</p>
</article>
Output:
HTML <aside> Element
The <aside> element contains the content that is indirectly related to the main content. It is represented mostly as a sidebar.
Example:
<p>Instagram is a social media app where you can post pictures and have chats with your friends. </p>
<aside>
<h3>Instagram</h3>
<p> Recently, there was a new feature added to instagram where we can add short videos with music and transitions. </p>
</aside>
Output:
HTML <footer> Element
The <footer> element represents the footer of a page. We can have multiple <footer> elements on one page.
Example:
<footer>
<p>Posted by: coding ninjas</p>
<p><a href="https://www.codingninjas.com/">codingninjas.com</a></p>
</footer>
Output:
HTML <header> Element
The <header> element defines the header of a document that contains introductory content or navigation links.
We can have multiple <header> elements in one document. However, <header> cannot be placed inside <address>, <footer>,or another <header> element.
Example:
<article>
<header>
<h1>What is a Binary Search Tree</h1>
<p> Binary Search Tree: </p>
</header>
<p>It is a binary tree with a specific order. In a binary search tree, all the nodes in the left subtree are less than the root node and the nodes in the right subtree is greater than the root node. </p>
</article>
Output:
HTML <main> Element
The <main> element represents the main content of a page. The content inside the main element must be unique.
Example:
<main>
<h1>Places to visit</h1>
<article>
<h1>Udaipur</h1>
<p>It is known as the white city of India.</p>
</article>
<article>
<h1>Kashmir</h1>
<p>It is known as paradise on earth. </p>
</article>
</main>
Output:
HTML <nav> Element
The <nav> elements are used to define the set of navigation links.
Example:
<nav>
<a href="https://www.codingninjas.com/courses/web-dev-react">React</a> |
<a href="https://www.codingninjas.com/courses/full-stack-web-dev-mern">MERN </a>
</nav>
Output:
If you click on the links, they will navigate you to the respective pages.
Like if you click on MERN, the following page will appear:
HTML <section> Element
The <section> element contains a section in a page. A page can have many sections, and each section can contain any kind of content within a heading.
|
<section> <h1>Football</h1> <p>Two opposing 11-player teams defend goals at opposite ends of a field with goalposts at each end, with points earned mostly by carrying the ball beyond the opponent's goal line and place-kicking or drop-kicking the ball over the crossbar between the opponent's goalposts.</p> </section>
<section> <h1>Cricket</h1> <p>Cricket is primarily a bat-and-ball game. Batting, fielding, and bowling are all part of the game, which is played on an oval by two teams. A game can run anywhere from many hours to several days, with 11 players per team. Cricket is a sport that may be enjoyed by men and women of all ages, both socially and competitively.</p> </section> |
Output:
Check out this problem - No of Spanning Trees in a Graph
117+ registered 