HTML Advanced (Part 1)

Master advanced HTML concepts including semantic web, accessibility, web components, and modern HTML APIs.

HTML Advanced Content

This content has been divided into two parts for better readability:

Semantic Web and HTML

The semantic web is an extension of the World Wide Web that aims to make web content more meaningful to computers. HTML introduced many semantic elements that help define the structure and meaning of web content.

Why Semantics Matter

Using semantic HTML provides several benefits:

Semantic Sectioning Elements

HTML introduced several elements for defining the structure of a document:

Element Description Usage
<header> Represents introductory content or navigational aids Page headers, section headers, article headers
<nav> Represents a section of navigation links Main navigation, sidebar navigation, pagination
<main> Represents the main content of the document Primary content area (only one per page)
<article> Represents a self-contained composition Blog posts, news articles, forum posts, comments
<section> Represents a standalone section of content Chapters, tabbed content, grouped content
<aside> Represents content tangentially related to the content around it Sidebars, pull quotes, advertising, related articles
<footer> Represents a footer for its nearest sectioning content or sectioning root element Page footers, section footers, article footers 
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <p>Published on <time datetime="2025-03-15">March 15, 2025</time></p>
            </header>
            
            <section>
                <h3>Introduction</h3>
                <p>Article introduction...</p>
            </section>
            
            <section>
                <h3>Main Content</h3>
                <p>Article main content...</p>
            </section>
            
            <footer>
                <p>Author: John Doe</p>
            </footer>
        </article>
        
        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a href="#">Related Article 1</a></li>
                <li><a href="#">Related Article 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>

Other Semantic Elements

HTML introduced many other semantic elements for specific content types:

Element Description Example
<figure> and <figcaption> Represents self-contained content with an optional caption <figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption text</figcaption>
</figure>
<time> Represents a specific period in time <time datetime="2025-03-15T14:30:00Z">March 15, 2025</time>
<mark> Represents text highlighted for reference Search results for <mark>keyword</mark>
<details> and <summary> Creates a disclosure widget <details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>
<address> Represents contact information <address>
  Email: <a href="mailto:[email protected]">[email protected]</a>
</address>
<blockquote> and <cite> Represents a section quoted from another source <blockquote cite="https://example.com">
  <p>Quoted text</p>
  <cite>Source Title</cite>
</blockquote>

Microdata and Structured Data

Microdata is a set of attributes that can be added to HTML elements to provide additional semantic information for search engines and other applications.

<article itemscope itemtype="http://schema.org/BlogPosting">
    <header>
        <h2 itemprop="headline">Article Title</h2>
        <p>Published on <time itemprop="datePublished" datetime="2025-03-15">March 15, 2025</time></p>
    </header>
    
    <div itemprop="articleBody">
        <p>Article content...</p>
    </div>
    
    <footer>
        <p>Author: <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">John Doe</span>
        </span></p>
    </footer>
</article>

Common microdata attributes include:

Schema.org

Schema.org is a collaborative project that provides a collection of schemas for structured data markup. It's supported by major search engines like Google, Bing, Yahoo, and Yandex.

Common schema types include:

  • Article, BlogPosting, NewsArticle
  • Person, Organization
  • Product, Offer, Review
  • Event, Place
  • Recipe, Movie, Book
  • WebPage, WebSite

JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) is another way to include structured data in your HTML. It's often preferred because it doesn't require modifying your HTML markup.

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "headline": "Article Title",
    "datePublished": "2025-03-15",
    "articleBody": "Article content...",
    "author": {
        "@type": "Person",
        "name": "John Doe"
    }
}
</script>

Accessibility (WAI-ARIA)

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.

Why Accessibility Matters

ARIA Roles

ARIA roles define what an element is or does. They help assistive technologies understand the purpose of elements, especially when HTML doesn't provide an appropriate semantic element.

Role Category Examples Usage
Landmark Roles banner, navigation, main, complementary, contentinfo Define regions of the page
Document Structure Roles article, heading, list, listitem, region Define the structure of content
Widget Roles button, checkbox, combobox, menu, tab Define interactive elements
Live Region Roles alert, log, status, timer Define regions that update dynamically 
<!-- Using ARIA roles with non-semantic elements -->
<div role="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

<!-- Better approach: Use semantic HTML with implicit roles -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

First Rule of ARIA

The first rule of ARIA is: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

In other words, prefer semantic HTML elements over ARIA attributes whenever possible.

ARIA States and Properties

ARIA states and properties provide additional information about elements and their relationships.

Category Examples Usage
Widget States aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-selected Define the state of interactive elements
Widget Properties aria-label, aria-placeholder, aria-required, aria-valuemin, aria-valuemax Define properties of interactive elements
Live Region Properties aria-live, aria-atomic, aria-relevant Define how dynamic content updates are handled
Relationship Properties aria-controls, aria-describedby, aria-labelledby, aria-owns Define relationships between elements 
<!-- Custom checkbox with ARIA -->
<div role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="check-label">
    <!-- Visual checkbox representation -->
</div>
<span id="check-label">Subscribe to newsletter</span>

<!-- Accessible form with ARIA -->
<form>
    <div>
        <label id="name-label" for="name">Name:</label>
        <input type="text" id="name" aria-labelledby="name-label" aria-required="true">
    </div>
    
    <div>
        <label id="email-label" for="email">Email:</label>
        <input type="email" id="email" aria-labelledby="email-label" aria-required="true">
        <span id="email-error" aria-live="polite"></span>
    </div>
    
    <button type="submit" aria-describedby="submit-desc">Submit</button>
    <div id="submit-desc" hidden>Submits the form and sends your information</div>
</form>

Accessible Navigation

Creating accessible navigation is crucial for users who rely on keyboard navigation or screen readers. 

<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<header>
    <nav aria-label="Main Navigation">
        <ul>
            <li><a href="#" aria-current="page">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#" aria-haspopup="true" aria-expanded="false">Services</a>
                <ul aria-label="Services Submenu">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<main id="main-content" tabindex="-1">
    <!-- Main content here -->
</main>

Accessible Rich Internet Applications

Complex web applications often require additional ARIA attributes to ensure accessibility.

<!-- Tabs component -->
<div class="tabs">
    <div role="tablist" aria-label="Programming Languages">
        <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">HTML</button>
        <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">CSS</button>
        <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">JavaScript</button>
    </div>
    
    <div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
        <p>HTML content...</p>
    </div>
    
    <div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
        <p>CSS content...</p>
    </div>
    
    <div id="panel-3" role="tabpanel" aria-labelledby="tab-3" hidden>
        <p>JavaScript content...</p>
    </div>
</div>

<!-- Modal dialog -->
<div id="dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc" aria-modal="true" hidden>
    <header>
        <h2 id="dialog-title">Confirmation</h2>
        <button aria-label="Close dialog" onclick="closeDialog()">×</button>
    </header>
    
    <div id="dialog-desc">
        <p>Are you sure you want to proceed?</p>
    </div>
    
    <div class="dialog-buttons">
        <button onclick="confirm()">Yes</button>
        <button onclick="closeDialog()">No</button>
    </div>
</div>

Testing Accessibility

Testing your website for accessibility is an essential part of the development process.

Manual Testing

Automated Testing

WCAG Compliance

The Web Content Accessibility Guidelines (WCAG) provide a set of recommendations for making web content more accessible. The guidelines are organized around four principles:

  • Perceivable: Information and user interface components must be presentable to users in ways they can perceive
  • Operable: User interface components and navigation must be operable
  • Understandable: Information and the operation of the user interface must be understandable
  • Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies

WCAG has three levels of conformance: A (minimum), AA (mid-range), and AAA (highest).

Continue to Part 2

Continue to Part 2 to learn about Web Components, HTML APIs, Performance Optimization, and SEO Best Practices.