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>Time, Mark, Details</title> <style> mark { background: #fff176; padding: 0 2px; border-radius: 2px; } details { border: 1px solid #ccc; border-radius: 4px; margin: 8px 0; padding: 4px 12px; } summary { cursor: pointer; font-weight: bold; padding: 8px 0; } </style> </head> <body> <h1>News</h1> <p>Published on <time datetime="2025-04-22">Earth Day, April 22 2025</time>. </p> <p>Search results for <mark>semantic HTML</mark>:</p> <h2>FAQ</h2> <details> <summary>What is semantic HTML?</summary> <p>Semantic HTML uses elements that convey meaning, such as <code><article></code> and <code><nav></code>.</p> </details> <details> <summary>Why does it matter?</summary> <p>It improves SEO, accessibility, and code readability.</p> </details> </body> </html>
Result
Open