HTML5 Semantic Elements, Forms, and Accessibility

HTML5 Semantic Elements

Why Semantic HTML Matters

Semantic elements describe their meaning to both browsers and developers. They improve:

SEO - Search engines understand page structure
Accessibility - Screen readers can navigate the page
Maintainability - Code is self-documenting

Semantic Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Page - My Store</title>
</head>
<body>
    <header>
        <nav aria-label="Main Navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/catalog">Catalog</a></li>
                <li><a href="/cart">Cart</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Product Name</h1>
            
            <section aria-labelledby="product-details">
                <h2 id="product-details">Product Details</h2>
                <p>Product description here...</p>
            </section>

            <section aria-labelledby="reviews">
                <h2 id="reviews">Customer Reviews</h2>
                <div class="review">
                    <h3>Great product!</h3>
                    <p>Review text...</p>
                </div>
            </section>
        </article>

        <aside aria-label="Related Products">
            <h2>Related Products</h2>
            <!-- Related product grid -->
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 My Store. All rights reserved.</p>
    </footer>
</body>
</html>

Semantic vs Non-Semantic

<!-- BAD: Non-semantic -->
<div class="header">
    <div class="nav">
        <div class="nav-item">Home</div>
    </div>
</div>
<div class="content">
    <div class="title">Page Title</div>
</div>

<!-- GOOD: Semantic -->
<header>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>
<main>
    <h1>Page Title</h1>
</main>

Heading Hierarchy

<!-- Correct heading hierarchy -->
<h1>Main Page Title (one per page)</h1>
    <h2>Section Title</h2>
        <h3>Subsection Title</h3>
        <h3>Another Subsection</h3>
    <h2>Another Section</h2>
        <h3>Subsection</h3>

<!-- WRONG: Don't skip levels -->
<h1>Title</h1>
<h4>Subsection</h4> <!-- Skip h2 and h3! -->

Magento Template HTML

Magento uses PHTML templates with PHP for dynamic content:

<!-- Magento template: catalog/product/view.phtml -->
<?php
/** @var \Magento\Catalog\ViewModel\Product \$viewModel */
$viewModel = $block->getViewModel();
?>
<article class="product-view" itemscope itemtype="http://schema.org/Product">
    <header class="product-header">
        <h1 class="product-name" itemprop="name">
            <?= $escaper->escapeHtml($product->getName()) ?>
        </h1>
    </header>

    <section class="product-info">
        <div class="product-image">
            <?= $block->getImage($product, 'product_base_image')->toHtml() ?>
        </div>
        
        <div class="product-details">
            <p class="price" itemprop="price" content="<?= $product->getPrice() ?>">
                <?= $viewModel->formatPrice($product->getPrice()) ?>
            </p>
            
            <div class="description" itemprop="description">
                <?= $viewModel->getShortDescription() ?>
            </div>
        </div>
    </section>
</article>

HTML Forms and Validation

Building Accessible Forms

Forms are critical for e-commerce. Proper HTML forms include labels, validation, and ARIA attributes.

Complete Form Example

<form action="/checkout/shipping" method="post" novalidate>
    <!-- Hidden fields -->
    <input type="hidden" name="form_key" value="<?= $formKey ?>">
    
    <!-- Fieldset groups related fields -->
    <fieldset>
        <legend>Shipping Address</legend>
        
        <div class="field required">
            <label for="firstname">First Name <span class="required">*</span></label>
            <input type="text"
                   id="firstname"
                   name="firstname"
                   required
                   autocomplete="given-name"
                   aria-required="true"
                   aria-describedby="firstname-error">
            <span id="firstname-error" class="field-error" role="alert"></span>
        </div>

        <div class="field required">
            <label for="email">Email Address <span class="required">*</span></label>
            <input type="email"
                   id="email"
                   name="email"
                   required
                   autocomplete="email"
                   aria-required="true"
                   placeholder="you@example.com">
        </div>

        <div class="field required">
            <label for="telephone">Phone Number <span class="required">*</span></label>
            <input type="tel"
                   id="telephone"
                   name="telephone"
                   required
                   autocomplete="tel"
                   pattern="[0-9+\-\s]{7,15}"
                   title="Please enter a valid phone number">
        </div>

        <div class="field required">
            <label for="country">Country <span class="required">*</span></label>
            <select id="country" name="country_id" required>
                <option value="">-- Select Country --</option>
                <option value="US">United States</option>
                <option value="GB">United Kingdom</option>
                <option value="DE">Germany</option>
            </select>
        </div>

        <div class="field required">
            <label for="postcode">ZIP/Postal Code <span class="required">*</span></label>
            <input type="text"
                   id="postcode"
                   name="postcode"
                   required
                   autocomplete="postal-code"
                   inputmode="numeric"
                   pattern="[0-9A-Za-z\- ]{3,10}">
        </div>
    </fieldset>

    <div class="actions">
        <button type="submit" class="action primary">
            Continue to Payment
        </button>
    </div>
</form>

HTML5 Validation Attributes

Attribute	Purpose	Example
required	Field must be filled	`<input required>`
type	Input type validation	`type="email"`, `type="url"`
pattern	Regex pattern	`pattern="[0-9]{5}"`
min/max	Number range	`min="0" max="100"`
minlength/maxlength	String length	`minlength="3" maxlength="50"`
autocomplete	Browser autofill	`autocomplete="email"`
inputmode	Mobile keyboard	`inputmode="numeric"`

Custom Validation with JavaScript

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const form = e.target;
    const email = form.querySelector('#email');
    const error = document.querySelector('#email-error');

    // Custom email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email.value)) {
        e.preventDefault();
        error.textContent = 'Please enter a valid email address';
        email.setAttribute('aria-invalid', 'true');
        email.focus();
    }
});
</script>

Input Types for E-Commerce

<!-- Text inputs -->
<input type="text" name="name">           <!-- General text -->
<input type="email" name="email">        <!-- Email validation -->
<input type="tel" name="phone">          <!-- Phone keyboard -->
<input type="url" name="website">        <!-- URL validation -->

<!-- Number inputs -->
<input type="number" name="qty" min="1" max="100" value="1">  <!-- Quantity -->
<input type="range" name="rating" min="1" max="5">  <!-- Rating slider -->

<!-- Date inputs -->
<input type="date" name="birthday">     <!-- Date picker -->
<input type="month" name="expiry">      <!-- Month picker -->

<!-- Other -->
<input type="search" name="q">          <!-- Search box -->
<input type="color" name="color">        <!-- Color picker -->
<input type="file" name="avatar">        <!-- File upload -->

Key Takeaway

Every input must have a label, every form must be accessible, and HTML5 validation attributes reduce JavaScript code. Always test forms with screen readers and keyboard navigation.

Web Accessibility (WCAG Basics)

Why Accessibility Matters

Web accessibility ensures that websites can be used by everyone, including people with disabilities. It's also a legal requirement in many countries.

WCAG Principles (POUR)

Principle	Description	Example
Perceivable	Content must be presentable	Alt text for images, captions for video
Operable	UI must be navigable	Keyboard navigation, no time limits
Understandable	Content must be understandable	Clear labels, predictable behavior
Robust	Content must work with assistive tech	Valid HTML, ARIA attributes

ARIA Attributes

<!-- Roles -->
<nav role="navigation" aria-label="Main">  <!-- Explicit role -->
<div role="alert">Error message</div>       <!-- Live region -->
<div role="tablist">                        <!-- Tab interface -->
    <button role="tab" aria-selected="true">Tab 1</button>
    <button role="tab" aria-selected="false">Tab 2</button>
</div>

<!-- States -->
<button aria-expanded="false" aria-controls="menu">
    Menu
</button>
<nav id="menu" aria-hidden="true">...</nav>

<!-- Properties -->
<input aria-required="true" aria-invalid="false">
<img alt="Product photo" src="product.jpg">
<div aria-describedby="help-text">...</div>
<span id="help-text">Enter your full address</span>

Accessible Images

<!-- Informative image - needs alt text -->
<img src="product.jpg" alt="Red running shoe, Nike Air Max 2026">

<!-- Decorative image - empty alt -->
<img src="decorative-border.png" alt="">

<!-- Complex image with long description -->
<figure>
    <img src="chart.png" alt="Sales chart showing 20% growth" aria-describedby="chart-desc">
    <figcaption id="chart-desc">
        Sales increased 20% from Q1 to Q2, with biggest growth in electronics.
    </figcaption>
</figure>

Keyboard Navigation

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

<!-- Focusable elements -->
<button tabindex="0">Click me</button>      <!-- In tab order -->
<div tabindex="-1" id="modal">Modal</div>   <!-- Programmatically focusable -->
<div tabindex="0">Scrollable div</div>       <!-- In tab order -->

<!-- Focus styles -->
<style>
:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0066cc;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}
</style>

Magento Accessibility Features

Magento includes built-in accessibility:

ARIA labels on navigation elements
Focus management in modals and dropdowns
Alt text on product images
Label associations on form fields
Color contrast meeting WCAG AA standards
Keyboard navigation throughout the checkout

Key Takeaway

Accessibility is not optional. Use semantic HTML, add ARIA attributes where needed, ensure keyboard navigation works, and always test with screen readers. Magento provides many accessibility features out of the box.

Flashcards

Question

What are semantic HTML elements?

Click to reveal answer

Answer

Elements that describe their meaning and purpose: header, nav, main, article, section, aside, footer. They improve SEO, accessibility, and code readability.

Question

What does the <main> element do?

Click to reveal answer

Answer

Represents the main content of the page, distinct from headers, footers, and sidebars. There should be one <main> per page. Screen readers use it to skip navigation.

Question

What is ARIA?

Click to reveal answer

Answer

Accessible Rich Internet Attributes. They provide additional information to screen readers about element roles, states, and properties when HTML alone isn't sufficient.

Question

What input type should you use for phone numbers?

Click to reveal answer

Answer

type="tel" - It shows the phone keypad on mobile devices and semantically marks the field as a telephone number.

Question

What is the purpose of the 'required' attribute?

Click to reveal answer

Answer

HTML5 attribute that prevents form submission if the field is empty. Browser shows a validation message. Example: <input required>.

Question

What does autocomplete attribute do?

Click to reveal answer

Answer

Helps browsers autofill form fields with saved user data. Examples: autocomplete="email", autocomplete="shipping postal-code", autocomplete="cc-number".

Question

What is the alt attribute for images?

Click to reveal answer

Answer

Provides text description for screen readers and displays when image fails to load. Informative images need descriptive alt text; decorative images use empty alt="".

Question

How does Magento use PHTML templates?

Click to reveal answer

Answer

PHTML files combine PHP and HTML. They use $block objects to get data and $escaper to safely output HTML. Example: <?= $escaper->escapeHtml($product->getName()) ?>.

Revision Notes

Key Takeaways

1. Semantic elements (header, nav, main, article, section, footer) describe content meaning
2. Every form input must have an associated <label> element
3. HTML5 validation attributes (required, type, pattern) reduce JavaScript code
4. ARIA attributes enhance accessibility when HTML isn't sufficient
5. Heading hierarchy should never skip levels (h1 -> h2 -> h3)
6. alt text on images is required for accessibility and SEO
7. Magento PHTML templates use PHP with $block objects for dynamic content

Interview Tips

• Explain the difference between semantic and non-semantic HTML
• List the key ARIA attributes and when to use them
• Describe proper heading hierarchy and why it matters
• Know how Magento PHTML templates work
• Understand form validation (client-side HTML5 and server-side)

Cheat Sheet

HTML5 Cheat Sheet

Semantic Elements:
header, nav, main, article, section, aside, footer, figure, figcaption

Form Input Types:
text, email, tel, url, number, date, search, password, file, color, range

Validation Attributes:
required, pattern, min, max, minlength, maxlength, autocomplete

ARIA Basics:
aria-label: Accessible name
aria-describedby: References helper text
aria-required: Required field
aria-invalid: Validation state
aria-expanded: Expandable element state

Magento Templates:

<?= $escaper->escapeHtml($block->getData('key')) ?>
<?= $block->getProductUrl() ?>