HTML5 Semantic Tags 🏗️¶

Mentor's Note: Semantic tags are like blueprints for your digital building! Just as architects use specific terms for different parts of a building (foundation, walls, roof, rooms), semantic tags give meaning and structure to different parts of your webpage! 🏢🗺️

📚 Educational Content: This comprehensive guide covers HTML5 semantic elements to create modern, accessible, and SEO-friendly web structures.

🎯 Learning Objectives¶

By the end of this lesson, students will be able to:

Understand the purpose and benefits of semantic HTML
Use HTML5 semantic tags for proper document structure
Create accessible and SEO-friendly web pages
Differentiate between semantic and non-semantic elements
Apply best practices for modern web development

🌟 The Scenario: Modern Web Architecture 🏛️¶

Mental Model for beginners: Think of semantic tags as building a modern house! Imagine you're designing a smart home... 🏡

Foundation: <body> - The main structure
Entrance: <header> - Welcome area and navigation
Living Room: <main> - Primary content area
Bedrooms: <article> - Self-contained content units
Kitchen: <section> - Themed content areas
Garage: <aside> - Supplementary content
Utility Room: <footer> - Support information
The Result: A well-organized, smart structure! ✅

📖 Semantic HTML Overview¶

What is Semantic HTML?¶

Semantic HTML uses HTML elements that clearly describe their meaning to both the browser and developer. Elements like <header>, <nav>, and <footer> are self-explanatory, while <div> and <span> provide no information about their content.

Why Semantic HTML Matters:¶

Accessibility: Screen readers understand page structure
SEO: Search engines better understand content hierarchy
Maintainability: Code is easier to read and update
Collaboration: Team members understand structure quickly
Future-proof: Adapts to new technologies and standards

Semantic vs Non-Semantic:¶

graph TD
    A[HTML Elements] --> B[Semantic Elements]
    A --> C[Non-Semantic Elements]

    B --> B1[header]
    B --> B2[nav]
    B --> B3[main]
    B --> B4[article]
    B --> B5[section]
    B --> B6[aside]
    B --> B7[footer]

    C --> C1[div]
    C --> C2[span]

    style B fill:#2ecc71
    style C fill:#e74c3c

🏗️ Document Structure Elements¶

The Complete Semantic Structure:¶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Semantic Website</title>
</head>
<body>
    <header>
        <!-- Header content -->
    </header>

    <nav>
        <!-- Navigation content -->
    </nav>

    <main>
        <!-- Main content -->
    </main>

    <aside>
        <!-- Sidebar content -->
    </aside>

    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

📋 Header Element: Page Introduction¶

Header Usage:¶

<!-- Main page header -->
<header class="site-header">
    <div class="branding">
        <h1><a href="/">My Website</a></h1>
        <p tagline="Your tagline here"></p>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<!-- Article header -->
<article>
    <header>
        <h1>Article Title</h1>
        <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
        <p>By <a href="/author/john">John Doe</a></p>
    </header>

    <p>Article content goes here...</p>
</article>

<!-- Section header -->
<section>
    <header>
        <h2>Section Title</h2>
        <p>Brief description of this section...</p>
    </header>

    <p>Section content goes here...</p>
</section>

Header Best Practices:¶

Use for introductions: Page, section, or article introductions
Can contain headings: Usually contains <h1>-<h6>
Can include navigation: Often includes primary navigation
Multiple headers allowed: Different sections can have their own headers

<!-- Main site navigation -->
<nav class="primary-navigation">
    <h2 class="visually-hidden">Main Navigation</h2>
    <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/products/electronics">Electronics</a></li>
        <li aria-current="page">Laptops</li>
    </ol>
</nav>

<!-- Footer navigation -->
<nav class="footer-nav">
    <h3>Quick Links</h3>
    <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/terms">Terms of Service</a></li>
        <li><a href="/sitemap">Sitemap</a></li>
        <li><a href="/help">Help Center</a></li>
    </ul>
</nav>

<!-- Pagination navigation -->
<nav class="pagination" aria-label="Pagination">
    <a href="/page/1" rel="prev">Previous</a>
    <ol>
        <li><a href="/page/1">1</a></li>
        <li><a href="/page/2">2</a></li>
        <li aria-current="page">3</a></li>
        <li><a href="/page/4">4</a></li>
    </ol>
    <a href="/page/4" rel="next">Next</a>
</nav>

Use for navigation blocks: Groups of navigation links
Include headings: Add hidden headings for accessibility
Use ARIA labels: Provide context for screen readers
Multiple nav elements allowed: Different navigation types

📱 Main Element: Primary Content¶

Main Element Usage:¶

<body>
    <header>
        <!-- Site header -->
    </header>

    <nav>
        <!-- Site navigation -->
    </nav>

    <main>
        <h1>Welcome to Our Website</h1>
        <p>This is the main content of the page...</p>

        <article>
            <h2>Latest Article</h2>
            <p>Article content...</p>
        </article>

        <section>
            <h2>Featured Products</h2>
            <p>Product showcase...</p>
        </section>
    </main>

    <aside>
        <!-- Sidebar content -->
    </aside>

    <footer>
        <!-- Footer content -->
    </footer>
</body>

Main Element Rules:¶

One per page: Only one <main> element allowed
Unique content: Should not contain content repeated across pages
Skip link target: Often the target of "skip to main content" links
Accessible: Automatically gets role="main" in browsers

📄 Article Element: Self-Contained Content¶

Article Examples:¶

<!-- Blog post -->
<article class="blog-post">
    <header>
        <h1>Understanding Semantic HTML</h1>
        <div class="meta">
            <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
            <p>By <a href="/author/jane">Jane Smith</a></p>
            <p>Category: <a href="/category/web-development">Web Development</a></p>
        </div>
    </header>

    <div class="content">
        <p>Semantic HTML is the foundation of modern web development...</p>
        <!-- More article content -->
    </div>

    <footer class="article-footer">
        <p>Tags: 
            <a href="/tag/html">HTML</a>, 
            <a href="/tag/semantic">Semantic</a>, 
            <a href="/tag/accessibility">Accessibility</a>
        </p>
        <p>Share this article:
            <a href="#">Twitter</a> | 
            <a href="#">Facebook</a> | 
            <a href="#">LinkedIn</a>
        </p>
    </footer>
</article>

<!-- News article -->
<article class="news-item">
    <header>
        <h2>Breaking: New HTML5 Features Released</h2>
        <time datetime="2024-01-14T10:30">January 14, 2024 at 10:30 AM</time>
    </header>

    <p>Exciting new features have been added to HTML5...</p>

    <footer>
        <p>Source: <cite>Web Standards Organization</cite></p>
    </footer>
</article>

<!-- Forum post -->
<article class="forum-post">
    <header>
        <h3>How to use semantic tags correctly?</h3>
        <p>Posted by <a href="/user/newbie">Newbie123</a> 
           on <time datetime="2024-01-13">January 13, 2024</time></p>
    </header>

    <p>I'm confused about when to use article vs section...</p>

    <footer>
        <p>Replies: 12 | Views: 234</p>
    </footer>
</article>

Article Best Practices:¶

Self-contained: Content makes sense on its own
Reusable: Could be syndicated or embedded elsewhere
Has its own heading: Should include a heading element
Can be nested: Articles can contain other articles

📂 Section Element: Themed Content Groups¶

Section Examples:¶

<main>
    <section class="about">
        <h2>About Our Company</h2>
        <p>We are a leading web development company...</p>
        <p>Founded in 2020, we've helped over 100 clients...</p>
    </section>

    <section class="services">
        <h2>Our Services</h2>
        <p>We offer a comprehensive range of services...</p>

        <div class="service-list">
            <section class="service">
                <h3>Web Development</h3>
                <p>Custom websites built with modern technologies...</p>
            </section>

            <section class="service">
                <h3>Mobile Apps</h3>
                <p>Native and cross-platform mobile applications...</p>
            </section>

            <section class="service">
                <h3>SEO Optimization</h3>
                <p>Improve your search engine rankings...</p>
            </section>
        </div>
    </section>

    <section class="testimonials">
        <h2>What Our Clients Say</h2>

        <article class="testimonial">
            <blockquote>
                <p>"Amazing work! They delivered exactly what we needed."</p>
                <footer>
                    <cite>John Doe, CEO of TechCorp</cite>
                </footer>
            </blockquote>
        </article>
    </section>
</main>

Section vs Article:¶

Element	Use Case	Example
Article	Self-contained content	Blog post, news story
Section	Themed content group	About section, services section

📦 Aside Element: Supplementary Content¶

Aside Examples:¶

<!-- Sidebar aside -->
<aside class="sidebar">
    <section class="author-info">
        <h3>About the Author</h3>
        <img src="author-photo.jpg" alt="Jane Smith">
        <p>Jane Smith is a senior web developer...</p>
    </section>

    <section class="related-posts">
        <h3>Related Posts</h3>
        <ul>
            <li><a href="/post/css-basics">CSS Basics Guide</a></li>
            <li><a href="/post/javascript-tips">JavaScript Tips</a></li>
            <li><a href="/post/responsive-design">Responsive Design</a></li>
        </ul>
    </section>

    <section class="advertisements">
        <h3>Sponsored Links</h3>
        <div class="ad">
            <a href="#">Check out our sponsor!</a>
        </div>
    </section>
</aside>

<!-- Pull quote aside -->
<article>
    <p>The main article content goes here...</p>

    <aside class="pull-quote">
        <blockquote>
            <p>"Semantic HTML is not just about tags, it's about meaning."</p>
        </blockquote>
    </aside>

    <p>More article content continues...</p>
</article>

<!-- Callout box aside -->
<section class="tutorial">
    <h2>How to Build a Website</h2>
    <p>Step-by-step instructions...</p>

    <aside class="tip-box">
        <h3>Pro Tip</h3>
        <p>Always test your semantic HTML with screen readers to ensure accessibility!</p>
    </aside>
</section>

Aside Best Practices:¶

Supplementary content: Content related but not essential
Can be nested: Can appear within articles or sections
Multiple asides allowed: Different types of supplementary content
Context-dependent: Content depends on surrounding context

<!-- Main page footer -->
<footer class="site-footer">
    <div class="footer-content">
        <section class="footer-about">
            <h3>About Us</h3>
            <p>We are a web development company...</p>
        </section>

        <section class="footer-links">
            <h3>Quick Links</h3>
            <nav>
                <ul>
                    <li><a href="/about">About</a></li>
                    <li><a href="/services">Services</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </nav>
        </section>

        <section class="footer-contact">
            <h3>Contact Info</h3>
            <address>
                <p>123 Web Street, Internet City, WWW 12345</p>
                <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                <p>Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>
            </address>
        </section>
    </div>

    <div class="footer-bottom">
        <p>&copy; 2024 My Company. All rights reserved.</p>
        <nav>
            <a href="/privacy">Privacy</a> | 
            <a href="/terms">Terms</a> | 
            <a href="/sitemap">Sitemap</a>
        </nav>
    </div>
</footer>

<!-- Article footer -->
<article>
    <header>
        <h1>Article Title</h1>
    </header>

    <p>Article content...</p>

    <footer class="article-footer">
        <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
        <p>Tags: 
            <a href="/tag/html">HTML</a>, 
            <a href="/tag/semantic">Semantic</a>
        </p>
        <p>Share: 
            <a href="#">Twitter</a> | 
            <a href="#">Facebook</a>
        </p>
    </footer>
</article>

<!-- Section footer -->
<section>
    <h2>Product Reviews</h2>

    <article class="review">
        <h3>Amazing Product!</h3>
        <p>Great quality and fast shipping...</p>
        <footer>
            <p>Reviewed by <cite>John Doe</cite> on <time datetime="2024-01-10">Jan 10, 2024</time></p>
        </footer>
    </article>
</section>

🎯 Quick Quiz¶

Test Your Knowledge

Which semantic element should contain the main content of a page? - [ ] <header> - [x] <main> - [ ] <section> - [ ] <article>

Explanation: <main> is specifically designed to contain the primary content of the page and should only be used once per page.

Think About It

When should you use <article> vs <section>?

Answer: Use <article> for self-contained content that could stand alone (like blog posts), and <section> for grouping related content that's part of a larger whole (like chapters in a book).

🛠️ Practice Exercise¶

Build a Semantic Blog Page

Task: Create a complete semantic blog page structure:

Requirements: 1. Proper document structure with all semantic tags 2. Header with site branding and navigation 3. Main content area with blog articles 4. Sidebar with related content 5. Footer with site information 6. Proper headings hierarchy 7. Accessibility features (ARIA labels, etc.)

Hint: Start with this structure:

<body>
    <header>
        <!-- Site header content -->
    </header>

    <nav>
        <!-- Navigation menu -->
    </nav>

    <main>
        <!-- Blog articles -->
    </main>

    <aside>
        <!-- Sidebar content -->
    </aside>

    <footer>
        <!-- Footer information -->
    </footer>
</body>

🔍 Semantic HTML Best Practices¶

✅ Do's:¶

Use semantic tags: Choose appropriate semantic elements
Maintain hierarchy: Proper heading structure (h1 → h2 → h3)
Add accessibility: Use ARIA labels and roles
Validate structure: Use HTML validators
Think content first: Structure based on meaning, not appearance

❌ Don'ts:¶

Overuse divs: Replace with semantic alternatives
Skip headings: Don't jump heading levels
Nest incorrectly: Follow proper nesting rules
Ignore accessibility: Always consider screen readers
Style with HTML: Use CSS for appearance

🎨 Real-World Examples¶

Complete Semantic Blog Layout:¶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Blog - Latest Articles</title>
</head>
<body>
    <!-- Site Header -->
    <header class="site-header">
        <div class="branding">
            <h1><a href="/">Tech Blog</a></h1>
            <p tagline="Exploring the latest in web technology</p>
        </div>

        <nav class="main-navigation" aria-label="Main navigation">
            <ul>
                <li><a href="/" aria-current="page">Home</a></li>
                <li><a href="/articles">Articles</a></li>
                <li><a href="/tutorials">Tutorials</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Breadcrumb Navigation -->
    <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol>
            <li><a href="/">Home</a></li>
            <li><a href="/articles">Articles</a></li>
            <li aria-current="page">Web Development</li>
        </ol>
    </nav>

    <!-- Main Content -->
    <main>
        <section class="hero-section">
            <h1>Latest Web Development Articles</h1>
            <p>Stay updated with the latest trends and techniques in web development</p>
        </section>

        <section class="featured-articles">
            <h2>Featured Articles</h2>

            <article class="featured-article">
                <header>
                    <h3><a href="/article/semantic-html">Understanding Semantic HTML</a></h3>
                    <div class="article-meta">
                        <p>By <a href="/author/jane">Jane Smith</a></p>
                        <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
                        <p>Category: <a href="/category/web-development">Web Development</a></p>
                    </div>
                </header>

                <div class="article-excerpt">
                    <p>Semantic HTML is the foundation of modern web development. Learn how to use HTML5 semantic tags to create accessible, SEO-friendly websites...</p>
                </div>

                <footer class="article-footer">
                    <p><a href="/article/semantic-html">Read more →</a></p>
                    <p>Tags: 
                        <a href="/tag/html">HTML</a>, 
                        <a href="/tag/semantic">Semantic</a>, 
                        <a href="/tag/accessibility">Accessibility</a>
                    </p>
                </footer>
            </article>

            <article class="featured-article">
                <header>
                    <h3><a href="/article/css-grid">Mastering CSS Grid Layout</a></h3>
                    <div class="article-meta">
                        <p>By <a href="/author/john">John Doe</a></p>
                        <p>Published on <time datetime="2024-01-14">January 14, 2024</time></p>
                        <p>Category: <a href="/category/css">CSS</a></p>
                    </div>
                </header>

                <div class="article-excerpt">
                    <p>CSS Grid is a powerful layout system that makes it easy to create complex, responsive layouts. Discover how to use grid templates, areas, and properties...</p>
                </div>

                <footer class="article-footer">
                    <p><a href="/article/css-grid">Read more →</a></p>
                    <p>Tags: 
                        <a href="/tag/css">CSS</a>, 
                        <a href="/tag/layout">Layout</a>, 
                        <a href="/tag/responsive">Responsive</a>
                    </p>
                </footer>
            </article>
        </section>

        <section class="recent-articles">
            <h2>Recent Articles</h2>

            <div class="article-grid">
                <article class="recent-article">
                    <header>
                        <h4><a href="/article/javascript-tips">10 JavaScript Tips for Better Code</a></h4>
                        <p><time datetime="2024-01-13">January 13, 2024</time></p>
                    </header>
                    <p>Improve your JavaScript code with these essential tips...</p>
                </article>

                <article class="recent-article">
                    <header>
                        <h4><a href="/article/react-hooks">Understanding React Hooks</a></h4>
                        <p><time datetime="2024-01-12">January 12, 2024</time></p>
                    </header>
                    <p>Learn how to use React Hooks to manage state and side effects...</p>
                </article>

                <article class="recent-article">
                    <header>
                        <h4><a href="/article/web-performance">Web Performance Optimization</a></h4>
                        <p><time datetime="2024-01-11">January 11, 2024</time></p>
                    </header>
                    <p>Techniques to make your websites faster and more efficient...</p>
                </article>
            </div>
        </section>
    </main>

    <!-- Sidebar -->
    <aside class="sidebar">
        <section class="author-profile">
            <h3>About the Author</h3>
            <img src="author-avatar.jpg" alt="Jane Smith">
            <p>Jane Smith is a senior web developer with over 10 years of experience...</p>
            <a href="/about/jane">Read more →</a>
        </section>

        <section class="newsletter-signup">
            <h3>Subscribe to Newsletter</h3>
            <p>Get the latest articles delivered to your inbox</p>
            <form action="/subscribe" method="post">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <button type="submit">Subscribe</button>
            </form>
        </section>

        <section class="popular-tags">
            <h3>Popular Tags</h3>
            <nav>
                <ul>
                    <li><a href="/tag/javascript">JavaScript (25)</a></li>
                    <li><a href="/tag/css">CSS (18)</a></li>
                    <li><a href="/tag/html">HTML (15)</a></li>
                    <li><a href="/tag/react">React (12)</a></li>
                    <li><a href="/tag/nodejs">Node.js (10)</a></li>
                </ul>
            </nav>
        </section>

        <section class="related-sites">
            <h3>Related Sites</h3>
            <nav>
                <ul>
                    <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
                    <li><a href="https://css-tricks.com">CSS-Tricks</a></li>
                    <li><a href="https://javascript.info">JavaScript.info</a></li>
                </ul>
            </nav>
        </section>
    </aside>

    <!-- Site Footer -->
    <footer class="site-footer">
        <div class="footer-content">
            <section class="footer-about">
                <h3>Tech Blog</h3>
                <p>Your trusted source for web development tutorials, articles, and insights. We help developers stay updated with the latest technologies and best practices.</p>
                <nav class="social-links">
                    <a href="https://twitter.com/techblog" aria-label="Twitter">Twitter</a>
                    <a href="https://facebook.com/techblog" aria-label="Facebook">Facebook</a>
                    <a href="https://github.com/techblog" aria-label="GitHub">GitHub</a>
                </nav>
            </section>

            <section class="footer-categories">
                <h3>Categories</h3>
                <nav>
                    <ul>
                        <li><a href="/category/html">HTML</a></li>
                        <li><a href="/category/css">CSS</a></li>
                        <li><a href="/category/javascript">JavaScript</a></li>
                        <li><a href="/category/react">React</a></li>
                        <li><a href="/category/nodejs">Node.js</a></li>
                    </ul>
                </nav>
            </section>

            <section class="footer-resources">
                <h3>Resources</h3>
                <nav>
                    <ul>
                        <li><a href="/tutorials">Tutorials</a></li>
                        <li><a href="/cheatsheets">Cheatsheets</a></li>
                        <li><a href="/tools">Developer Tools</a></li>
                        <li><a href="/books">Recommended Books</a></li>
                    </ul>
                </nav>
            </section>

            <section class="footer-contact">
                <h3>Contact</h3>
                <address>
                    <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                    <p>Twitter: <a href="https://twitter.com/techblog">@techblog</a></p>
                    <p>GitHub: <a href="https://github.com/techblog">techblog</a></p>
                </address>
            </section>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2024 Tech Blog. All rights reserved.</p>
            <nav class="legal-links">
                <a href="/privacy">Privacy Policy</a> | 
                <a href="/terms">Terms of Service</a> | 
                <a href="/cookie-policy">Cookie Policy</a> | 
                <a href="/sitemap">Sitemap</a>
            </nav>
        </div>
    </footer>
</body>
</html>

Coming Up Next:¶

HTML5 APIs: Geolocation, Canvas, Local Storage
CSS Semantic Styling: Styling semantic elements
JavaScript DOM: Manipulating semantic elements
Accessibility: Advanced ARIA techniques

Prerequisites for Advanced Topics:¶

Semantic Structure: Understanding all semantic elements
Document Outline: Proper heading hierarchy
Accessibility Basics: Screen reader considerations

💡 Pro Tips¶

Learning Strategy:¶

Build Real Pages: Create complete semantic layouts
Test Accessibility: Use screen readers to test your structure
Validate HTML: Use W3C validator for semantic correctness
Study Examples: Analyze professional websites' structure

Professional Tips:¶

Content First: Structure based on content meaning
Mobile Responsive: Ensure semantic structure works on all devices
SEO Optimized: Use semantic tags for better search rankings
Future Proof: Semantic HTML adapts to new technologies

📊 Semantic Element Reference¶

Document Structure:¶

Element	Purpose	Usage
`<header>`	Introductory content	Page, section, article headers
`<nav>`	Navigation links	Main nav, breadcrumbs, pagination
`<main>`	Primary content	One per page, unique content
`<footer>`	Closing information	Page, section, article footers

Content Grouping:¶

Element	Purpose	Usage
`<article>`	Self-contained content	Blog posts, news, forum posts
`<section>`	Themed content	Chapters, topics, categories
`<aside>`	Supplementary content	Sidebars, pull quotes, ads

Text-level Semantics:¶

Element	Purpose	Usage
`<time>`	Date/time	Publication dates, events
`<address>`	Contact info	Author info, business details
`<cite>`	Work title	Book names, article titles
`<blockquote>`	Quotations	Long quotes, testimonials

💡 Mentor's Final Note: Semantic HTML is the language of meaning on the web! It transforms your code from a visual layout into a meaningful document that browsers, search engines, and assistive technologies can understand. Master semantic HTML, and you'll create websites that are accessible, SEO-friendly, and built for the future! 🌟

📚 Summary¶

You Learned:¶

The importance and benefits of semantic HTML
All major HTML5 semantic elements
Proper document structure and hierarchy
Accessibility and SEO best practices
Real-world semantic implementations

Next Tutorial:¶

HTML5 APIs - Learn modern HTML5 APIs and features

Purpose: Complete guide to HTML5 semantic tags Practice Time: 35-45 minutes Next Lesson: HTML5 APIs