Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Semantic Screen Reader Structure Example</title> <style> body { font-family: sans-serif; margin: 0; background: #f4f4f4; color: #333;} header, nav, main, article, aside, footer { padding: 20px; margin: 10px; background: white; border: 1px solid #ccc; border-radius: 4px; } header { border-top: 5px solid #007bff; } h1, h2, h3 { margin-top: 0; } ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; } a { text-decoration: none; color: #007bff; font-weight: bold; } /* Skip Link Style */ .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: white; padding: 8px; z-index: 100; transition: top 0.3s; } .skip-link:focus { top: 0; /* Drops down down when keyboard focused */ } </style> </head> <body> <!-- The Skip Link allows keyboard users to bypass the menu entirely --> <a href="#maincontent" class="skip-link">Skip to main content</a> <header> <h1>The Daily News</h1> <nav aria-label="Main Navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">World</a></li> <li><a href="#">Politics</a></li> </ul> </nav> </header> <main id="maincontent"> <article> <h2>Historic Space Launch Today</h2> <p>By Clay Freely | October 14, 2026</p> <h3>The Countdown Begins</h3> <p>The mission represents a massive step forward in aerospace engineering...</p> <h3>Astronaut Reactions</h3> <p>The crew expressed massive excitement as they boarded the vessel...</p> </article> <aside aria-label="Related Resources"> <h2>Related Articles</h2> <ul> <li><a href="#">How rockets work</a></li> </ul> </aside> </main> <footer> <p>© 2026 The Daily News.</p> </footer> </body> </html>
