Here is how a standard blog post page should look using modern HTML5 semantics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Layout | HTML910</title>
</head>
<body>
<header>
<h1>Welcome to HTML910</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Why Semantic HTML Matters</h2>
<p>Posted on October 24, 2023</p>
<p>Here is the content of the post...</p>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">CSS Grid Basics</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 html910.blogspot.com</p>
</footer>
</body>
</html>
Just like the header, the footer is not strictly for the bottom of the page. It typically contains copyright information, links to related documents, or author details. You can have a footer for your site, and separate footers for individual articles within the page.
Moving away from <div> soup to structured semantic HTML is one of the easiest ways to upgrade your web development skills. It doesn't take extra time, but the benefits for SEO, accessibility, and code maintenance are massive. html910.blogspot.com
Next time you start a project, ask yourself: "Does this tag describe what the content is, or just how it looks?"
Stay tuned to html910.blogspot.com for more tips on HTML, CSS, and JavaScript! Here is how a standard blog post page
This tag is reserved specifically for major blocks of navigation links. Using <nav> helps screen readers understand how to skip directly to the navigation menu, improving accessibility for visually impaired users.
Usage:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
These are the building blocks of a modern HTML5 layout. If you aren't using these, you are writing outdated code.
If html910.blogspot.com is specifically about HTML or related topics, here are a few suggestions: Just like the header, the footer is not