Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Example HTML file demonstrating various HTML syntax elements --> | |
| <title>HTML Syntax Example</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script defer src="main.js"></script> | |
| </head> | |
| <body> | |
| <!-- Header section with navigation --> | |
| <header class="main-header" role="banner"> | |
| <nav class="main-nav" aria-label="Main navigation"> | |
| <ul class="nav-list"> | |
| <li><a href="#home" class="nav-link active">Home</a></li> | |
| <li><a href="#about" class="nav-link">About</a></li> | |
| <li><a href="#contact" class="nav-link">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- Main content area --> | |
| <main id="main-content" role="main"> | |
| <!-- Hero section --> | |
| <section class="hero" aria-labelledby="hero-title"> | |
| <h1 id="hero-title">Welcome to Our Site</h1> | |
| <p class="lead">This is an example of semantic HTML structure.</p> | |
| </section> | |
| <!-- Article with sections --> | |
| <article class="content-article"> | |
| <header> | |
| <h2>Main Article</h2> | |
| <p class="article-meta">Published on <time datetime="2024-02-20">February 20, 2024</time></p> | |
| </header> | |
| <section class="article-section"> | |
| <h3>Section One</h3> | |
| <p>This section demonstrates text content with <em>emphasis</em> and <strong>strong importance</strong>.</p> | |
| <figure> | |
| <img src="example.jpg" alt="Example image" width="600" height="400"> | |
| <figcaption>An example image with caption</figcaption> | |
| </figure> | |
| </section> | |
| <section class="article-section"> | |
| <h3>Interactive Elements</h3> | |
| <!-- Form example --> | |
| <form class="contact-form" action="/submit" method="POST"> | |
| <fieldset> | |
| <legend>Contact Information</legend> | |
| <div class="form-group"> | |
| <label for="name">Name:</label> | |
| <input type="text" id="name" name="name" required | |
| placeholder="Enter your name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email:</label> | |
| <input type="email" id="email" name="email" required | |
| placeholder="Enter your email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message:</label> | |
| <textarea id="message" name="message" rows="4" | |
| placeholder="Your message"></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Send Message</button> | |
| </fieldset> | |
| </form> | |
| </section> | |
| <!-- Table example --> | |
| <section class="article-section"> | |
| <h3>Data Table</h3> | |
| <table class="data-table"> | |
| <caption>Monthly Sales Data</caption> | |
| <thead> | |
| <tr> | |
| <th scope="col">Month</th> | |
| <th scope="col">Sales</th> | |
| <th scope="col">Growth</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th scope="row">January</th> | |
| <td>$10,000</td> | |
| <td>5%</td> | |
| </tr> | |
| <tr> | |
| <th scope="row">February</th> | |
| <td>$12,000</td> | |
| <td>20%</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th scope="row">Total</th> | |
| <td>$22,000</td> | |
| <td>25%</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </section> | |
| </article> | |
| <!-- Aside content --> | |
| <aside class="sidebar" role="complementary"> | |
| <h2>Related Information</h2> | |
| <div class="widget"> | |
| <h3>Categories</h3> | |
| <ul class="category-list"> | |
| <li><a href="#tech">Technology</a></li> | |
| <li><a href="#design">Design</a></li> | |
| <li><a href="#business">Business</a></li> | |
| </ul> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Footer section --> | |
| <footer class="site-footer" role="contentinfo"> | |
| <div class="footer-content"> | |
| <p>© 2024 Example Site. All rights reserved.</p> | |
| <address> | |
| Contact us at: <a href="mailto:info@example.com">info@example.com</a> | |
| </address> | |
| </div> | |
| </footer> | |
| <!-- Dialog for modal content --> | |
| <dialog id="modal" class="modal"> | |
| <header> | |
| <h2>Modal Title</h2> | |
| <button type="button" class="close-button" aria-label="Close modal">×</button> | |
| </header> | |
| <div class="modal-content"> | |
| <p>This is an example of the dialog element for modal content.</p> | |
| </div> | |
| <footer> | |
| <button type="button" class="btn">Close</button> | |
| </footer> | |
| </dialog> | |
| </body> | |
| </html> | |