Menu
HTML

Semantic HTML

10. Semantic HTML

  • <article> : Encapsulates the entire content about web development basics.                                                                                 
  • <section> :1. Used for a section about "HTML Basics. 2.Contains a heading (<h2>) and a paragraph (<p>) providing information about HTML.                                
  • <aside> :  1. Used for additional resources. 2.Contains a heading (<h3>) and a paragraph (<p>) with information about recommended books and online courses.                           
  • <header> : 1. Used for the header of the article. 2. Contains a heading (<h1>) and a navigation menu (<nav>) with links.                     
  • <footer> : 1. Represents the footer of the article. 2.Contains a paragraph (<p>) with a copyright notice: "© 2023 WebDev Guide."                                 
  • <main> : 1. Represents the main content of the article. 2.Contains a heading (<h1>) and a paragraph (<p>) providing general information about the article.                                     
  • <figure> : 1. Contains an image (<img>) related to web development with a caption (<figcaption>).                                                   
  • <details> : Contains a summary (<summary>) and additional information inside a paragraph (<p>).                                
  • <mark> : Used to highlight the text: "Practice regularly to enhance your coding skills."                               
  • <time>: Contains a datetime attribute with the publication date.                    
  • <address> : Contains a paragraph (<p>) with an email link.                                             
  • <blockquote> : Contains a paragraph (<p>) with a quote and a citation (<cite>).           

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebDev Basics</title>
</head>
<body>

<!-- Example of using the HTML5 structural elements -->
<article>

    <!-- Header with navigation menu -->
    <header>
        <h1>Web Development Basics</h1>
        <nav>
            <ul>
                <li><a href="#html-basics">HTML Basics</a></li>
                <li><a href="#additional-resources">Additional Resources</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main content of the article -->
    <main>
        <p>Welcome to our guide on web development basics. Whether you're just starting or looking to refresh your knowledge, this article provides essential information to help you on your journey.</p>

        <!-- Section about HTML Basics -->
        <section id="html-basics">
            <h2>HTML Basics</h2>
            <p>HTML (HyperText Markup Language) is the foundation of web development. It defines the structure of web pages using elements like headings, paragraphs, and images.</p>
        </section>

        <!-- Aside with additional resources -->
        <aside id="additional-resources">
            <h3>Additional Resources</h3>
            <p>For more in-depth learning, consider the following resources:</p>
            <ul>
                <li>Recommended Books</li>
                <li>Online Courses</li>
            </ul>
        </aside>
    </main>

    <!-- Footer of the article -->
    <footer>
        <p>© 2023 WebDev Guide</p>
    </footer>

</article>

<!-- Figure with an image and caption -->
<figure>
    <img src="web_dev_image.jpg" alt="Web Development" width="300" height="200">
    <figcaption>An image related to web development</figcaption>
</figure>

<!-- Details with summary and additional information -->
<details>
    <summary>Important Tip</summary>
    <p>Practice regularly to enhance your coding skills.</p>
</details>

<!-- Mark element to highlight text -->
<p>Remember to <mark>practice regularly</mark> to enhance your coding skills.</p>

<!-- Time element with datetime attribute -->
<time datetime="2023-01-01">Published on January 1, 2023</time>

<!-- Address element with email link -->
<address>
    <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
</address>

<!-- Blockquote with quote and citation -->
<blockquote>
    <p>"The only way to do great work is to love what you do." - Steve Jobs</p>
    <cite>Steve Jobs</cite>
</blockquote>

</body>
</html>
HTML