Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Header, Nav, Main</title> <style> body { margin: 0; font-family: sans-serif; } header { background: #2c3e50; color: white; padding: 0 24px; display: flex; align-items: center; gap: 24px; } nav a { color: white; text-decoration: none; padding: 16px 8px; display: inline-block; } nav a:hover { background: rgba(255,255,255,0.1); } main { max-width: 960px; margin: 32px auto; padding: 0 24px; } </style> </head> <body> <header> <h1 style="font-size:1.2rem;">MySite</h1> <nav aria-label="Primary"> <a href="/">Home</a> <a href="/blog/">Blog</a> <a href="/about/">About</a> <a href="/contact/">Contact</a> </nav> </header> <main> <h2>Welcome</h2> <p>This is the main content area.</p> </main> </body> </html>
Result
Open