Skip to main content
Mapagam

19 SECTIONS · 356 TOPICS

HTML Roadmap

  1. HTML Document Structure and Syntax

    1. 1. HTML5 Document Structure and Boilerplate (<!DOCTYPE html>)
    2. Example: Complete HTML5 boilerplate structure
    3. 2. Doctype Declarations and Legacy Support
    4. 3. Character Encoding (UTF-8) and Meta Setup
    5. Common Viewport Settings
    6. Character Encoding Options
    7. Example: Complete meta setup for modern websites
    8. 4. Element Syntax and Nesting Rules
    9. Block vs Inline Nesting
    10. Special Nesting Rules
    11. Example: Correct element nesting patterns
    12. 5. Void Elements (<img>, <br>, <hr>) and Self-closing Tags
    13. Example: Void elements in practical use
    14. 6. HTML Comments (<!-- -->) and Conditional Comments
    15. Conditional Comment Operators
    16. Example: Various comment types and uses
    17. Section 1 Key Takeaways

  2. HTML5 Semantic Elements

    1. 1. Document Sectioning (<header>, <nav>, <main>, <aside>, <footer>)
    2. Usage Rules
    3. Accessibility Benefits
    4. Example: Complete page structure with semantic elements
    5. 2. Content Sectioning (<section>, <article>, <hgroup>)
    6. <section> vs <article>
    7. Example: Proper use of section and article
    8. 3. Heading Hierarchy (h1-h6) and Document Outline
    9. Example: Proper heading hierarchy
    10. 4. Address Element (<address>) and Contact Information
    11. Example: Various address element uses
    12. 5. Time and Date Elements (<time> datetime)
    13. Common Date Formats
    14. Duration Examples
    15. Example: Time element in various contexts
    16. 6. Ruby Annotations (<ruby>, <rt>, <rp>) for East Asian Typography
    17. Browser Support
    18. Example: Ruby annotations for different languages
    19. Section 2 Key Takeaways

  3. HTML Text and Typography Elements

    1. 1. Block-level Text Elements (<p>, <div>, <blockquote>)
    2. Example: Text block elements usage
    3. 2. List Elements (<ul>, <ol>, <li>, <dl>, <dt>, <dd>)
    4. Ordered List Attributes
    5. Example: Various list types and configurations
    6. 3. Preformatted Content (<pre>, <code>, <samp>, <kbd>)
    7. Common Patterns
    8. Example: Preformatted and code elements
    9. 4. Inline Text Semantics (<span>, <em>, <strong>, <mark>)
    10. Use Cases by Element
    11. Example: Inline text semantics in context
    12. 5. Text Modifications (<del>, <ins>, <sub>, <sup>, <small>)
    13. del/ins Attributes
    14. Example: Text modification elements
    15. 6. Abbreviations and Data (<abbr>, <data>, <var>, <time>)
    16. Example: Abbreviations and data elements
    17. Section 3 Key Takeaways

  4. HTML Attributes - Global Properties

    1. 1. Core Global Attributes (id, class, title, lang)
    2. Tabindex Values
    3. Example: Core global attributes usage
    4. 2. Event Handler Attributes (onclick, onload, onchange)
    5. Common Mouse Events
    6. Example: Inline event handlers (avoid in production)
    7. 3. Data Attributes (data-*) and Custom Properties
    8. JavaScript Access
    9. Example: Data attributes usage
    10. 4. Content Editable (contenteditable) and User Interaction
    11. InputMode Values
    12. Example: Content editable and user interaction
    13. 5. Draggable (draggable) and Drop Zone Attributes
    14. Drag Events (on dragged element)
    15. Drop Events (on drop target)
    16. Example: Drag and drop implementation
    17. 6. Hidden, Inert, and Visibility Controls
    18. Visibility Comparison
    19. Example: Visibility control attributes
    20. Section 4 Key Takeaways

  5. HTML Hyperlinks and Navigation

    1. 1. Anchor Elements (<a href>) and Link Types
    2. Link Types
    3. Target Values
    4. Example: Various link types and attributes
    5. 2. URL Schemes and Link Targets (target="_blank")
    6. Example: Different URL schemes
    7. 3. Rel Attributes (rel="nofollow", "noopener") and Link Relationships
    8. Example: Rel attribute usage
    9. 4. Download Links (download attribute) and File Handling
    10. Common File Types
    11. Example: Download links and file handling
    12. 5. Email (mailto:) and Telephone Links (tel:)
    13. Example: Email and telephone links
    14. 6. Navigation Patterns and Breadcrumbs
    15. Example: Navigation patterns
    16. Section 5 Key Takeaways

  6. HTML Images and Media Elements

    1. 1. Image Elements (<img src alt>) and Responsive Images
    2. Srcset Syntax
    3. Image Formats
    4. Example: Responsive images with srcset and sizes
    5. 2. Picture Element (<picture>) and Source Sets (srcset)
    6. Source Attributes
    7. Example: Picture element for art direction and formats
    8. 3. SVG Integration (<svg>) and Inline Graphics
    9. SVG Viewport Attributes
    10. Example: SVG integration methods
    11. 4. Audio Elements (<audio>) and Media Controls
    12. Audio Formats
    13. Preload Values
    14. Example: Audio elements with multiple sources
    15. 5. Video Elements (<video>) and Streaming Support
    16. Video Formats
    17. Track Element (Subtitles)
    18. Example: Video elements with advanced features
    19. 6. Canvas (<canvas>) and Graphics API Integration
    20. Canvas Context Types
    21. Example: Canvas element with 2D drawing
    22. 7. Object and Embed Elements (<object>, <embed>)
    23. Object Attributes
    24. Iframe Attributes
    25. Example: Object, embed, and iframe usage
    26. Section 6 Key Takeaways

  7. HTML Forms and Input Controls

    1. 1. Form Element (<form action method>) and Form Attributes
    2. Method Comparison
    3. Enctype Values
    4. Example: Form element with various attributes
    5. 2. Input Types (<input type>) and HTML5 Form Controls
    6. Example: Common input types
    7. 3. Select, Option, and Datalist Elements (<select>, <option>, <datalist>)
    8. Select Attributes
    9. Option Attributes
    10. Example: Select, option, optgroup, and datalist
    11. 4. Textarea (<textarea>) and Multi-line Input
    12. Wrap Values
    13. Example: Textarea configurations
    14. 5. Fieldset, Legend (<fieldset>, <legend>) and Form Grouping
    15. Fieldset Attributes
    16. Example: Fieldset and legend usage
    17. 6. Label Association (<label for>) and Accessibility
    18. Label Attributes
    19. Example: Label association methods
    20. 7. Form Validation Attributes (required, pattern) and Patterns
    21. Common Patterns
    22. Validation States (CSS)
    23. Example: Form validation attributes
    24. Section 7 Key Takeaways

  8. HTML5 Form Validation

    1. 1. Required Fields (required attribute) and Validation States
    2. Validation Timing
    3. Validity States (JS)
    4. Example: Required fields and validation states
    5. 2. Pattern Validation (pattern attribute) and Regular Expressions
    6. Example: Pattern validation with helpful messages
    7. 3. Custom Validation Messages (setCustomValidity) and Styling
    8. ValidityState Properties
    9. Example: Custom validation messages and styling
    10. 4. HTML5 Input Constraints (min, max, step) and Limits
    11. Step Values
    12. Accept MIME Types
    13. Example: Input constraints in practice
    14. 5. Form Submission and Method Handling (GET vs POST)
    15. Form Submission Events
    16. Submit Methods (JS)
    17. Example: Form submission handling
    18. 6. Form Data Encoding (enctype) and File Uploads
    19. File Input Attributes
    20. FormData Methods
    21. Example: File uploads and form data encoding
    22. Section 8 Key Takeaways

  9. HTML Tables - Tabular Data

    1. 1. Table Structure (<table>, <thead>, <tbody>, <tfoot>)
    2. Table Attributes
    3. Example: Proper table structure
    4. 2. Table Rows and Cells (<tr>, <td>, <th>)
    5. TH Scope Attribute
    6. Cell Alignment (CSS)
    7. Example: Table rows and cells with scope
    8. 3. Cell Spanning (colspan, rowspan attributes)
    9. Colspan Example (visual)
    10. Rowspan Example (visual)
    11. Example: Colspan and rowspan usage
    12. 4. Table Captions (<caption>) and Summaries
    13. Caption Styling (CSS)
    14. Example: Table captions and descriptions
    15. 5. Sortable Tables and Interactive Features
    16. ARIA Attributes for Tables
    17. Example: Sortable table with JavaScript
    18. 6. Responsive Table Techniques
    19. Example: Responsive table implementations
    20. Section 9 Key Takeaways

  10. HTML Interactive Elements

    1. 1. Button Elements (<button>) and Button Types (submit, reset, button)
    2. Button vs Input Button
    3. Button Attributes
    4. Example: Button types and usage
    5. 2. Details and Summary (<details>, <summary>) Disclosure Widgets
    6. Details Attributes
    7. Events
    8. Example: Details and summary widgets
    9. 3. Dialog and Modal Elements (<dialog>)
    10. Dialog Properties
    11. Dialog Events
    12. Example: Dialog and modal implementations
    13. 4. Progress (<progress>) and Meter (<meter>) Indicators
    14. Meter Attributes
    15. Example: Progress and meter elements
    16. 5. Content Editable (contenteditable) and Rich Text Editing
    17. Document.execCommand (deprecated)
    18. Selection API (modern)
    19. Example: Content editable implementations
    20. 6. Drag and Drop API Integration (draggable)
    21. DataTransfer Methods
    22. EffectAllowed Values
    23. Example: Drag and drop implementations
    24. Section 10 Key Takeaways

  11. HTML5 APIs - Advanced Features

    1. 1. Web Storage API (localStorage, sessionStorage)
    2. Example: Web Storage operations with JSON serialization
    3. 2. Geolocation API Integration (navigator.geolocation)
    4. Example: Geolocation with error handling and options
    5. 3. File API and File Handling (FileReader)
    6. Example: File input with preview and validation
    7. Example: Read text file and parse JSON
    8. Example: Drag and drop file upload
    9. 4. History API (pushState, replaceState) and Navigation Management
    10. Example: Single Page Application (SPA) routing with History API
    11. 5. Web Workers and Shared Workers
    12. Example: Web Worker for heavy computation
    13. Example: Shared Worker for cross-tab communication
    14. 6. Service Workers and Offline Functionality (PWA)
    15. Example: Service Worker registration and basic caching
    16. Example: Service Worker with caching strategies (service-worker.js)
    17. Section 11 Key Takeaways

  12. HTML Web Components - Custom Elements

    1. 1. Custom Element Registration (customElements.define) and Lifecycle
    2. Example: Autonomous custom element with lifecycle
    3. Example: Customized built-in element
    4. 2. Shadow DOM and Encapsulation (attachShadow)
    5. Example: Shadow DOM with style encapsulation
    6. Example: Access and manipulation
    7. 3. HTML Templates (<template>) and Content Cloning
    8. Example: Template with cloning and population
    9. Example: Template in Web Component
    10. 4. Slot Elements (<slot>) and Content Projection
    11. Example: Named and default slots
    12. Example: Slot API and slotchange event
    13. Example: Multiple named slots with fallback
    14. 5. Custom Attributes and Properties
    15. Example: Reflected properties and boolean attributes
    16. Example: Data attributes and dataset API
    17. 6. Web Component Best Practices
    18. Example: Production-ready component with best practices
    19. Section 12 Key Takeaways

  13. HTML SEO and Metadata Optimization

    1. 1. Essential Meta Tags (<meta name description>) and Document Info
    2. Example: Complete SEO-optimized head section
    3. 2. Open Graph Protocol (og:title, og:image) Implementation
    4. Example: Complete Open Graph implementation
    5. Example: Different content types
    6. 3. Twitter Card Metadata (twitter:card)
    7. Example: Twitter Card with fallback to Open Graph
    8. Example: Twitter Player Card for video
    9. Example: Twitter App Card
    10. 4. Structured Data (JSON-LD, Schema.org, Microdata)
    11. Example: Article structured data (JSON-LD)
    12. Example: Product with reviews (JSON-LD)
    13. Example: Breadcrumb navigation (JSON-LD)
    14. Example: FAQ page (JSON-LD)
    15. Example: Microdata format (alternative to JSON-LD)
    16. 5. Canonical URLs (<link rel="canonical">) and Duplicate Content
    17. Example: Canonical URL implementations
    18. Example: Complete duplicate content strategy
    19. 6. Sitemap and Robot Instructions (robots.txt)
    20. Example: XML Sitemap (sitemap.xml)
    21. Example: Sitemap Index for multiple sitemaps
    22. Example: robots.txt file
    23. Example: Link to sitemap in HTML
    24. Section 13 Key Takeaways

  14. HTML Accessibility (A11y)

    1. 1. Semantic HTML for Screen Readers
    2. Example: Semantic page structure for screen readers
    3. 2. ARIA Roles (role attribute), States, and Properties
    4. Example: Custom button with ARIA
    5. Example: Accessible tabs with ARIA
    6. Example: Live regions for dynamic updates
    7. 3. Keyboard Navigation (tabindex) and Focus Management
    8. Example: Skip to main content link
    9. Example: Focus trap in modal dialog
    10. Example: Roving tabindex for radio group
    11. 4. Alternative Text (alt attribute) and Media Descriptions
    12. Example: Image Alt Text Guidelines
    13. Example: Video with Captions and Audio Description
    14. Example: Accessible SVG and Icon Fonts
    15. 5. Form Accessibility (aria-label, aria-describedby) and Error Handling
    16. Example: Accessible Form with Validation
    17. Example: Error Summary and Focus Management
    18. Example: Autocomplete Attributes
    19. 6. Color Contrast and Visual Accessibility (WCAG)
    20. Example: Color Contrast Examples
    21. Example: Not Relying on Color Alone
    22. Example: Focus Indicators and Reduced Motion
    23. Example: Text Over Images
    24. Section 14: Key Takeaways

  15. HTML Performance Optimization

    1. 1. Critical Resource Loading Strategies
    2. Example: Critical CSS inline with deferred stylesheet loading
    3. 2. Lazy Loading Images (loading="lazy") and Media
    4. Example: Native lazy loading with responsive images
    5. 3. Resource Hints (<link rel="preload prefetch dns-prefetch">)
    6. Example: Comprehensive resource hints implementation
    7. 4. Script Loading (async, defer attributes) and Performance
    8. Example: Script loading strategies comparison
    9. 5. DOM Optimization and Minimal Markup
    10. Bad: Excessive DOM depth and nodes
    11. Good: Minimal, semantic markup
    12. 6. Content Delivery and Caching Headers
    13. Example: HTML meta tags for caching and compression
    14. Performance Optimization Checklist

  16. HTML Security Best Practices

    1. 1. Content Security Policy (CSP) Implementation
    2. Example: CSP implementation in HTML meta tag
    3. 2. XSS Prevention and Input Sanitization
    4. Example: XSS prevention techniques
    5. 3. CSRF Protection in Forms (CSRF tokens)
    6. Example: CSRF protection implementation
    7. 4. Secure Embedding (sandbox attribute) and Sandboxing
    8. Example: Secure iframe embedding
    9. 5. HTTP Security Headers (X-Frame-Options, HSTS)
    10. Example: Security headers in HTML meta tags
    11. 6. Form Security and Data Protection
    12. Example: Secure form implementation
    13. Security Best Practices Checklist

  17. HTML Internationalization (i18n)

    1. 1. Language Declaration (lang attribute) and BCP 47 Tags
    2. Example: Language declaration with BCP 47 tags
    3. 2. Text Direction (dir="ltr rtl") and BiDi Support
    4. Example: RTL and BiDi text handling
    5. 3. Character Encoding (charset="UTF-8") and Unicode Support
    6. Example: Character encoding and special characters
    7. 4. Date, Time, and Number Formatting
    8. Example: Date, time, and number formatting
    9. 5. Font Selection for Multiple Languages
    10. Example: Multi-language font configuration
    11. 6. Content Localization Strategies
    12. Example: Complete localization implementation
    13. Internationalization Checklist

  18. Modern HTML Features (2026+) - Experimental APIs

    1. 1. HTML5.1 and HTML5.2 New Features
    2. Example: HTML5.1 and HTML5.2 features
    3. 2. Popover API (popover attribute) and Native Modals
    4. Example: Popover API usage
    5. 3. Declarative Shadow DOM (shadowrootmode)
    6. Example: Declarative Shadow DOM
    7. 4. Import Maps (<script type="importmap">) and ES Modules
    8. Example: Import Maps and ES Modules
    9. 5. Web Streams API and Readable Streams
    10. Example: Web Streams API usage
    11. 6. Navigation API and SPA Routing
    12. Example: Navigation API for SPA routing
    13. Modern HTML Features Checklist

  19. HTML Development Tools and Debugging

    1. 1. HTML Validation and W3C Compliance (validator.w3.org)
    2. Example: HTML validation workflow
    3. Example: Using html-validate in project
    4. 2. Browser DevTools for HTML Debugging (Inspect Element)
    5. Example: DevTools debugging techniques
    6. 3. Accessibility Testing Tools (axe, WAVE)
    7. Example: Accessibility testing workflow
    8. 4. Performance Profiling and Lighthouse (Google Lighthouse)
    9. Example: Lighthouse and performance testing
    10. 5. HTML Linting (HTMLHint) and Code Quality
    11. Example: Linting configuration
    12. 6. Cross-browser Testing Strategies (BrowserStack)
    13. Example: Cross-browser testing setup
    14. Development and Testing Workflow