Semantic HTML in HTML
Semantic HTML is a way of writing HTML that uses descriptive tags to give meaning to content. This can help with accessibility and search engine optimization, as well as making the HTML easier to read and understand.
Here are some examples of semantic HTML tags:
<header> for the top section of a page, often containing a logo and navigation links
<nav> for the navigation links on a page
<main> for the main content of a page
<article> for a self-contained piece of content, such as a blog post or news article
<section> for grouping related content together
<aside> for content that is not directly related to the main content, such as a sidebar or advertising
<footer> for the bottom section of a page, often containing copyright information and contact details
Here's an example of a simple HTML structure using semantic tags:
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<h1>Site Name</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Heading</h2>
<p>Some text goes here.</p>
</section>
<section>
<h2>Another Section</h2>
<p>More text goes here.</p>
</section>
</main>
<aside>
<h3>Sidebar Heading</h3>
<p>Some content goes here.</p>
</aside>
<footer>
<p>© 2023 Site Name</p>
<p>Contact: <a href="mailto:contact@example.com">contact@example.com</a></p>
</footer>
</body>
</html>
This HTML structure uses semantic tags to clearly identify the different sections of the page.
No comments:
Post a Comment