Semantic elements are used to give better structure to a web page.A web page has number of sections like header , footer , menu , other content.We use <div> tag to divide the whole page into different sections.For Example:-
<!DOCTYPE html>
<html>
<head>
<title>DIVTAG</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
font-style:italic;
}
div
{
background-color: red;
margin: 2px;
font-size: 25px;
}
</style> </head>
<body>
<div >
<p>First Division paragraph.
</div>
<div >
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</div> </body> </html>
OUTPUT:-
The problem with <div> tag is about accessibility,readability and consistency. It is always not easy to quickly navigate to specific <div> block. That’s why semantic elements are introduced. The term “semantic” refers to the meaning of a word or a thing, so “semantic elements” are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear why they are for , what purpose they serve in the document.
<header>
The purpose of header element is to display the title of related content.This contain section’s heading(h1-h6) or <hgroup> elements or logos, but this is not mandatory. Element <header> can also hold table of content or search forms. In single page there can be more than one header tag, but this can not be placed under <footer>,<address> or another <header> tag.
<!DOCTYPE html>
<html>
<head>
<title>Header Element</title>
</head>
<body>
<header>
<h2>this is Heading of content.</h2>
<p>This is main content.</p>
</header>
</body>
</html>
OUTPUT:-
<footer>
This element is used to define footer section of a document. Footer need not to appear at last of page, you can use more than one footer in a single page for different sections. <footer> tag declare inside <body> tag but it must not included inside another <footer> tag.
The footer section can contains the information about author, copyright information, links, references etc.
<!DOCTYPE html>
<html>
<head>
<title>Footer Element</title>
</head>
<body>
<p>This is paragraph.<br>
This is content of body<br>
<footer>
<b>Copyright ©</b> www.easecod.com
</footer>
<p>This is 2nd paragraph.<br>
This is content of paragraph2<br>
<footer>
<b>Copyright ©</b> self
</footer>
</body>
</html>
OUTPUT:-
<main>
The <main> element is used to define the main content.The<main> element can not declare inside other semantic elements and there must not be more than one <main> element in a document.
<!DOCTYPE html>
<html>
<head>
<title>Main Element</title>
</head>
<body>
<main>
<h1>Blog-Post</h1>
<p>FRONTEND vs BACKEND</p>
<article>
<h1>Front End</h1>
<p>Frontend is the part of the website users can see and interact. <br>
HTML,CSS,JavaScript</p>
</article>
<article>
<h1>Back End</h1>
<p>the part of application that is not directly accessed by the user.<br>
C,C++,Java</p>
</article>
</main>
</body>
</html>
OUTPUT:-
<section>
This element is used to define a section which includes connected content. For example brief page of any textbook which give information regarding each chapter in different section.You can use section element inside another section element and each section element can have its own <header>,<footer> or <article> elements.
<!DOCTYPE html>
<html>
<head>
<title>Section Example</title>
</head>
<body>
<section>
<h1>First Section</h1>
<p>This is the first section. This is the first section.
</section>
<section>
<h1>Second Section</h1>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</section>
</body>
</html>
OUTPUT:-
<aside>
This element is used to display any content aside from the main content, this could be any definition, quotes, reference etc. The content inside <aside> should be related to main content or surrounding content.
<!DOCTYPE html>
<html>
<head>
<title>Aside Element</title>
<style>
section{
border:2px solid black;
width:200px;
height:200px;
}
aside{
border:2px solid black;
width:200px;
height:200px;
position:relative;
left:220px;
top:-202px;
}
</style>
</head>
<body>
<section>
<h2>Main Section</h2>
<p>This is the main section.</p>
</section>
<aside>
<h2>Defination Area</h2>
<p>This is the defination section.</p>
</aside>
</body>
</html>
OUTPUT:-
<article>
This element is used to define independent content which is not related to surrounding content .For example any individual classified advertisement, blog-post,newspaper article.
<!DOCTYPE html>
<html>
<head>
<title>Article Example</title>
<style>
h1 {
Text-align:center-left;
}
</style>
</head>
<body>
<section>
<h1>Article</h1>
<article>
<h3>Article 1</h3>
<p>First Article</p>
</article>
<article>
<h3>Article 2</h3>
<p>Second Article</p>
</article>
</section>
</body>
</html>
OUTPUT:-
<mark>
This element is used to highlight the text.
<!DOCTYPE html>
<html>
<head>
<title>Mark Tag</title>
</head>
<body>
<h1>Mark Tag</h1>
<p>Easecod designed in <mark>2020</mark>
</p>
</body>
</html>
OUTPUT:-
<nav>
This element is used to hold hyperlinks i.e. link to same page or another page within the website or outside the website.this can be defined horizontal as well as vertical nav menu bar.
<!DOCTYPE html>
<html>
<head>
<title>Nav Example</title>
</head>
<body>
<h1>Main Menu</h1>
<nav>
<a href="/Frontend/">Frontend</a> |
<a href="/Backend/">Backend</a> |
<a href="/New Treand/">New Treand</a>
</nav>
</body>
</html>
OUTPUT:-
<figure> and <figcaption>
The element <figure> is used to add an image and element <figcaption> is used to give a little description of image on a web page.
<!DOCTYPE html>
<html>
<head>
<title>Figcaption Tag</title>
</head>
<body>
<h2>Figure and Figcaption</h2>
<figure>
<img src="http://www.easecod.com/wp-content/uploads/2020/08/aside.bmp" >
<figcaption>Example of Aside Element</figcaption>
</figure>
</body>
</html>
OUTPUT:-
<details> and <summary>
The <details> element represent additional information which can be hide as well as view by users.
The <summary> element define the heading for the elements in <details>.
<!DOCTYPE html>
<html>
<head>
<title>Details-Summary Example</title>
</head>
<body>
<details open>
<summary>Click the arrow</summary>
<p>This is the content that can be hidden or shown.</p>
</details>
</body>
</html>
OUTPUT:-
