Unit
- Semantic elements: HTML5 introduced tags like
<header>,<nav>,<main>,<article>,<section>, and<footer>that describe content meaning rather than presentation. Browsers and assistive technologies use these to navigate page structure, improving accessibility and SEO. - Document outline: A well-structured page uses a single
<h1>per page, followed by hierarchical headings (<h2>to<h6>) that mirror the logical content tree. This enables screen readers to present a table of contents and helps search engines understand topic importance. - Landmark roles: Each semantic section automatically provides ARIA landmark roles; for example,
<nav>maps torole='navigation'. This eliminates the need for extra ARIA attributes in most cases and ensures consistent behavior across browsers. - Forms and input types: HTML5 added native input types like
email,url,tel,date, andrange. Browsers provide built-in validation and appropriate on-screen keyboards on mobile devices, reducing the need for JavaScript validation. - Multimedia embedding: The
<video>and<audio>elements support multiple source formats and include controls attribute. Using these instead of third-party plugins improves performance and reduces vulnerabilities. - Accessibility attributes: Provide
alttext on all<img>tags,labelelements for form controls, andaria-labelwhen visual labels are absent. These attributes are critical for users who rely on screen readers or braille displays. - Metadata and linking: The
<head>section contains<meta>tags for character encoding, viewport, description, and Open Graph data. Proper metadata enhances how social platforms and search engines present the page. - Validation and linting: Tools like the W3C HTML Validator and ESLint with
eslint-plugin-htmlcatch structural errors early. Consistent indentation and closing tags reduce debugging time across teams.
Code Example
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title/Semantic Page Example</title>
</head>
<body>
<header>
<h1/My Blog</h1>
<nav><a href='/'>Home</a></nav>
</header>
<main>
<article>
<h2/Post Title</h2>
<p/Content here.</p>
</article>
</main>
<footer><p/Copyright 2025</p></footer>
</body>
</html>The example demonstrates a semantic document outline with landmark regions. The <header>, <nav>, <main>, <article>, and <footer> elements clearly separate page zones, which aids screen reader navigation and search engine indexing.
Security Consideration
MEDIUM RISK
Vulnerability: Cross-Site Scripting (XSS) via user-generated content placed in HTML without escaping.
Mitigation: Always use textContent or innerText properties (not innerHTML) when inserting untrusted data. For dynamically created HTML, use sanitization libraries like DOMPurify.
Reference: OWASP XSS Prevention Cheat Sheet
Quick Revision
- Semantic HTML elements improve accessibility, SEO, and code readability.
- Use landmark roles and proper heading hierarchy to create a logical content outline.
- Native input types provide built-in validation and better mobile experiences.
- Always validate HTML structure with automated tools.
- Sanitize any user input before injecting into the DOM to prevent XSS.