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>Semantic HTML</title> </head> <body> <!-- Non-semantic approach (avoid) --> <div id="header"> <div id="nav">...</div> </div> <div id="main"> <div class="article">...</div> <div class="sidebar">...</div> </div> <div id="footer">...</div> <!-- Semantic approach (preferred) --> <header> <nav>...</nav> </header> <main> <article>...</article> <aside>...</aside> </main> <footer>...</footer> </body> </html>
Result
Open