HTML Roadmap
19 sections • 356 topics
- 1. HTML5 Document Structure and Boilerplate (<!DOCTYPE html>)
- Example: Complete HTML5 boilerplate structure
- 2. Doctype Declarations and Legacy Support
- 3. Character Encoding (UTF-8) and Meta Setup
- Common Viewport Settings
- Character Encoding Options
- Example: Complete meta setup for modern websites
- 4. Element Syntax and Nesting Rules
- Block vs Inline Nesting
- Special Nesting Rules
- Example: Correct element nesting patterns
- 5. Void Elements (<img>, <br>, <hr>) and Self-closing Tags
- Example: Void elements in practical use
- 6. HTML Comments (<!-- -->) and Conditional Comments
- Conditional Comment Operators
- Example: Various comment types and uses
- Section 1 Key Takeaways
- 1. Document Sectioning (<header>, <nav>, <main>, <aside>, <footer>)
- Usage Rules
- Accessibility Benefits
- Example: Complete page structure with semantic elements
- 2. Content Sectioning (<section>, <article>, <hgroup>)
- <section> vs <article>
- Example: Proper use of section and article
- 3. Heading Hierarchy (h1-h6) and Document Outline
- Example: Proper heading hierarchy
- 4. Address Element (<address>) and Contact Information
- Example: Various address element uses
- 5. Time and Date Elements (<time> datetime)
- Common Date Formats
- Duration Examples
- Example: Time element in various contexts
- 6. Ruby Annotations (<ruby>, <rt>, <rp>) for East Asian Typography
- Browser Support
- Example: Ruby annotations for different languages
- Section 2 Key Takeaways
- 1. Block-level Text Elements (<p>, <div>, <blockquote>)
- Example: Text block elements usage
- 2. List Elements (<ul>, <ol>, <li>, <dl>, <dt>, <dd>)
- Ordered List Attributes
- Example: Various list types and configurations
- 3. Preformatted Content (<pre>, <code>, <samp>, <kbd>)
- Common Patterns
- Example: Preformatted and code elements
- 4. Inline Text Semantics (<span>, <em>, <strong>, <mark>)
- Use Cases by Element
- Example: Inline text semantics in context
- 5. Text Modifications (<del>, <ins>, <sub>, <sup>, <small>)
- del/ins Attributes
- Example: Text modification elements
- 6. Abbreviations and Data (<abbr>, <data>, <var>, <time>)
- Example: Abbreviations and data elements
- Section 3 Key Takeaways
- 1. Core Global Attributes (id, class, title, lang)
- Tabindex Values
- Example: Core global attributes usage
- 2. Event Handler Attributes (onclick, onload, onchange)
- Common Mouse Events
- Example: Inline event handlers (avoid in production)
- 3. Data Attributes (data-*) and Custom Properties
- JavaScript Access
- Example: Data attributes usage
- 4. Content Editable (contenteditable) and User Interaction
- InputMode Values
- Example: Content editable and user interaction
- 5. Draggable (draggable) and Drop Zone Attributes
- Drag Events (on dragged element)
- Drop Events (on drop target)
- Example: Drag and drop implementation
- 6. Hidden, Inert, and Visibility Controls
- Visibility Comparison
- Example: Visibility control attributes
- Section 4 Key Takeaways
- 1. Anchor Elements (<a href>) and Link Types
- Link Types
- Target Values
- Example: Various link types and attributes
- 2. URL Schemes and Link Targets (target="_blank")
- Example: Different URL schemes
- 3. Rel Attributes (rel="nofollow", "noopener") and Link Relationships
- Example: Rel attribute usage
- 4. Download Links (download attribute) and File Handling
- Common File Types
- Example: Download links and file handling
- 5. Email (mailto:) and Telephone Links (tel:)
- Example: Email and telephone links
- 6. Navigation Patterns and Breadcrumbs
- Example: Navigation patterns
- Section 5 Key Takeaways
- 1. Image Elements (<img src alt>) and Responsive Images
- Srcset Syntax
- Image Formats
- Example: Responsive images with srcset and sizes
- 2. Picture Element (<picture>) and Source Sets (srcset)
- Source Attributes
- Example: Picture element for art direction and formats
- 3. SVG Integration (<svg>) and Inline Graphics
- SVG Viewport Attributes
- Example: SVG integration methods
- 4. Audio Elements (<audio>) and Media Controls
- Audio Formats
- Preload Values
- Example: Audio elements with multiple sources
- 5. Video Elements (<video>) and Streaming Support
- Video Formats
- Track Element (Subtitles)
- Example: Video elements with advanced features
- 6. Canvas (<canvas>) and Graphics API Integration
- Canvas Context Types
- Example: Canvas element with 2D drawing
- 7. Object and Embed Elements (<object>, <embed>)
- Object Attributes
- Iframe Attributes
- Example: Object, embed, and iframe usage
- Section 6 Key Takeaways
- 1. Form Element (<form action method>) and Form Attributes
- Method Comparison
- Enctype Values
- Example: Form element with various attributes
- 2. Input Types (<input type>) and HTML5 Form Controls
- Example: Common input types
- 3. Select, Option, and Datalist Elements (<select>, <option>, <datalist>)
- Select Attributes
- Option Attributes
- Example: Select, option, optgroup, and datalist
- 4. Textarea (<textarea>) and Multi-line Input
- Wrap Values
- Example: Textarea configurations
- 5. Fieldset, Legend (<fieldset>, <legend>) and Form Grouping
- Fieldset Attributes
- Example: Fieldset and legend usage
- 6. Label Association (<label for>) and Accessibility
- Label Attributes
- Example: Label association methods
- 7. Form Validation Attributes (required, pattern) and Patterns
- Common Patterns
- Validation States (CSS)
- Example: Form validation attributes
- Section 7 Key Takeaways
- 1. Required Fields (required attribute) and Validation States
- Validation Timing
- Validity States (JS)
- Example: Required fields and validation states
- 2. Pattern Validation (pattern attribute) and Regular Expressions
- Example: Pattern validation with helpful messages
- 3. Custom Validation Messages (setCustomValidity) and Styling
- ValidityState Properties
- Example: Custom validation messages and styling
- 4. HTML5 Input Constraints (min, max, step) and Limits
- Step Values
- Accept MIME Types
- Example: Input constraints in practice
- 5. Form Submission and Method Handling (GET vs POST)
- Form Submission Events
- Submit Methods (JS)
- Example: Form submission handling
- 6. Form Data Encoding (enctype) and File Uploads
- File Input Attributes
- FormData Methods
- Example: File uploads and form data encoding
- Section 8 Key Takeaways
- 1. Table Structure (<table>, <thead>, <tbody>, <tfoot>)
- Table Attributes
- Example: Proper table structure
- 2. Table Rows and Cells (<tr>, <td>, <th>)
- TH Scope Attribute
- Cell Alignment (CSS)
- Example: Table rows and cells with scope
- 3. Cell Spanning (colspan, rowspan attributes)
- Colspan Example (visual)
- Rowspan Example (visual)
- Example: Colspan and rowspan usage
- 4. Table Captions (<caption>) and Summaries
- Caption Styling (CSS)
- Example: Table captions and descriptions
- 5. Sortable Tables and Interactive Features
- ARIA Attributes for Tables
- Example: Sortable table with JavaScript
- 6. Responsive Table Techniques
- Example: Responsive table implementations
- Section 9 Key Takeaways
- 1. Button Elements (<button>) and Button Types (submit, reset, button)
- Button vs Input Button
- Button Attributes
- Example: Button types and usage
- 2. Details and Summary (<details>, <summary>) Disclosure Widgets
- Details Attributes
- Events
- Example: Details and summary widgets
- 3. Dialog and Modal Elements (<dialog>)
- Dialog Properties
- Dialog Events
- Example: Dialog and modal implementations
- 4. Progress (<progress>) and Meter (<meter>) Indicators
- Meter Attributes
- Example: Progress and meter elements
- 5. Content Editable (contenteditable) and Rich Text Editing
- Document.execCommand (deprecated)
- Selection API (modern)
- Example: Content editable implementations
- 6. Drag and Drop API Integration (draggable)
- DataTransfer Methods
- EffectAllowed Values
- Example: Drag and drop implementations
- Section 10 Key Takeaways
- 1. Web Storage API (localStorage, sessionStorage)
- Example: Web Storage operations with JSON serialization
- 2. Geolocation API Integration (navigator.geolocation)
- Example: Geolocation with error handling and options
- 3. File API and File Handling (FileReader)
- Example: File input with preview and validation
- Example: Read text file and parse JSON
- Example: Drag and drop file upload
- 4. History API (pushState, replaceState) and Navigation Management
- Example: Single Page Application (SPA) routing with History API
- 5. Web Workers and Shared Workers
- Example: Web Worker for heavy computation
- Example: Shared Worker for cross-tab communication
- 6. Service Workers and Offline Functionality (PWA)
- Example: Service Worker registration and basic caching
- Example: Service Worker with caching strategies (service-worker.js)
- Section 11 Key Takeaways
- 1. Custom Element Registration (customElements.define) and Lifecycle
- Example: Autonomous custom element with lifecycle
- Example: Customized built-in element
- 2. Shadow DOM and Encapsulation (attachShadow)
- Example: Shadow DOM with style encapsulation
- Example: Access and manipulation
- 3. HTML Templates (<template>) and Content Cloning
- Example: Template with cloning and population
- Example: Template in Web Component
- 4. Slot Elements (<slot>) and Content Projection
- Example: Named and default slots
- Example: Slot API and slotchange event
- Example: Multiple named slots with fallback
- 5. Custom Attributes and Properties
- Example: Reflected properties and boolean attributes
- Example: Data attributes and dataset API
- 6. Web Component Best Practices
- Example: Production-ready component with best practices
- Section 12 Key Takeaways
- 1. Essential Meta Tags (<meta name description>) and Document Info
- Example: Complete SEO-optimized head section
- 2. Open Graph Protocol (og:title, og:image) Implementation
- Example: Complete Open Graph implementation
- Example: Different content types
- 3. Twitter Card Metadata (twitter:card)
- Example: Twitter Card with fallback to Open Graph
- Example: Twitter Player Card for video
- Example: Twitter App Card
- 4. Structured Data (JSON-LD, Schema.org, Microdata)
- Example: Article structured data (JSON-LD)
- Example: Product with reviews (JSON-LD)
- Example: Breadcrumb navigation (JSON-LD)
- Example: FAQ page (JSON-LD)
- Example: Microdata format (alternative to JSON-LD)
- 5. Canonical URLs (<link rel="canonical">) and Duplicate Content
- Example: Canonical URL implementations
- Example: Complete duplicate content strategy
- 6. Sitemap and Robot Instructions (robots.txt)
- Example: XML Sitemap (sitemap.xml)
- Example: Sitemap Index for multiple sitemaps
- Example: robots.txt file
- Example: Link to sitemap in HTML
- Section 13 Key Takeaways
- 1. Semantic HTML for Screen Readers
- Example: Semantic page structure for screen readers
- 2. ARIA Roles (role attribute), States, and Properties
- Example: Custom button with ARIA
- Example: Accessible tabs with ARIA
- Example: Live regions for dynamic updates
- 3. Keyboard Navigation (tabindex) and Focus Management
- Example: Skip to main content link
- Example: Focus trap in modal dialog
- Example: Roving tabindex for radio group
- 4. Alternative Text (alt attribute) and Media Descriptions
- Example: Image Alt Text Guidelines
- Example: Video with Captions and Audio Description
- Example: Accessible SVG and Icon Fonts
- 5. Form Accessibility (aria-label, aria-describedby) and Error Handling
- Example: Accessible Form with Validation
- Example: Error Summary and Focus Management
- Example: Autocomplete Attributes
- 6. Color Contrast and Visual Accessibility (WCAG)
- Example: Color Contrast Examples
- Example: Not Relying on Color Alone
- Example: Focus Indicators and Reduced Motion
- Example: Text Over Images
- Section 14: Key Takeaways
- 1. Critical Resource Loading Strategies
- Example: Critical CSS inline with deferred stylesheet loading
- 2. Lazy Loading Images (loading="lazy") and Media
- Example: Native lazy loading with responsive images
- 3. Resource Hints (<link rel="preload prefetch dns-prefetch">)
- Example: Comprehensive resource hints implementation
- 4. Script Loading (async, defer attributes) and Performance
- Example: Script loading strategies comparison
- 5. DOM Optimization and Minimal Markup
- Bad: Excessive DOM depth and nodes
- Good: Minimal, semantic markup
- 6. Content Delivery and Caching Headers
- Example: HTML meta tags for caching and compression
- Performance Optimization Checklist
- 1. Content Security Policy (CSP) Implementation
- Example: CSP implementation in HTML meta tag
- 2. XSS Prevention and Input Sanitization
- Example: XSS prevention techniques
- 3. CSRF Protection in Forms (CSRF tokens)
- Example: CSRF protection implementation
- 4. Secure Embedding (sandbox attribute) and Sandboxing
- Example: Secure iframe embedding
- 5. HTTP Security Headers (X-Frame-Options, HSTS)
- Example: Security headers in HTML meta tags
- 6. Form Security and Data Protection
- Example: Secure form implementation
- Security Best Practices Checklist
- 1. Language Declaration (lang attribute) and BCP 47 Tags
- Example: Language declaration with BCP 47 tags
- 2. Text Direction (dir="ltr rtl") and BiDi Support
- Example: RTL and BiDi text handling
- 3. Character Encoding (charset="UTF-8") and Unicode Support
- Example: Character encoding and special characters
- 4. Date, Time, and Number Formatting
- Example: Date, time, and number formatting
- 5. Font Selection for Multiple Languages
- Example: Multi-language font configuration
- 6. Content Localization Strategies
- Example: Complete localization implementation
- Internationalization Checklist
- 1. HTML5.1 and HTML5.2 New Features
- Example: HTML5.1 and HTML5.2 features
- 2. Popover API (popover attribute) and Native Modals
- Example: Popover API usage
- 3. Declarative Shadow DOM (shadowrootmode)
- Example: Declarative Shadow DOM
- 4. Import Maps (<script type="importmap">) and ES Modules
- Example: Import Maps and ES Modules
- 5. Web Streams API and Readable Streams
- Example: Web Streams API usage
- 6. Navigation API and SPA Routing
- Example: Navigation API for SPA routing
- Modern HTML Features Checklist
- 1. HTML Validation and W3C Compliance (validator.w3.org)
- Example: HTML validation workflow
- Example: Using html-validate in project
- 2. Browser DevTools for HTML Debugging (Inspect Element)
- Example: DevTools debugging techniques
- 3. Accessibility Testing Tools (axe, WAVE)
- Example: Accessibility testing workflow
- 4. Performance Profiling and Lighthouse (Google Lighthouse)
- Example: Lighthouse and performance testing
- 5. HTML Linting (HTMLHint) and Code Quality
- Example: Linting configuration
- 6. Cross-browser Testing Strategies (BrowserStack)
- Example: Cross-browser testing setup
- Development and Testing Workflow