In this article, we are going to learn about the semantic elements in HTML5. Semantic elements are the elements that describe their meaning to both the developer as well as to the browser. HTML5 provides us with many semantic elements as listed below:
<article> tag: A article tag is used to specify a particular block or space on the web page that is independent and has self-contained content. We can use <article> for the blog posts, the articles from newspapers, and more such entities.
<header> tag: The header is the semantic tag that specifies the header or title of the page that will be shown at the top of the page.
<nav> tag: Nav is the element or tag that is used to build the navbar of the page. It is the element inside which we define the nav links that perform some actions on click to them.
<section> tag: section element is used to define the midsection part of the page, which can contain the information about the upcoming events, text content, or whatever a developer wants it to display.
<main> tag: The main element is also used to define the middle content on the web page. It can contain text or other elements to show the content on the web page.
<aside> tag: The aside element defines the content on the side of the web page.
<footer> tag: Footer is the element mainly used to provide the copyrights or some extra links that are available on the web page.
<table> tag: The table tag is one of the most important elements available in HTML. It allows us to create a table with rows, columns, and the data inside them, as shown below example.
<form> tag: The form tag is also a very useful and important tag. It is used to build a web page form that can be a login or a submission form. It uses input tags inside it which are used to get inputs from the user.
<figure> and <figcaption> tag: The figure tag contains the self-contained content such that images, graphs, code content, etc. while the figcaption tag specifies the caption or the description of the content contained by the figure tag. we can place the caption above or below the figure content by using figcaption tag to the corresponding position.
<details> and <summary> tag: The details tag contains the information that will be visible on the page when the user demands it to display. By default, the text is not visible on the page. while the summary tag is used to show the main heading of the details tag and the text that is contained inside details other than summary text will be visible when the user clicks on the content of the summary tag.
<time> tag: Time tag the time or the datetime. We use an attribute named datetime inside it that translates the time into a machine-readable language that results in a smarter search response from search engines.
<mark> tag: The mark tag contains the content that is marked or highlighted to show the importance of the text.
Let’s see the use of the above elements through some examples.
Please Login to comment...