Welcome to the world of semantics, where code speaks the language of content. In today's fast-paced digital landscape, creating accessible and search engine-friendly web pages is crucial for success. However, as a freelance web developer, I've noticed that many newly built websites need improvement regarding semantics in HTML. In this blog post, we'll dive into the importance of semantics, explore a basic HTML structure with the correct semantics, and provide resources for further learning.
The importance of semantics
Using semantics correctly allows you to communicate the meaning of content blocks on your website through code. Semantics are of great value for search engines and screen readers, making your site more accessible and easily understood.
A basic HTML structure with proper semantics
Here's an example of how to structure a page with the correct semantics:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page</title>
</head>
<body>
<h1>This is my page</h1>
<header>
<figure>
<img src="logo.svg" alt="My brand" />
</figure>
<nav>
<h2>Primary navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<h3>Subtitle 1</h3>
<p>Paragraph 1</p>
<h3>Subtitle 2</h3>
<p>Paragraph 2</p>
<h3>Subtitle 3</h3>
<p>Paragraph 3</p>
</article>
</main>
<footer>
<nav>
<h2>Footer navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
<p>© 2023 My Brand</p>
</footer>
</body>
</html>
You might notice that the <h1> element is positioned immediately after the <body> element. This implies that subsequent heading elements should begin with the <h2> element, and beneath the <h2> element, there should be <h3> elements. Sticking to these rules is essential for implementing semantics correctly in HTML. For more guidance, refer to resources on semantics in HTML from MDN.
Placing the <h1> element right below the <body> element can be challenging visually organizing your layout. Therefore, I usually make this <h1> element visible only to screen readers using CSS. Remember that this element's content is crucial for search engines, so ensure it's optimized for SEO.
Resources and tools for better semantics
Many sectioning elements in HTML need to be identified by a heading element as a child. You can consult the HTML elements reference from MDN for each element's requirements, and you can use a tool like HTML5 Outliner to check your work. If you've missed a heading element, this tool will make finding and correcting the issue easy. By implementing the correct markup, you'll create a well-structured table of contents for your page.
Semantics for blog posts
For those interested in diving deeper into the topic, I've written a separate blog post about the specific elements and semantics to use for blog post pages. Check it out to enhance your understanding and application of HTML semantics in blogging.
Conclusion
Understanding and applying the correct semantics in HTML is essential for creating accessible, search engine-friendly websites. By following the basic structure provided and using the resources mentioned, you'll be on your way to unlocking the full potential of semantics in your web development projects. Remember, code is not only about functionality – it's also about communication. So make your code speak the language of your content with the power of semantics.
Top comments (0)