Semantic tags(lt.11)
himanshu2 min read
They are called self-explanatory tags. They describe the meaning or purpose of the content they contain. They are used to add meaning to the content of a web page.
Advantages of semantic tags
It increases readability.
Accessibility: They make it easier for screen readers and other assistive technologies to understand the content of a web page.
Better Search Engine Optimization (SEO):
Maintenance: Semantic tags make code more readable and easier to maintain.
Better Styling and CSS.
Improved User Experience.
Examples: <header> , <nav>, <article> .......
below code will demonstrate the use of sematic tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantic tags</title>
</head>
<body>
<div>this is div</div>
<article>this is a article</article>
<aside>
<p> first</p>
<p> second</p>
</aside>
<main>this is main content</main>
<details>
this will come inside summary......................
<summary> summary tag</summary>
meri marzi kuch bhi likhu
</details>
<header>this is header</header>
<footer>this is fotter</footer>
</body>
</html>
A simple project of semantic tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>small project</title>
</head>
<body>
<header class="main-header">
<div class="logo-container"></div>
<img src="http://www.newbeershebapublicschool.in/banner_gallery/ban2.jpg" height="300px" width="550px"
alt="beersheba school" />
<h3>heading you wanna write</h3>
<nav class="links-conatiner">
<a href="about_us.html" target="_blank">about us </a>
<a href="contact_us.html"> contact_us </a>
<a href="service.html"> service </a>
<a href="login.html"> login </a>
</nav>
<main>
<header>
<h2>courses offered</h2>
</header>
<section>
<header>
<h3>science | commerce | arts</h3>
</header>
</section>
</main>
</header>
<h3>fill this form</h3>
<form action="" id="users" method="GET" target="blank"></form>
<label for="firstname">firstname</label>
<input type="text" id="firstname" />
<br />
<label for="lastname">lastname </label>
<input type="text" id="lastname" />
<br />
<label for="email">email </label>
<input type="text" name="mail" id="mail" />
<br>
<input type="submit" id="submit" />
</body>
</html>
11
Subscribe to my newsletter
Read articles from himanshu directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by