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>Article, Section, Aside</title> <style> .layout { display: flex; gap: 24px; max-width: 960px; margin: auto; } main { flex: 2; } aside { flex: 1; background: #f5f5f5; padding: 16px; border-radius: 4px; } </style> </head> <body> <div class="layout"> <main> <article> <header> <h1>How the Web Works</h1> <p>Published <time datetime="2025-03-15">March 15, 2025</time></p> </header> <section> <h2>Clients and Servers</h2> <p>When you type a URL...</p> </section> <section> <h2>HTTP Protocol</h2> <p>Requests and responses...</p> </section> </article> </main> <aside> <h2>Related Articles</h2> <ul><li><a href="#">What is DNS?</a></li></ul> </aside> </div> </body> </html>
Result
Open