HTML semantic tags
Importance of Semantic Tags
List of semantic tags
<header> Tag: Defines a header for a document or section, typically containing introductory content or navigation links.
<nav> Tag: Represents a section of a page that links to other pages or to parts within the page, like a navigation bar.
<main> Tag: Specifies the main content of a document, which is unique to the document and excludes sidebars, headers, footers, and navigation links.
<section> Tag: Defines a section in a document, often with a heading, and can be used to group related content together.
<article> Tag: Represents a self-contained piece of content, such as a blog post, news article, or forum post.
<aside> Tag: Defines content that is tangentially related to the content around it, often used for sidebars, pull quotes, or advertisements.
<footer> Tag: Represents a footer for a document or section, typically containing author information, copyright data, or links to related documents.
<figure> Tag: Used for content that is referenced from the main content, such as an image, diagram, or code snippet, usually with a caption.
<figcaption> Tag: Provides a caption or legend for a <figure> element.</figure>
<time> Tag: Represents a specific time or date, potentially with machine-readable formatting.
<mark> Tag: Highlights text that is of special relevance or interest, often used to denote a search term in the document.
<address> Tag: Provides contact information for the author or owner of a document or article.
<summary> Tag: Used with the <details> element to provide a visible summary or label that can be clicked to view or hide the additional details.</details>
<details> Tag: Creates a disclosure widget that allows users to hide or reveal additional content upon request.
<blockquote> Tag: Specifies a section that is quoted from another source, often with citation and attribution details.
<cite> Tag: Provides a citation or reference to a source, typically for quotations or references.
<code> Tag: Represents a fragment of computer code, usually displayed in a monospaced font for clarity.
<em> Tag: Emphasizes text with added importance, usually displayed in italics.
<strong> Tag: Indicates strong importance or seriousness for the text, usually displayed in bold.
Common Semantic Tags with Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TUTORIAL</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TUTORIAL</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TUTORIAL</title>
</head>
<body>
<main>
<article>
<h2>Introduction to HTML</h2>
<p>HTML stands for HyperText Markup Language...</p>
</article>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TUTORIAL</title>
</head>
<body>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>