⚙️

PHP Tools Hub

Tools PHP Quick Contact

Home > Tutorials > HTML > HTML Final Resources > Image Tools > Squoosh > Image optimization

Image optimization

HTML

🧭

Tutorial Hierarchy

HTML Basics
- Getting Started
  - What is HTML
    
    HTML Definition and Meaning
    
    HTML Full Form Explanation
    
    HTML History and Evolution
    
    HTML Version 1.0 Features
    
    HTML Version 2.0 Features
    
    HTML Version 3.2 Features
    
    HTML Version 4.01 Features
    
    HTML5 Complete Overview
    
    HTML Living Standard WHATWG
  - Why HTML
    
    Importance of HTML in Web Development
    
    HTML as Backbone of Websites
    
    Career Opportunities with HTML
    
    Salary Expectations for HTML Developers
  - How HTML Works
    
    HTML Browser Rendering Process
    
    DOM Tree Creation
    
    Parser and Render Engine
    
    Critical Rendering Path
  - HTML vs Other Languages
    
    HTML vs CSS
    
    HTML vs JavaScript
    
    HTML vs XML
    
    HTML vs XHTML Differences
    
    HTML vs Markdown
    
    HTML vs Rich Text Format
  - Prerequisites
    
    Basic Computer Skills Needed
    
    Understanding File Extensions
    
    Knowledge of Folder Structure
    
    Basic Typing Skills
    
    Understanding Web Browsers
    
    Internet Basics Knowledge
HTML Fundamentals
- What is HTML
- Why HTML
- How HTML Works
- HTML vs Other Languages
- Prerequisites
HTML Setup
HTML First Code
HTML Document Structure
HTML Elements
- Core Concepts
- Element Types
- Html Tag
- Head Tag
- Title Tag
- Meta Tag
- Link Tag
- Style Tag
- Base Tag
- Script Tag
- Noscript Tag
- Body Element
- MathML
  - <math>
    
    MathML Root Element
  - <mi>
    
    Identifier
  - <mn>
    
    Number
  - <mo>
    
    Operator
  - <ms>
    
    String Literal
  - <mfrac>
    
    Fraction
  - <msqrt>
    
    Square Root
  - <mrow>
    
    Group Expression
  - <msub>
    
    Subscript
  - <msup>
    
    Superscript
  - <msubsup>
    
    Subscript Superscript
  - <munder>
    
    Underscript
  - <mover>
    
    Overscript
  - <munderover>
    
    Underscript Overscript
  - <mtable>
    
    Table for Matrices
  - <mtr>
    
    Matrix Row
  - <mtd>
    
    Matrix Data
- Ruby Annotation
  - <ruby>
    
    Ruby Annotation Container
  - <rt>
    
    Ruby Text Pronunciation
  - <rp>
    
    Ruby Parenthesis Fallback
  - Japanese Characters
    
    Japanese Reading Support
  - Chinese Characters
    
    Chinese Pinyin Support
- New HTML Tags
  - <bdi>
    
    Bidirectional Isolation
  - <wbr>
    
    Word Break Opportunity
  - <search>
    
    Search Box Container
  - <hgroup>
    
    Heading Group
  - <portal>
    
    Portal for Page Navigation
  - <fencedframe>
    
    Privacy Preserving Frame
  - <selectlist>
    
    Customizable Select
  - <model>
    
    3D Model Element
- Inert Attribute
  - inert
    
    Make Element Non Interactive
  - Modal Implementation
    
    Prevent Background Interaction
HTML Headings
- Heading Elements
- Heading Syntax
- Heading Size
- Heading Styling
- Heading SEO
- Heading Accessibility
- Heading Examples
HTML Paragraphs
- Paragraph Element
- Paragraph Alignment
- Paragraph Spacing
- Paragraph Indent
- Paragraph Font
- Paragraph Color
- Paragraph Links
  - P Tag with Anchor Links
  - P Tag Internal Page Links
- Paragraph Images
  - P Tag with Inline Images
  - P Tag Background Image
- Paragraph Examples
HTML Line Break
- Br Tag
HTML Horizontal Rule
- Hr Tag
HTML Text Formatting
- Bold Text
- Italic Text
- Mark Text
- Small Text
- Deleted Text
- Inserted Text
- Subscript Text
- Superscript Text
- Underline Text
- Preformatted Text
- Code Text
- Keyboard Text
- Sample Output
- Variable Text
HTML Quotations
HTML Colors
HTML CSS
HTML Links
HTML Images
- Image Tag
- Image Formats
  - JPG Format
    
    JPG Best for Photographs
    
    JPG Lossy Compression
    
    JPG Small File Size
    
    JPG No Transparency Support
  - PNG Format
    
    PNG Lossless Compression
    
    PNG Transparency Support
    
    PNG Best for Logos Icons
    
    PNG Larger File Size
  - GIF Format
    
    GIF for Animations
    
    GIF 256 Color Limit
    
    GIF Transparency Support
  - SVG Format
    
    SVG Scalable Vector Graphics
    
    SVG Code Based XML Format
    
    SVG Zoom Without Quality Loss
    
    SVG Best for Icons Illustrations
  - WebP Format
    
    WebP Modern Format Google
    
    WebP Lossy and Lossless Both
    
    WebP Transparency and Animation
    
    WebP Smaller than PNG JPG
  - AVIF Format
    
    AVIF Next Gen Format
    
    AVIF Better Compression than WebP
    
    AVIF HDR Support
- Image Optimization
  - Compression Tools
    
    TinyPNG Compressor
    
    ImageOptim for Mac
    
    Squoosh Online Tool
    
    ShortPixel Plugin
  - File Size Tips
    
    Under 100KB for Web
    
    Thumbnail Size 150x150
    
    Responsive Multiple Sizes
  - Lazy Loading
    
    Loading Lazy Attribute
    
    Intersection Observer API
    
    Lazy Loading Performance Boost
    
    Fallback for Old Browsers
- Image Alignment
  - Horizontal Alignment
    
    Image Align Left with Float
    
    Image Align Right with Float
    
    Image Center with Margin Auto
    
    Image Center with Flexbox
  - Vertical Alignment
    
    Image Vertical Align Middle
    
    Image Vertical Align Top Bottom
    
    Image Align with Line Height
  - Text Wrapping
    
    Image Float Left Text Wrap
    
    Image Float Right Text Wrap
    
    Clear Property Stop Float
- Image Borders
  - Image Border CSS
    
    Image Border Solid
    
    Image Border Dotted Dashed
    
    Image Border Radius Circle
    
    Image Border Radius Pill Shape
  - Image Shadow
    
    Image Box Shadow Effect
    
    Image Hover Shadow Effect
- Image Links
  - Clickable Images
    
    Image Enclosed in Anchor Tag
    
    Image Link with Border Removal
    
    Image Link Hover Effect CSS
    
    Entire Card Image Link
- Responsive Images
  - Width 100 Percent
    
    Image Scale with Container
  - Max Width 100 Percent
    
    Image Never Bigger than Container
  - Height Auto
    
    Maintain Aspect Ratio
  - Object Fit Cover
    
    Fill Container Crop Image
  - Object Fit Contain
    
    Fit Inside Container
  - Srcset Attribute
    
    Different Images for Different Screens
    
    Comma Separated Image List
    
    Width Descriptor w
    
    Pixel Density Descriptor x
  - Sizes Attribute
    
    Media Condition and Size
    
    (max-width:600px) 100vw
    
    50vw for Desktop
- Picture Element
  - Picture Tag Syntax
    
    Picture with Multiple Sources
  - Source Tag
    
    Media Attribute for Breakpoints
    
    Srcset Attribute for Images
    
    Type Attribute for Format
  - Art Direction
    
    Different Crop for Mobile Desktop
    
    Portrait vs Landscape Images
  - Format Fallback
    
    WebP with JPG Fallback
- Image Map
  - Map Tag Definition
    
    Client Side Image Map
  - Map Tag Name Attribute
    
    Link with Usemap
  - Area Tag Shape
    
    Shape Rect Rectangle
    
    Shape Circle
    
    Shape Poly Polygon
  - Area Tag Coords
    
    Rect Coords x1 y1 x2 y2
    
    Circle Coords x y radius
    
    Poly Coords x1 y1 x2 y2 x3 y3
  - Area Tag Href
    
    Link URL for Region
  - Area Tag Target
    
    Open Link in New Tab
  - Area Tag Alt
    
    Accessibility for Region
  - Practical Examples
    
    Country Map Clickable Regions
    
    Product Image Hotspots
    
    Floor Plan Interactive
- Figure Element
  - Figure Tag
    
    Self Contained Content
    
    Image Diagram Code Snippet
  - Figcaption Tag
    
    Caption Inside Figure
    
    Caption Styling CSS
  - Multiple Images
    
    Multiple Images One Figure
- Background Images
  - Background Image Property
    
    Background Image URL
  - Background Repeat
    
    Repeat Repeat-x Repeat-y No-repeat
  - Background Position
    
    Top Bottom Left Right Center
    
    Percentage Pixel Values
  - Background Size Cover
    
    Cover Entire Container
  - Background Size Contain
    
    Fit Inside Container
  - Background Attachment Fixed
    
    Parallax Effect
  - Background Attachment Scroll
    
    Default Behavior
  - Background Shorthand
    
    All Properties in One Line
  - Multiple Backgrounds
    
    Comma Separated Images
- Favicon
  - Favicon Definition
    
    Website Icon on Browser Tab
  - Favicon Sizes
    
    16x16 32x32 48x48 64x64
  - Favicon Formats
    
    ICO Format Best Support
    
    PNG for Modern Browsers
    
    SVG for Vector
  - Favicon Implementation
    
    Link Rel Icon
    
    Root Directory favicon.ico Auto Detect
  - Favicon Generator
    
    Favicon.io Online Tool
    
    RealFaviconGenerator
  - Favicon Best Practices
    
    Different Sizes for Different Devices
    
    Cache Busting Query String
  - Dynamic Favicon
    
    JavaScript Change Favicon
  - Apple Touch Icon
    
    iPhone iPad Bookmark Icon
HTML Tables
- Table Introduction
  - Table Element
    
    Table for Tabular Data
    
    Table vs Spreadsheet
    
    When to Use Tables
    
    When NOT to Use Tables for Layout
- Table Syntax
  - Table Tag Opening
    
    <table> Start Tag
  - Table Tag Closing
    
    </table> End Tag
  - Table Border Attribute
    
    Border 1 for Visible Table
    
    Border 0 for Invisible Table
- Table Rows
  - TR Tag
    
    Table Row Start <tr>
    
    Table Row End </tr>
    
    Multiple Rows in Table
    
    TR Height Attribute Deprecated
    
    TR CSS Height Property
- Table Data
  - TD Tag
    
    Table Data Cell Start <td>
    
    Table Data Cell End </td>
    
    TD Content Text Images Links
    
    TD Width Attribute Deprecated
    
    TD CSS Width Property
    
    TD Background Color CSS
    
    TD Text Alignment Left Center Right
    
    TD Vertical Alignment Top Middle Bottom
- Table Headers
  - TH Tag
    
    Table Header Cell <th>
    
    TH Bold Center Default
    
    TH Scope Attribute col row
    
    TH Scope for Accessibility
    
    TH vs TD Differences
- Table Structure
  - Table Head
    
    <thead> Wrapper for Header Rows
    
    Thead for Semantic Structure
    
    Thead CSS Styling
  - Table Body
    
    <tbody> Wrapper for Body Rows
    
    Tbody for Semantic Structure
    
    Tbody Scrollable Tables
  - Table Foot
    
    <tfoot> Wrapper for Footer Rows
    
    Tfoot for Summary Rows
    
    Tfoot Position Bottom
- Table Caption
  - Caption Tag
    
    <caption> Table Title
    
    Caption Position Top Default
    
    Caption Side Bottom CSS
    
    Caption Styling CSS
- Table Borders
  - Border Attribute
    
    Border 1 Simple Border
    
    Border Pixel Value
  - CSS Border Property
    
    Border Collapse Separate vs Collapse
    
    Border Collapse Collapse Single Border
    
    Table Border Solid
    
    TD Border Individual Cells
    
    TH Border Header Cells
- Table Sizes
  - Table Width
    
    Table Width Percentage
    
    Table Width Pixels
  - Table Height
    
    Table Height CSS Property
  - Column Width
    
    TD Width Attribute
    
    Colgroup for Column Widths
    
    CSS Width on First Row
  - Row Height
    
    TR Height CSS
    
    TD Height CSS
- Table Spacing
  - Cell Padding
    
    Cellpadding Attribute Space Inside Cell
    
    CSS Padding Property Modern
    
    Padding TD and TH
  - Cell Spacing
    
    Cellspacing Attribute Space Between Cells
    
    CSS Border Spacing Property
    
    Border Spacing for Separate Borders
- Colspan & Rowspan
  - Colspan Attribute
    
    Colspan Merge Columns Horizontally
    
    Colspan Value Number of Columns
    
    Colspan Example Table Header
  - Rowspan Attribute
    
    Rowspan Merge Rows Vertically
    
    Rowspan Value Number of Rows
    
    Rowspan Example Side Header
  - Complex Headers
    
    Combined Colspan and Rowspan
    
    Nested Tables Alternative
- Table Styling
  - Striped Rows
    
    TR nth-child(even) Background
    
    TR nth-child(odd) Background
    
    Zebra Striping Effect
  - Hover Effect
    
    TR:hover Background Change
    
    Row Highlight on Mouse Over
  - Responsive Tables
    
    Horizontal Overflow Scroll
    
    Overflow-x Auto Container
    
    Cards Layout on Mobile
    
    Display Block on Small Screens
- Table Colgroup
  - Colgroup Tag
    
    <colgroup> Column Group Container
    
    Span Attribute Multiple Columns
  - Col Tag
    
    <col> Individual Column
    
    Col Width Property
    
    Col Background Color
    
    Col Text Alignment
    
    Col Class Attribute
- Advanced Tables
  - Nested Tables
    
    Table Inside Table TD
    
    Nested Table Complexity
  - Sortable Tables
    
    JavaScript Sort Function
    
    Click Header to Sort
  - Filterable Tables
    
    Search Box Filter Rows
    
    JavaScript Filter Function
  - Pagination Tables
    
    Split Large Data into Pages
    
    Previous Next Buttons
  - Editable Tables
    
    Content Editable Attribute
    
    Inline Editing JavaScript
- Table Accessibility
  - Scope Attribute
    
    Scope col for Header
    
    Scope row for Row Header
  - Header Attribute
    
    ID and Headers for Complex
  - Caption Tag
    
    Table Description Screen Reader
  - Summary Attribute
    
    Deprecated Summary for Table
HTML Lists
- List Introduction
  - Types of Lists
    
    Unordered Ordered Description Lists
  - Use Cases
    
    Navigation Menus
    
    Shopping Lists
    
    To-Do Lists
- Unordered List
  - UL Tag
    
    <ul> Unordered List Container
  - LI Tag
    
    <li> List Item Inside UL
    
    Multiple List Items
  - Bullet Styles
    
    Disc Bullet Default
    
    Circle Bullet
    
    Square Bullet
    
    None No Bullet
    
    List Style Type CSS
  - Custom Bullets
    
    List Style Image URL
    
    Emoji as Bullet
    
    Font Awesome Icons as Bullet
- Ordered List
  - OL Tag
    
    <ol> Ordered List Container
  - LI Tag
    
    List Items in Ordered List
  - Number Types
    
    Decimal Numbers 1 2 3 Default
    
    Lowercase Letters a b c
    
    Uppercase Letters A B C
    
    Lowercase Roman i ii iii
    
    Uppercase Roman I II III
  - Start Attribute
    
    Start Number Custom Value
    
    Start from 5 Example
  - Reversed Attribute
    
    Reverse Order Countdown
    
    Reversed 5 4 3 2 1
  - Value Attribute
    
    LI Value Custom Number
- Description List
  - DL Tag
    
    <dl> Description List Container
  - DT Tag
    
    <dt> Term Name
  - DD Tag
    
    <dd> Description Details
  - Multiple Terms
    
    One DT Multiple DD
    
    Multiple DT One DD
  - Use Cases
    
    Glossary Lists
    
    Product Features List
    
    FAQ Sections
- Nested Lists
  - Multi-level Lists
    
    List Inside List Item
    
    Submenu Navigation
    
    Mixed UL OL Inside
  - Indentation
    
    Automatic Indent Nested Lists
    
    CSS Margin for Indent Control
- List Styling
  - CSS Properties
    
    List Style Type Property
    
    List Style Position Inside Outside
    
    List Style Image Custom Bullet
    
    List Style Shorthand
  - Horizontal Lists
    
    Display Inline on LI
    
    Horizontal Navigation Menu
    
    Flexbox for Horizontal List
  - Margin Padding
    
    Remove Default UL Padding
    
    LI Margin Bottom Spacing
- List Accessibility
  - Semantic Lists
    
    Screen Reader Announcement
  - Navigation Lists
    
    ARIA Role Navigation
- List Examples
  - Breadcrumb Navigation
    
    Home > Category > Product
  - To-Do List
    
    Checkbox Inside List Item
  - Shopping List
    
    Product Items with Price
  - Nested Menu
    
    Multi-level Dropdown Menu
  - Table of Contents
    
    Page Section Links
HTML Block & Inline
- Block Elements
  - Definition
    
    Block Level Element Characteristics
    
    Start on New Line
    
    Take Full Width Available
    
    Can Contain Inline and Block
  - List of Blocks
    
    Div P H1 to H6
    
    Ul Ol Li DL
    
    Table Form Section
    
    Header Footer Nav Article
    
    Aside Main Figure Figcaption
- Inline Elements
  - Definition
    
    Inline Element Characteristics
    
    Do Not Start New Line
    
    Take Only Necessary Width
    
    Cannot Contain Block Elements
  - List of Inlines
    
    Span A Img
    
    Strong Em B I
    
    Mark Small Del Ins
    
    Sub Sup Code Kbd
    
    Input Button Label
    
    Select Textarea
- Span Tag
  - Span Definition
    
    Generic Inline Container
  - Span Uses
    
    Style Small Part of Text
    
    Highlight Specific Words
    
    JavaScript Target Element
  - Span vs Div
    
    Span Inline Div Block
- Display Property
  - Change Display
    
    Block to Inline display inline
    
    Inline to Block display block
    
    Inline Block Hybrid
  - Hide Elements
    
    Display None Remove Element
    
    Visibility Hidden Hide but Keep Space
HTML Div
- Div Element
  - Definition
    
    Division Container
  - Characteristics
    
    Block Level Element
  - Uses
    
    Group Multiple Elements Together
    
    Apply CSS to Section
    
    JavaScript Wrapper
    
    Layout Structure Container
- Div Examples
  - Header Section
    
    Div for Website Header
  - Navigation Section
    
    Div for Navbar Menu
  - Content Section
    
    Div for Main Content
  - Sidebar Section
    
    Div for Right Left Sidebar
  - Footer Section
    
    Div for Footer Content
  - Card Component
    
    Div for Product Card
  - Modal Popup
    
    Div for Modal Dialog
- Div Styling
  - CSS Styling
    
    Div Background Color
    
    Div Border Radius Shadow
    
    Div Hover Effect
  - Box Model
    
    Div Padding Margin
    
    Div Width Height
- Div Layout
  - Flexbox Container
    
    Div with Display Flex
  - Grid Container
    
    Div with Display Grid
  - Positioning
    
    Div Relative Absolute Fixed
HTML Classes
- Class Attribute
  - Definition
    
    HTML Class for Styling
  - Syntax
    
    class="classname"
  - Multiple Classes
    
    class="class1 class2"
  - Naming Rules
    
    No Spaces Use Hyphen Underscore
    
    Cannot Start with Number
  - Case Sensitivity
    
    Case Sensitive CSS
- CSS Class Selector
  - Dot Notation
    
    .classname in CSS
  - Specificity
    
    Class Overrides Element Selector
  - Multiple Classes
    
    All Classes Applied
- JavaScript Classes
  - ClassName Property
    
    element.className Get Set
  - ClassList Methods
    
    classList.add Method
    
    classList.remove Method
    
    classList.toggle Method
    
    classList.contains Method
    
    classList.replace Method
- Best Practices
  - Meaningful Names
    
    Use kebab-case or camelCase
  - Reusability
    
    Reuse Classes Across Elements
  - BEM Methodology
    
    Block Element Modifier Naming
  - BEM Examples
    
    card card__title card--featured
- Class vs ID
  - Differences
    
    Class Reusable ID Unique
    
    Class Multiple ID One per Page
  - Specificity
    
    ID Higher Specificity than Class
  - When to Use
    
    Class for Styling ID for JavaScript
HTML Id
- ID Attribute
  - Definition
    
    Unique Identifier for Element
  - Syntax
    
    id="uniqueid"
  - Naming Rules
    
    No Spaces Hyphen Underscore Allowed
    
    Cannot Start with Number
  - Uniqueness
    
    Each ID Used Once Per Page
  - Multiple IDs
    
    Multiple IDs on Same Element Invalid
- CSS ID Selector
  - Hash Notation
    
    #idname in CSS
  - Specificity
    
    ID Very High Specificity
  - Overriding
    
    Only Inline CSS Overrides ID
- JavaScript ID
  - Get Element By ID
    
    document.getElementById
  - Direct Access
    
    window.elementId Direct Reference
- Link Bookmarks
  - Internal Links
    
    Link to ID with Hash #
  - Smooth Scroll
    
    Scroll to ID Smoothly
  - Cross Page Links
    
    page.html#sectionid
- Form Integration
  - Label Connection
    
    Label For Attribute Matches ID
  - Accessibility
    
    ARIA Attributes Reference ID
- Best Practices
  - Use Cases
    
    Unique Form Fields
    
    Anchor Targets
    
    JavaScript Hooks
  - Avoid Overuse
    
    Use Class for Styling
HTML Buttons
- Button Element
  - Definition
    
    Clickable Interactive Element
  - Syntax
    
    <button>Text</button>
  - Type Attribute
    
    type="submit" for Forms
    
    type="reset" Clear Form
    
    type="button" Default Action
  - Name Attribute
    
    Submit Form Data Key
  - Value Attribute
    
    Submit Form Data Value
  - Disabled Attribute
    
    Disable Button Interaction
  - Autofocus Attribute
    
    Focus on Page Load
  - Form Attribute
    
    Associate with Form ID
  - Formaction Attribute
    
    Override Form Action URL
  - Formmethod Attribute
    
    Override Form Method GET POST
  - Formenctype Attribute
    
    Override Form Encoding
  - Formtarget Attribute
    
    Override Form Target
- Button Styling
  - CSS Basics
    
    Background Color Gradient
    
    Text Color Font Family
    
    Padding Vertical Horizontal
    
    Border Radius Rounded Corners
    
    Border None or Custom
    
    Box Shadow Effect
    
    Cursor Pointer on Hover
  - Hover Effects
    
    Background Color Change on Hover
    
    Scale Transform Effect
    
    Transition Smooth Animation
    
    Opacity Change on Hover
  - Active Effect
    
    Button Press Down Effect
  - Focused Style
    
    Outline Removal Accessibility
- Button Types
  - Primary Button
    
    Main Call to Action
  - Secondary Button
    
    Alternative Action
  - Success Button
    
    Green Confirmation
  - Danger Button
    
    Red Delete Action
  - Warning Button
    
    Yellow Caution Action
  - Info Button
    
    Blue Information Action
  - Outline Button
    
    Transparent with Border
  - Ghost Button
    
    No Border Transparent
- Button Sizes
  - Small Button
    
    Padding 5px 10px Font 12px
  - Medium Button
    
    Padding 10px 20px Font 16px
  - Large Button
    
    Padding 15px 30px Font 20px
  - Full Width Button
    
    Width 100 Percent Block
- Button with Icons
  - Icon Placement
    
    Icon Before Text
    
    Icon After Text
  - Icon Only Button
    
    Round Button with Icon
  - Icon Libraries
    
    Font Awesome Icons
    
    Bootstrap Icons
- Button Groups
  - Grouped Buttons
    
    Buttons Side by Side
    
    Gap Between Buttons
  - Button Toolbar
    
    Multiple Button Groups
- Button Events
  - Onclick Event
    
    JavaScript Function Call
  - Alert Example
    
    Show Alert Message on Click
  - Console Log
    
    Log Message to Console
  - Change Text
    
    Update Button Text on Click
  - Show Hide Element
    
    Toggle Div Visibility
- Button vs Link
  - When to Use Button
    
    Actions Form Submission Modal
  - When to Use Link
    
    Navigation to Another Page
- Button Accessibility
  - ARIA Label
    
    For Icon Buttons
  - Disabled State
    
    Announce to Screen Readers
HTML Iframes
- Iframe Element
  - Definition
    
    Inline Frame for External Content
  - Syntax
    
    <iframe src="url"></iframe>
  - Self Closing
    
    Iframe Closing Tag Required
- Iframe Attributes
  - Src Attribute
    
    Source URL of Embedded Content
  - Width Attribute
    
    Iframe Width Pixels Percentage
  - Height Attribute
    
    Iframe Height Pixels
  - Name Attribute
    
    Target for Link Click
  - Title Attribute
    
    Accessibility Description
  - Sandbox Attribute
    
    Restrict Iframe Capabilities
  - Sandbox Value
    
    Allow Forms Allow Scripts
    
    Allow Same Origin Allow Top Navigation
    
    Allow Popups Allow Modals
  - Allow Attribute
    
    Allow Fullscreen
    
    Allow Camera Microphone
    
    Allow Geolocation Payment
  - Loading Attribute
    
    Lazy Load Iframe
    
    Eager Load Immediate
  - Referrer Policy
    
    No Referrer When Downgrade
    
    Strict Origin Cross Origin
  - Src Doc Attribute
    
    Inline HTML Content
- Embedding YouTube
  - YouTube Embed Code
    
    Share Embed Option
  - YouTube Parameters
    
    Autoplay=1 Parameter
    
    Mute=1 for Autoplay
    
    Controls=0 Hide Controls
    
    Loop=1 Loop Video
    
    Playlist=ID for Loop
    
    Start=60 Start at Second
    
    End=120 End at Second
    
    Rel=0 No Related Videos
- Embedding Google Maps
  - Google Maps Embed
    
    Share Embed Map
  - Google Maps Parameters
    
    Zoom Level
    
    Map Type Roadmap Satellite
    
    Search Location
- Embedding Vimeo
  - Vimeo Embed Code
    
    Share Embed Option
  - Vimeo Parameters
    
    Autoplay Background
    
    Portrait Badge Hide
- Embedding Twitter
  - Twitter Embed
    
    Post Tweet Embed Code
  - Twitter Timeline
    
    Profile Timeline Embed
- Embedding Facebook
  - Facebook Embed
    
    Facebook Post Embed
  - Facebook Video
    
    Facebook Video Embed
- Embedding Instagram
  - Instagram Embed
    
    Instagram Post Embed
  - Instagram Reels
    
    Instagram Reel Embed
- Embedding Spotify
  - Spotify Embed
    
    Song Album Playlist Embed
  - Spotify Podcast
    
    Podcast Episode Embed
- Iframe Styling
  - Remove Border
    
    Frame Border 0 or Border None
  - Border Radius
    
    Rounded Corners on Iframe
  - Box Shadow
    
    Shadow Effect on Iframe
  - Responsive Iframe
    
    Aspect Ratio Container
    
    Padding Bottom 56.25% for 16:9
    
    Position Absolute Inside Container
- Iframe Security
  - Clickjacking Prevention
    
    X-Frame-Options Header
    
    CSP frame-ancestors Directive
  - Sandbox Security
    
    Restrict Untrusted Content
- Iframe Communication
  - Post Message
    
    Cross Origin Communication
    
    Parent Send Message to Iframe
    
    Iframe Send Message to Parent
- Iframe SEO
  - Impact on SEO
    
    Iframe Content Not Indexed
  - Best Practices
    
    Add Title for Accessibility
HTML JavaScript
- JS Introduction
  - What is JavaScript
    
    Client Side Scripting Language
    
    Add Interactivity to HTML
    
    JS History and Evolution
  - JavaScript vs Java
    
    No Relation Different Languages
- Script Placement
  - Head Section
    
    Script in Head Loads Early
  - Body End
    
    Script Before Body Close Best Performance
  - Async Attribute
    
    Download Parallel Execute Immediate
  - Defer Attribute
    
    Download Parallel Execute After HTML
  - Async vs Defer
    
    Async for Independent Scripts
    
    Defer for Dependent Scripts
- External JavaScript
  - External File
    
    .js File Extension
  - Link Script
    
    Script Tag Src Attribute
  - Benefits
    
    Cached by Browser
    
    Separate Concerns HTML vs JS
- JS Output
  - document.write
    
    Write Directly to HTML
    
    Overwrites Page After Load
  - console.log
    
    Output to Browser Console
  - alert
    
    Popup Alert Box
  - confirm
    
    Yes No Confirmation Dialog
  - prompt
    
    User Input Dialog
  - innerHTML
    
    Change Content of Element
- JS Variables
  - Variable Declaration
    
    var Old Way Function Scope
    
    let Modern Way Block Scope
    
    const Constant Value Block Scope
  - Naming Rules
    
    Cannot Start with Number
    
    Case Sensitive camelCase
- JS Data Types
  - String
    
    Text Values in Quotes
  - Number
    
    Integers and Decimals
  - Boolean
    
    True or False Values
  - Array
    
    List of Values
  - Object
    
    Key Value Pairs
  - Undefined
    
    Variable Declared No Value
  - Null
    
    Empty Value Intentional
- JS Functions
  - Function Declaration
    
    function name() {}
  - Function Expression
    
    const name = function() {}
  - Arrow Function
    
    const name = () => {}
  - Parameters
    
    Input Values to Function
  - Return Value
    
    Output from Function
- JS Events
  - Common Events
    
    onclick Mouse Click
    
    ondblclick Double Click
    
    onmouseover Mouse Enter
    
    onmouseout Mouse Leave
    
    onmousedown Mouse Button Press
    
    onmouseup Mouse Button Release
    
    onmousemove Mouse Movement
  - Keyboard Events
    
    onkeydown Key Press
    
    onkeyup Key Release
    
    onkeypress Key Hold
  - Form Events
    
    onsubmit Form Submission
    
    onreset Form Reset
    
    onchange Input Value Change
    
    oninput Live Input Change
    
    onfocus Input Focus
    
    onblur Input Blur
  - Window Events
    
    onload Page Load Complete
    
    onresize Window Resize
    
    onscroll Page Scroll
    
    onbeforeunload Before Page Close
- DOM Manipulation
  - Selecting Elements
    
    getElementById
    
    getElementsByClassName
    
    getElementsByTagName
    
    querySelector
    
    querySelectorAll
  - Change Content
    
    innerHTML Property
    
    textContent Property
  - Change CSS
    
    style.property = value
    
    classList.add remove
  - Create Elements
    
    document.createElement
    
    appendChild Method
  - Remove Elements
    
    removeChild Method
    
    element.remove Method
- JS Examples
  - Show Hide Element
    
    Toggle Display None
  - Change Text on Click
    
    Button Click Update Text
  - Form Validation
    
    Check Empty Fields
    
    Validate Email Format
  - Dynamic List
    
    Add Remove List Items
  - Counter App
    
    Increment Decrement Counter
  - Image Slider
    
    Next Previous Image
  - Accordion
    
    Expand Collapse Sections
  - Tab Component
    
    Switch Between Tabs
  - Dark Mode
    
    Toggle Light Dark Theme
  - Back to Top
    
    Smooth Scroll to Top
- JS Libraries
  - jQuery
    
    Popular jQuery Library
  - React
    
    React JS Framework
  - Vue
    
    Vue JS Framework
  - Angular
    
    Angular Framework
HTML File Paths
- Absolute Path
  - Full URL
    
    https://example.com/image.jpg
    
    https://www.google.com
  - External Resources
    
    Linking to External Website
  - External Images
    
    Image from Another Domain
  - CDN Usage
    
    https://cdn.example.com/style.css
- Relative Path
  - Same Folder
    
    image.jpg or ./image.jpg
    
    about.html
  - Subfolder
    
    images/photo.jpg
    
    folder/page.html
  - Parent Folder
    
    ../image.jpg
    
    ../css/style.css
  - Two Levels Up
    
    ../../images/logo.png
  - Root Relative
    
    /images/photo.jpg
    
    /css/main.css
- Path Best Practices
  - Organize Files
    
    Separate Folders for CSS JS Images
  - Lowercase Names
    
    Avoid Case Sensitivity Issues
  - No Spaces
    
    Use Hyphens or Underscores
  - Descriptive Names
    
    hero-image.jpg not img1.jpg
- Common Mistakes
  - Incorrect Case
    
    Image.jpg vs image.jpg
  - Wrong Slash
    
    Use Forward Slash / Not Backslash \
  - Missing Extension
    
    style not style.css
  - Double Dot Error
    
    ../ when No Parent Folder
- File Path Examples
  - HTML to CSS
    
    css/style.css
  - HTML to JS
    
    js/script.js
  - HTML to Image
    
    images/photo.jpg
  - CSS to Image
    
    ../images/bg.jpg
  - HTML to Font
    
    fonts/arial.ttf
HTML Head
- Meta Tags
- Link Tags
  - Preconnect
    
    Preconnect to Google Fonts
    
    Preconnect to CDN
  - Preload
    
    Preload Critical CSS
    
    Preload Hero Image
  - Prefetch
    
    Prefetch Next Page Resource
  - DNS Prefetch
    
    DNS Prefetch External Domains
  - Alternate
    
    Alternate RSS Feed
    
    Alternate Mobile Version
    
    Alternate Language Version
HTML Layout
- Layout Basics
  - Page Structure
    
    Header Navigation Main Footer
  - Wireframe
    
    Visual Blueprint of Page
  - Common Patterns
    
    Header Top Navigation
    
    Sidebar Left or Right
    
    Full Width Layout
- Layout Techniques
- Responsive Layout
  - Mobile First
    
    Design for Mobile Then Desktop
    
    Min Width Media Queries
  - Desktop First
    
    Max Width Media Queries
  - Breakpoints
    
    Mobile 480px
    
    Tablet 768px
    
    Desktop 1024px
    
    Widescreen 1200px
  - Responsive Navigation
    
    Hamburger Menu Mobile
    
    Media Query for Desktop Menu
  - Responsive Columns
    
    Stack on Mobile Row on Desktop
  - Responsive Images
    
    Max Width 100 Percent
  - Responsive Text
    
    Viewport Units vw vh
  - Responsive Tables
    
    Horizontal Scroll on Mobile
- Layout Examples
  - Blog Layout
    
    Header Post Sidebar Footer
    
    Post Card Grid
  - Ecommerce Layout
    
    Product Grid with Filters
    
    Product Details Page
  - Portfolio Layout
    
    Masonry Grid Gallery
    
    Filterable Portfolio
  - Landing Page
    
    Hero Section Features CTA
    
    Testimonials Pricing Footer
  - Admin Dashboard
    
    Sidebar Menu Top Bar
    
    Cards Charts Tables
  - Social Media
    
    Feed Layout Stories
- Modern Layout
  - CSS Grid + Flexbox
    
    Grid for Page Layout Flex for Components
    
    Nested Flex Inside Grid
  - Container Queries
    
    Element Based Responsive Design
    
    Container Type Inline Size
  - Subgrid
    
    Subgrid for Nested Grid Alignment
HTML Responsive
- Viewport Meta
  - Viewport Tag
    
    meta name="viewport"
  - Viewport Properties
    
    width=device-width
    
    initial-scale=1.0
    
    maximum-scale=1.0
    
    user-scalable=yes no
- Media Queries
  - Syntax
    
    @media media type and condition
  - Media Types
    
    screen print all speech
  - Common Breakpoints
    
    @media (max-width:768px)
    
    @media (min-width:769px)
    
    @media (orientation:portrait)
    
    @media (orientation:landscape)
    
    @media (prefers-color-scheme:dark)
    
    @media (prefers-reduced-motion)
  - CSS Example
    
    Change Layout on Mobile
    
    Hide Element on Mobile
    
    Change Font Size on Tablet
- Responsive Images
  - Srcset Attribute
    
    Multiple Image Options
  - Srcset Example
    
    small.jpg 600w medium.jpg 1200w
  - Sizes Attribute
    
    (max-width:600px) 100vw
    
    50vw for Desktop
  - Picture Element
    
    Art Direction Different Crop
  - Image Set
    
    x Descriptor for Pixel Density
- Responsive Typography
  - Viewport Units
    
    Font Size in vw
  - Clamp Function
    
    clamp(16px
    
    Responsive Font Fluid
  - Calc Function
    
    calc(16px + 1vw)
  - Media Queries Font
    
    Change Font Size Breakpoints
  - Line Height
    
    Responsive Line Height
- Responsive Layout
  - Flexbox Wrap
    
    Flex Wrap for Responsive
  - Grid Auto Fit
    
    Grid Template Columns auto-fit
  - Grid MinMax
    
    minmax(250px
  - Order Property
    
    Reorder Elements on Mobile
- Responsive Navigation
  - Hamburger Menu
    
    CSS Only Hamburger
    
    JavaScript Toggle
  - Off Canvas Menu
    
    Slide from Side
  - Top Navigation
    
    Stack Vertically on Mobile
HTML Computercode
- Code Tag
  - Inline Code
    
    <code> for Short Code Snippets
  - Monospace Font
    
    Default Courier New
  - Escape HTML
    
    < for < and > for >
- Pre Tag
  - Preformatted Block
    
    <pre> for Code Blocks
  - Preserve Spaces
    
    Maintains Indentation
  - Pre with Code
    
    Nesting <code> Inside <pre>
  - Scroll Overflow
    
    Overflow-x Auto for Long Lines
  - Syntax Highlighting
    
    Highlight JS Library
    
    Prism JS for Code Blocks
- Kbd Tag
  - Keyboard Input
    
    <kbd> for Key Presses
  - Key Combinations
    
    Ctrl+C Ctrl+V
  - Key Styling
    
    Background Border Shadow
- Samp Tag
  - Sample Output
    
    <samp> for Program Output
  - Error Messages
    
    Error: File Not Found
  - Command Output
    
    > Hello World
- Var Tag
  - Variable Name
    
    <var> for Math Variables
  - Math Expressions
    
    x + y = z
  - Italic Style
    
    Default Font Style Italic
HTML Semantics
- Semantic Elements
  - Definition
    
    Meaningful HTML Elements
  - Importance
    
    SEO and Accessibility Benefits
  - Non Semantic
    
    div and span No Meaning
  - Semantic
    
    header nav main article section aside footer
- Header Tag
  - <header>
    
    Introductory Content Container
    
    Site Logo Navigation Links
    
    Multiple Headers Allowed
- Nav Tag
  - <nav>
    
    Navigation Links Container
    
    Primary Secondary Navigation
    
    Footer Navigation Links
- Main Tag
  - <main>
    
    Main Content of Page
    
    Only One Main per Page
    
    Skip to Main Link Accessibility
- Section Tag
  - <section>
    
    Thematic Grouping of Content
    
    Should Have Heading Inside
    
    About Us Section Contact Section
- Article Tag
  - <article>
    
    Self Contained Content
    
    Blog Post News Article
    
    Forum Post Comment
- Aside Tag
  - <aside>
    
    Sidebar Content
    
    Related Links Advertisement
    
    Pull Quote Author Bio
- Footer Tag
  - <footer>
    
    Footer Content Container
    
    Copyright Contact Links
    
    Multiple Footers Allowed
- Figure Tag
  - <figure>
    
    Illustrations Diagrams
- Figcaption Tag
  - <figcaption>
    
    Caption Inside Figure
- Time Tag
  - <time>
    
    Machine Readable Date Time
    
    datetime Attribute YYYY-MM-DD
- Mark Tag
  - <mark>
    
    Highlighted Text
- Details Summary
  - <details>
    
    Expandable Disclosure Widget
  - <summary>
    
    Visible Heading for Details
  - Open Attribute
    
    Start Expanded State
- Address Tag
  - <address>
    
    Contact Information Container
- Semantic vs Non Semantic
  - SEO Impact
    
    Semantic Better Rankings
  - Screen Readers
    
    Semantic Better Navigation
HTML HTML Entities
- Entities Introduction
  - Reserved Characters
    
    < > & " '
  - Why Entities
    
    Prevent HTML Parsing
HTML HTML Emojis
- Emoji Introduction
  - Emoji Support
    
    UTF-8 Required
- Emoji Methods
  - Decimal Code
    
    😀
  - Hexadecimal Code
    
    😀
  - Direct Copy Paste
    
    😀 Copy Emoji
- Smiley Emojis
  - Smiling Face
    
    😀 Grinning Face
  - Smiling Eyes
    
    😊 Smiling with Eyes
  - Tears of Joy
    
    😂 Face with Tears
  - Heart Eyes
    
    😍 Heart Eyes
  - Smiling Halo
    
    😇 Smiling Halo
  - Winking Face
    
    😉 Winking Face
  - Kissing Face
    
    😘 Kissing Face
- Emotion Emojis
  - Sad Face
    
    😢 Crying Face
  - Loud Cry
    
    😭 Loudly Crying
  - Angry Face
    
    😠 Angry Face
  - Pouting Face
    
    😡 Pouting Face
  - Dizzy Face
    
    😵 Dizzy Face
  - Exploding Head
    
    🤯 Exploding Head
- Hand Emojis
  - Thumbs Up
    
    👍 Thumbs Up
  - Thumbs Down
    
    👎 Thumbs Down
  - Clapping Hands
    
    👏 Clapping Hands
  - Folded Hands
    
    🙏 Folded Hands
  - OK Hand
    
    👌 OK Hand
  - Prayer Beads
    
    📿 Prayer Beads
- Heart Emojis
  - Red Heart
    
    ❤️ Red Heart
  - Orange Heart
    
    🧡 Orange Heart
  - Yellow Heart
    
    💛 Yellow Heart
  - Green Heart
    
    💚 Green Heart
  - Blue Heart
    
    💙 Blue Heart
  - Purple Heart
    
    💜 Purple Heart
  - Broken Heart
    
    💔 Broken Heart
  - Heart Exclamation
    
    ❤️‍🔥 Heart Exclamation
- Animal Emojis
  - Dog Face
    
    🐶 Dog Face
  - Cat Face
    
    🐱 Cat Face
  - Monkey Face
    
    🐵 Monkey Face
  - Panda Face
    
    🐼 Panda Face
  - Lion Face
    
    🦁 Lion Face
  - Tiger Face
    
    🐯 Tiger Face
  - Fox Face
    
    🦊 Fox Face
- Food Emojis
  - Pizza Slice
    
    🍕 Pizza Slice
  - Burger
    
    🍔 Hamburger
  - Fries
    
    🍟 French Fries
  - Ice Cream
    
    🍦 Ice Cream
  - Cake
    
    🍰 Cake
  - Apple
    
    🍎 Red Apple
- Flags Emojis
  - India Flag
    
    🇮🇳 India Flag
  - USA Flag
    
    🇺🇸 USA Flag
  - UK Flag
    
    🇬🇧 UK Flag
  - Canada Flag
    
    🇨🇦 Canada Flag
  - Australia Flag
    
    🇦🇺 Australia Flag
HTML HTML Charsets
- Character Sets
  - ASCII
    
    American Standard Code for Information Interchange
    
    128 Characters 0-127
  - ANSI
    
    Windows 1252 Default Windows
  - ISO-8859-1
    
    Latin 1 Western European
  - UTF-8
    
    Unicode 8 Bit Variable Length
    
    Supports All Languages
    
    Emoji Support
  - UTF-16
    
    Unicode 16 Bit Fixed Length
- Meta Charset
  - HTML4 Charset
    
    <meta http-equiv="Content-Type">
  - HTML5 Charset
    
    <meta charset="UTF-8">
  - Charset Position
    
    Within First 1024 Bytes
HTML HTML URL Encode
- URL Encoding
  - Why Encode
    
    Convert Non ASCII Characters
  - Format
    
    Percent Sign Followed by Hex Code
  - Space
    
    %20 or Plus Sign
- Common Encodings
  - Forward Slash
    
    %2F
  - Colon
    
    %3A
  - Semicolon
    
    %3B
  - Equal Sign
    
    %3D
  - Question Mark
    
    %3F
  - Ampersand
    
    26%
  - Hash
    
    23%
  - Percent
    
    25%
HTML Forms
- Form Introduction
  - Form Element
    
    <form> for User Input
  - Purpose
    
    Collect Data from Users
  - Submission
    
    Send Data to Server
- Form Attributes
  - Action Attribute
    
    URL Where Form Data Sent
  - Method Attribute
    
    GET vs POST Method
  - GET Method
    
    Data in URL Visible
    
    Limited Data Size 2048 Characters
    
    Bookmarkable URLs
    
    Not for Sensitive Data
  - POST Method
    
    Data in Request Body Hidden
    
    No Size Limit
    
    Not Bookmarkable
    
    For Sensitive Data Passwords
  - Target Attribute
    
    _blank _self _parent _top
  - Enctype Attribute
    
    application/x-www-form-urlencoded Default
    
    multipart/form-data for File Upload
    
    text/plain for Debug
  - Novalidate Attribute
    
    Disable Browser Validation
  - Autocomplete Attribute
    
    on off for Form
  - Name Attribute
    
    Form Name for JavaScript
- Form Elements
  - Input Element
    
    <input> Most Versatile
  - Textarea Element
    
    <textarea> Multi-line Text
  - Select Element
    
    <select> Dropdown List
  - Option Element
    
    <option> Dropdown Items
  - Optgroup Element
    
    <optgroup> Group Options
  - Button Element
    
    <button> Clickable Button
  - Label Element
    
    <label> Input Description
  - Fieldset Element
    
    <fieldset> Group Related Fields
  - Legend Element
    
    <legend> Fieldset Caption
  - Datalist Element
    
    <datalist> Autocomplete Options
  - Output Element
    
    <output> Result Display
- Input Types
  - Text Type
    
    type="text" Single Line Text
  - Password Type
    
    type="password" Masked Input
  - Email Type
    
    type="email" Email Validation
  - Number Type
    
    type="number" Numeric Input
  - Range Type
    
    type="range" Slider Control
  - Date Type
    
    type="date" Date Picker
  - Time Type
    
    type="time" Time Picker
  - Datetime Local
    
    type="datetime-local" Date Time Picker
  - Month Type
    
    type="month" Month Picker
  - Week Type
    
    type="week" Week Picker
  - Color Type
    
    type="color" Color Picker
  - Checkbox Type
    
    type="checkbox" Multiple Selection
  - Radio Type
    
    type="radio" Single Selection
  - File Type
    
    type="file" File Upload
  - Submit Type
    
    type="submit" Submit Button
  - Reset Type
    
    type="reset" Reset Form
  - Button Type
    
    type="button" Custom Button
  - Hidden Type
    
    type="hidden" Hidden Field
  - Image Type
    
    type="image" Image as Submit
  - Search Type
    
    type="search" Search Field
  - Tel Type
    
    type="tel" Telephone Number
  - URL Type
    
    type="url" Website URL
- Input Attributes
  - Name Attribute
    
    Form Data Key Name
  - Value Attribute
    
    Default Value
  - Placeholder Attribute
    
    Hint Text
  - Required Attribute
    
    Field Mandatory
  - Readonly Attribute
    
    Cannot Edit
  - Disabled Attribute
    
    Cannot Interact
  - Autofocus Attribute
    
    Auto Focus on Load
  - Size Attribute
    
    Input Width Characters
  - Maxlength Attribute
    
    Maximum Characters
  - Minlength Attribute
    
    Minimum Characters
  - Min Attribute
    
    Minimum Number Date
  - Max Attribute
    
    Maximum Number Date
  - Step Attribute
    
    Number Increment Step
  - Pattern Attribute
    
    Regex Validation
  - Autocomplete Attribute
    
    on off for Input
  - Multiple Attribute
    
    Multiple File Selection
  - Form Attribute
    
    Associate with Form ID
  - Formaction Attribute
    
    Override Form Action
  - Formmethod Attribute
    
    Override Form Method
  - Formnovalidate
    
    Override Novalidate
  - List Attribute
    
    Datalist ID Connection
- Textarea Attributes
  - Textarea Name
    
    Name Attribute
  - Textarea Rows
    
    Number of Visible Rows
  - Textarea Cols
    
    Number of Visible Columns
  - Textarea Wrap
    
    Soft Hard Wrap Style
  - Textarea Placeholder
    
    Hint Text
  - Textarea Maxlength
    
    Maximum Characters
- Select Attributes
  - Select Name
    
    Name for Form Submission
  - Select Size
    
    Number Visible Options
  - Select Multiple
    
    Multiple Selection Allowed
  - Option Value
    
    Value Sent to Server
  - Option Selected
    
    Pre-selected Option
  - Option Disabled
    
    Disable Specific Option
  - Optgroup Label
    
    Group Heading
  - Optgroup Disabled
    
    Disable Entire Group
- Button Attributes
  - Button Type
    
    Submit Reset Button
  - Button Name
    
    Form Data Key
  - Button Value
    
    Form Data Value
  - Button Disabled
    
    Disable Button
  - Formaction
    
    Override Submit URL
  - Formmethod
    
    Override HTTP Method
- Label Attributes
  - Label For
    
    Connect to Input ID
  - Label Accessibility
    
    Screen Reader Support
  - Click Label Focus Input
    
    Better UX
- Fieldset Legend
  - Fieldset Border
    
    Group Visual Border
  - Fieldset Disabled
    
    Disable All Inside
  - Legend Styling
    
    Customize Legend Look
- Datalist
  - Datalist ID
    
    Referenced by Input List
  - Option Value
    
    Autocomplete Suggestion
  - Option Label
    
    Display Text Different from Value
- Form Validation
  - HTML5 Validation
    
    Browser Built-in
  - Required Validation
    
    Field Must Fill
  - Email Validation
    
    Automatic Email Check
  - Number Validation
    
    Min Max Step Check
  - Pattern Validation
    
    Regex Custom Check
  - Validation Styling
    
    :valid :invalid Pseudo Classes
  - Custom Validation
    
    JavaScript Validity API
  - Validation Message
    
    setCustomValidity Method
- Form Examples
  - Login Form
    
    Username and Password
  - Registration Form
    
    Name Email Password Phone
  - Contact Form
    
    Name Email Message Subject
  - Feedback Form
    
    Rating Comments Suggestion
  - Search Form
    
    Search Box with Submit
  - Newsletter Form
    
    Email Subscribe Unsubscribe
  - Payment Form
    
    Credit Card Details
  - Address Form
    
    Street City State Zip
  - Survey Form
    
    Radio Checkbox Select Inputs
  - File Upload Form
    
    Profile Picture Upload
- Form Styling
  - CSS Input Styling
    
    Input Padding Border Radius
  - CSS Input Focus
    
    Focus Ring Color Change
  - CSS Invalid Input
    
    Red Border on Error
  - CSS Submit Button
    
    Button Hover Effects
  - Responsive Form
    
    Full Width on Mobile
- Form Accessibility
  - ARIA Labels
    
    aria-label for Icon Inputs
  - ARIA Required
    
    aria-required="true"
  - Error Announcement
    
    aria-live="assertive"
  - Fieldset Legend
    
    Group Related Inputs
HTML Graphics
- Canvas Introduction
  - Canvas Element
    
    <canvas> for Drawing
  - Canvas Size
    
    Width Height Attributes
  - Fallback Content
    
    Text for Old Browsers
- Canvas vs SVG
  - Canvas Bitmap
    
    Pixel Based Drawing
  - SVG Vector
    
    Math Based Drawing
  - Canvas Use Case
    
    Games Animations
  - SVG Use Case
    
    Logos Icons Illustrations
- Canvas JavaScript
  - Get Context
    
    canvas.getContext("2d")
  - 2D Context
    
    CanvasRenderingContext2D Object
- Canvas Shapes
  - Rects
    
    fillRect strokeRect clearRect
  - Rounded Rect
    
    Context fillRect with Rounding
- Canvas Lines
  - Begin Path
    
    context.beginPath()
  - Move To
    
    context.moveTo(x
  - Line To
    
    context.lineTo(x
  - Stroke
    
    context.stroke()
- Canvas Circles
  - Arc Method
    
    context.arc(x
  - Full Circle
    
    0 to 2 * Math.PI
- Canvas Colors
  - Fill Style
    
    context.fillStyle = "red"
  - Stroke Style
    
    context.strokeStyle = "blue"
  - Gradient
    
    createLinearGradient createRadialGradient
- Canvas Text
  - Fill Text
    
    context.fillText("text"
  - Stroke Text
    
    context.strokeText("text"
  - Font Size
    
    context.font = "30px Arial"
- Canvas Images
  - Draw Image
    
    context.drawImage(image
  - Image Scaling
    
    context.drawImage(image
- Canvas Transformations
  - Translate
    
    context.translate(x
  - Rotate
    
    context.rotate(angle)
  - Scale
    
    context.scale(x
  - Save Restore
    
    context.save() context.restore()
- Canvas Animations
  - Request Animation Frame
    
    window.requestAnimationFrame
  - Clear Canvas
    
    context.clearRect(0
- Canvas Examples
  - Drawing Circle
    
    Simple Circle Drawing
  - Smiley Face
    
    Face with Eyes Smile
  - Rectangle Shape
    
    Filled Rectangle
  - Line Drawing
    
    Straight Diagonal Lines
  - Colorful Gradient
    
    Linear Gradient Fill
  - Animated Square
    
    Moving Square Animation
  - Bouncing Ball
    
    Ball Physics Animation
- SVG Introduction
  - SVG Element
    
    <svg> for Vector Graphics
  - ViewBox
    
    Coordinate System Definition
  - Width Height
    
    Canvas Size
- SVG Shapes
  - Rectangle
    
    <rect> x y width height
  - Rectangle Rounded
    
    rx ry Attributes
  - Circle
    
    <circle> cx cy r
  - Ellipse
    
    <ellipse> cx cy rx ry
  - Line
    
    <line> x1 y1 x2 y2
  - Polyline
    
    <polyline> points="x1
  - Polygon
    
    <polygon> points="x1
- SVG Path
  - Path Element
    
    <path> d Attribute
  - Move To
    
    M x y
  - Line To
    
    L x y
  - Horizontal Line
    
    H x
  - Vertical Line
    
    V y
  - Close Path
    
    Z
  - Arc
    
    A rx ry x-axis-rotation large-arc sweep x y
  - Quadratic Bezier
    
    Q x1 y1 x y
  - Cubic Bezier
    
    C x1 y1 x2 y2 x y
- SVG Text
  - Text Element
    
    <text> x y
  - Text Styling
    
    fill font-size font-family
  - Text Path
    
    <textPath> Along Path
- SVG Styling
  - Fill Color
    
    fill="red"
  - Stroke Color
    
    stroke="blue"
  - Stroke Width
    
    stroke-width="2"
  - Opacity
    
    fill-opacity stroke-opacity opacity
- SVG Group
  - Group Element
    
    <g> Group Shapes
- SVG Transform
  - Translate
    
    transform="translate(x
  - Rotate
    
    transform="rotate(angle)"
  - Scale
    
    transform="scale(x
- SVG Examples
  - Simple Circle
    
    Red Circle SVG
  - Flag SVG
    
    Indian Flag Tricolor
  - Logo SVG
    
    Company Logo Design
  - Icon SVG
    
    Heart Star Icon
  - Chart SVG
    
    Bar Chart Pie Chart
- SVG Animation
  - SMIL Animation
    
    <animate> Inside SVG
- WebGPU API
  - WebGPU
    
    Next Gen Graphics API
  - GPUDevice
    
    GPU Device Request
  - GPUCanvasContext
    
    Canvas Context
  - GPURenderPipeline
    
    Render Pipeline
  - GPUComputePipeline
    
    Compute Pipeline
  - GPUCommandEncoder
    
    Command Encoding
  - GPUBuffer
    
    GPU Buffer
  - GPUTexture
    
    GPU Texture
  - WebGPU vs WebGL
    
    Performance Comparison
- WebGL 2.0
  - WebGL2RenderingContext
    
    WebGL 2.0 Context
  - Sampler Objects
    
    Texture Sampling
  - 3D Textures
    
    Volume Textures
  - Transform Feedback
    
    GPU Data Feedback
  - Uniform Buffer Objects
    
    Uniform Buffers
  - Vertex Array Objects
    
    VAO Support
- WebXR API
  - WebXR Device API
    
    AR VR on Web
  - XRSession
    
    Create XR Session
  - XRFrame
    
    Get XR Frame Data
  - XRViewerPose
    
    Get Viewer Pose
  - XRInputSource
    
    Handle Controller Input
  - XRWebGLLayer
    
    WebGL Integration
  - Augmented Reality
    
    AR on Web
  - Virtual Reality
    
    VR on Web
  - Hit Testing
    
    AR Hit Testing
  - Plane Detection
    
    AR Plane Detection
  - Hand Tracking
    
    Hand Tracking Support
  - Light Estimation
    
    AR Light Estimation
  - Immersive Web
    
    Immersive Experiences
HTML Media
- Video Element
  - <video>
    
    Video Player Embed
- Video Attributes
  - Src Attribute
    
    Video File URL
  - Controls Attribute
    
    Show Play Pause Volume
  - Autoplay Attribute
    
    Start Playing Automatically
  - Loop Attribute
    
    Repeat Video
  - Muted Attribute
    
    Start Muted for Autoplay
  - Poster Attribute
    
    Thumbnail Image Before Play
  - Preload Attribute
    
    Load Video on Page Load
  - Width Height
    
    Video Player Dimensions
- Video Source
  - Source Element
    
    <source> Multiple Formats
  - MP4 Format
    
    MP4 H.264 Best Support
  - WebM Format
    
    WebM VP8 VP9 Open Source
  - OGG Format
    
    OGG Theora
  - Type Attribute
    
    Video/mp4 video/webm
- Video Methods
  - JavaScript Control
    
    play() pause() load()
- Video Properties
  - Current Time
    
    currentTime Property
  - Duration
    
    duration Property
  - Volume
    
    volume Property 0 to 1
- Video Events
  - Onloadedmetadata
    
    Video Metadata Loaded
  - Onplay
    
    Video Started Playing
  - Onpause
    
    Video Paused
  - Onended
    
    Video Finished
  - Onerror
    
    Video Error Occurred
- Video Styling
  - Border Radius
    
    Rounded Video Player
  - Box Shadow
    
    Shadow Effect on Video
  - Object Fit
    
    Cover Contain Fill
- Video Responsive
  - Responsive Video
    
    Width 100% Height Auto
  - Aspect Ratio
    
    16:9 Aspect Ratio Container
  - Padding Trick
    
    Padding Bottom 56.25%
- Audio Element
  - <audio>
    
    Audio Player Embed
- Audio Attributes
  - Controls Attribute
    
    Show Play Pause
  - Autoplay Attribute
    
    Play Automatically
  - Loop Attribute
    
    Repeat Audio
  - Muted Attribute
    
    Start Muted
  - Preload Attribute
    
    Load Audio
- Audio Source
  - MP3 Format
    
    MP3 Best Compatibility
  - OGG Format
    
    OGG Vorbis
  - WAV Format
    
    WAV Uncompressed
- Audio Methods
  - JavaScript Control
    
    play() pause()
- Audio Properties
  - CurrentTime
    
    Seek Audio Position
- YouTube Embed
  - YouTube Iframe
    
    Embed YouTube Videos
  - YouTube URL Format
    
    https://youtube.com/embed/VIDEO_ID
  - YouTube Parameters
    
    autoplay=1&mute=1
    
    controls=0 Hide Controls
    
    loop=1 playlist=ID
    
    modestbranding=1
    
    rel=0 No Related Videos
HTML APIs
- Web Storage Introduction
  - Local Storage
    
    Store Data in Browser
  - Session Storage
    
    Temporary Session Data
  - Cookies vs Storage
    
    Comparison
- Local Storage
  - Set Item
    
    localStorage.setItem('key'
  - Get Item
    
    localStorage.getItem('key')
  - Remove Item
    
    localStorage.removeItem('key')
  - Clear All
    
    localStorage.clear()
  - Store Objects
    
    JSON.stringify() JSON.parse()
  - Check Support
    
    typeof(Storage) !== undefined
  - Storage Limit
    
    5-10 MB per Domain
  - Data Persistence
    
    Stays Until Manually Cleared
- Session Storage
  - Set Item
    
    sessionStorage.setItem('key'
  - Get Item
    
    sessionStorage.getItem('key')
  - Remove Item
    
    sessionStorage.removeItem('key')
  - Clear All
    
    sessionStorage.clear()
  - Tab Specific
    
    Data Per Tab Window
  - Session End
    
    Cleared on Browser Close
- Storage Events
  - Storage Event
    
    Triggered on Storage Change
  - Event Properties
    
    key oldValue newValue url
  - Cross Tab Communication
    
    Multiple Tabs Sync
- Geolocation API
  - Introduction
    
    Get User Location
  - Browser Support
    
    Check navigator.geolocation
  - Privacy
    
    User Permission Required
- Get Current Position
  - Success Callback
    
    Position Object Returned
  - Error Callback
    
    Handle Permission Denied
  - Options Object
    
    Enable High Accuracy
- Position Object
  - Latitude
    
    coords.latitude
  - Longitude
    
    coords.longitude
  - Altitude
    
    coords.altitude
  - Accuracy
    
    coords.accuracy Meters
  - Speed
    
    coords.speed
  - Timestamp
    
    position.timestamp
- Watch Position
  - watchPosition()
    
    Continuous Location Updates
  - clearWatch()
    
    Stop Watching Location
- Geolocation Errors
  - Permission Denied
    
    User Denied Location Access
  - Position Unavailable
    
    Location Unavailable
  - Timeout
    
    Request Timed Out
- Map Integration
  - Google Maps API
    
    Embed with Iframe
  - Leaflet JS
    
    Open Source Maps
  - Show User Location
    
    Map Centered on User
- Drag and Drop API
  - Introduction
    
    Drag and Drop Elements
  - Draggable Attribute
    
    draggable="true"
  - draggable
    
    Make Element Draggable
  - dragstart
    
    drag
  - dragenter
    
    dragover
  - setData
    
    Set Drag Data
  - getData
    
    Get Drag Data
  - File Drag and Drop
    
    Drop Files from Desktop
- Drag and Drop Events
  - Dragstart Event
    
    Fires When Drag Starts
  - Drag Event
    
    Fires During Drag
  - Dragend Event
    
    Fires When Drag Ends
  - Dragenter Event
    
    Drag Enters Drop Target
  - Dragover Event
    
    Drag Over Drop Target
  - Dragleave Event
    
    Drag Leaves Drop Target
  - Drop Event
    
    Fires When Dropped
- Drag and Drop Data
  - setData()
    
    Store Drag Data
  - getData()
    
    Retrieve Drag Data
  - Data Types
    
    text/plain text/html
- Drag and Drop Images
  - Default Drag
    
    Images Draggable by Default
- Drag and Drop Files
  - File Drag and Drop
    
    Desktop to Browser
- Web Workers
  - Introduction
    
    Background Script Threads
  - Main Thread
    
    UI Thread Non Blocking
  - Worker Thread
    
    Separate Background Thread
  - Create Worker
    
    new Worker('worker.js')
  - Post Message
    
    worker.postMessage(data)
  - On Message
    
    worker.onmessage = function(e)
  - Terminate Worker
    
    worker.terminate()
  - Error Handling
    
    worker.onerror
  - Dedicated Worker
    
    Single Page Worker
  - Shared Worker
    
    Multiple Pages Share
  - Worker Limitations
    
    No DOM Access
    
    No Window Object
    
    Limited API Access
  - Use Cases
    
    Heavy Calculations
    
    Image Processing
    
    Data Processing
- Server Sent Events
  - Introduction
    
    One Way Server to Client
  - EventSource Object
    
    new EventSource(url)
  - On Message
    
    eventSource.onmessage
  - Event Types
    
    Custom Events with Data
  - Error Handling
    
    eventSource.onerror
  - Close Connection
    
    eventSource.close()
  - vs WebSocket
    
    One Way vs Two Way
  - Use Cases
    
    Real Time Notifications
    
    Live Scores Stock Prices
- History API
  - pushState()
    
    Change URL Without Reload
    
    Add History Entry
  - replaceState()
    
    Replace Current URL
    
    Replace Current History
  - popstate Event
    
    Fires on Back Forward
  - State Object
    
    Store Data with URL
  - SPA Navigation
    
    Single Page App Routing
  - popstate
    
    Pop State Event
  - state
    
    Get State Object
  - SPA Routing
    
    Client Side Routing
- Canvas API
  - getContext()
    
    2d webgl
  - drawImage()
    
    Render Images on Canvas
  - getImageData()
    
    Pixel Data Access
  - putImageData()
    
    Draw Pixel Data
  - toDataURL()
    
    Export as Image
- Fullscreen API
  - requestFullscreen()
    
    Full Screen Mode
    
    Enter Fullscreen Mode
  - exitFullscreen()
    
    Exit Full Screen
    
    Exit Fullscreen Mode
  - fullscreenchange Event
    
    Fullscreen Toggle
    
    Fullscreen Toggle Event
  - fullscreenElement
    
    Check Fullscreen Element
    
    Get Fullscreen Element
  - fullscreenEnabled
    
    Check Fullscreen Support
  - Video Player Fullscreen
    
    Fullscreen Video
  - Game Fullscreen
    
    Fullscreen Game
- Clipboard API
  - writeText()
    
    Copy Text to Clipboard
  - readText()
    
    Paste Text from Clipboard
  - Permissions
    
    Requires User Permission
  - navigator.clipboard
    
    Async Clipboard Access
  - write
    
    Copy Rich Content
  - read
    
    Paste Rich Content
  - ClipboardItem
    
    Clipboard Data Item
  - Permission Required
    
    Clipboard Permission
  - Copy Image
    
    Copy Image to Clipboard
- Notifications API
  - requestPermission()
    
    Ask Notification Permission
    
    Request Notification Permission
  - new Notification()
    
    Show Desktop Notification
  - Notification Options
    
    Body Icon Tag
  - onclick Event
    
    Notification Click Handler
  - Notification
    
    Create Notification
  - close
    
    Close Notification
  - onclick
    
    Notification Click Handler
  - onclose
    
    Notification Close Handler
  - PermissionState
    
    Notification Permission State
  - Silent Notification
    
    Silent Push Notifications
- Page Visibility API
  - document.hidden
    
    Page Hidden Check
    
    Check Page Hidden
  - visibilitychange Event
    
    Tab Switch Detection
    
    Visibility Change Event
  - Use Cases
    
    Pause Video on Tab Switch
  - document.visibilityState
    
    Get Visibility State
  - Pause Video on Tab Switch
    
    Pause Media
  - Stop Animation on Tab Switch
    
    Save CPU
- Battery Status API
  - navigator.getBattery()
    
    Battery Information
    
    Get Battery Info
  - charging
    
    Is Battery Charging
    
    Check Battery Charging
  - chargingTime
    
    Get Charging Time
  - dischargingTime
    
    Get Discharging Time
  - level
    
    Get Battery Level
  - chargingchange Event
    
    Charging Change Event
  - levelchange Event
    
    Battery Level Change
- Battery StatusAPI
  - level
    
    Battery Percentage 0-1
- Network Information API
  - navigator.connection
    
    Network Info
    
    Get Network Info
  - effectiveType
    
    4g 3g 2g slow-2g
    
    Get Connection Type 4g 3g
  - downlink
    
    Download Speed Mbps
    
    Get Download Speed
  - rtt
    
    Get Round Trip Time
  - change Event
    
    Network Change Event
  - Adaptive Loading
    
    Load Based on Network
- Vibration API
  - navigator.vibrate()
    
    Device Vibration
    
    Vibrate Device
  - Vibration Pattern
    
    vibrate([200
    
    Vibrate Pattern Array
  - cancel
    
    Cancel Vibration
  - Game Haptics
    
    Game Vibration Feedback
- Sensor APIs
  - Accelerometer
    
    Device Motion Detection
  - Gyroscope
    
    Device Orientation
- Payment Request API
  - Payment Request
    
    Web Payments
  - show()
    
    Show Native Payment UI
    
    Show Payment UI
  - PaymentRequest
    
    Create Payment Request
  - abort
    
    Abort Payment
  - canMakePayment
    
    Check Payment Availability
  - PaymentResponse
    
    Handle Payment Response
  - complete
    
    Complete Payment Transaction
  - Basic Card Payment
    
    Basic Card Support
  - Google Pay Integration
    
    Google Pay API
  - Apple Pay Integration
    
    Apple Pay API
- Credential Management API
  - navigator.credentials
    
    Password Management
  - store()
    
    Save User Credentials
    
    Store Credential
  - get
    
    Get Credential
  - preventSilentAccess
    
    Prevent Silent Access
  - Password Storage
    
    Save User Password
  - Password AutoFill
    
    Autofill Credentials
- Web Speech API
  - Speech Recognition
    
    Speech to Text
  - Speech Synthesis
    
    Text to Speech
  - Synth
    
    speechSynthesis.speak()
  - SpeechRecognition
    
    Speech Recognition Interface
  - SpeechGrammar
    
    Speech Grammar Definition
  - SpeechRecognitionEvent
    
    Recognition Event
  - SpeechRecognitionAlternative
    
    Alternative Results
  - SpeechSynthesis
    
    Text to Speech Interface
  - SpeechSynthesisUtterance
    
    Speech Utterance Object
  - speak
    
    Speak Text
  - cancel
    
    Cancel Speech
  - pause
    
    Pause Speech
  - resume
    
    Resume Speech
  - getVoices
    
    Get Available Voices
  - Voice Recognition
    
    Voice Command App
  - Screen Reader
    
    Built-in Screen Reader
- WebRTC API
  - getUserMedia
    
    Access Camera Microphone
  - RTCPeerConnection
    
    Peer to Peer Connection
    
    P2P Connection Establishment
  - Video Chat
    
    Real Time Communication
  - MediaDevices
    
    Device Enumeration
  - addIceCandidate
    
    ICE Candidate Exchange
  - createOffer
    
    Create SDP Offer
  - createAnswer
    
    Create SDP Answer
  - setLocalDescription
    
    Set Local SDP
  - setRemoteDescription
    
    Set Remote SDP
  - DataChannel
    
    P2P Data Transfer
  - Video Call Implementation
    
    Real Time Video Call
  - Screen Sharing
    
    getDisplayMedia API
- WebUSB API
  - requestDevice
    
    Request USB Device
  - open
    
    Open USB Connection
  - selectConfiguration
    
    Select USB Configuration
  - claimInterface
    
    Claim USB Interface
  - controlTransferOut
    
    Send Control Transfer
  - transferIn
    
    Receive Data from USB
  - transferOut
    
    Send Data to USB
- WebSerial API
  - requestPort
    
    Request Serial Port
  - open
    
    Open Serial Connection
  - readable
    
    Read Data Stream
  - writable
    
    Write Data Stream
  - Arduino Connection
    
    Connect Arduino via Serial
- WebHID API
  - requestDevice
    
    Request HID Device
  - open
    
    Open HID Connection
  - sendReport
    
    Send HID Report
  - receiveReport
    
    Receive HID Report
  - Gamepad Support
    
    Connect Gamepad
- Web Bluetooth API
  - requestDevice
    
    Request Bluetooth Device
  - gatt
    
    Connect GATT Server
  - getPrimaryService
    
    Get Bluetooth Service
  - getCharacteristic
    
    Get Characteristic
  - readValue
    
    Read Bluetooth Value
  - writeValue
    
    Write Bluetooth Value
  - startNotifications
    
    Start Notifications
- Web MIDI API
  - requestMIDIAccess
    
    Request MIDI Access
  - MIDIInput
    
    MIDI Input Device
  - MIDIOutput
    
    MIDI Output Device
  - onmidimessage
    
    MIDI Message Event
  - Keyboard Connection
    
    Connect MIDI Keyboard
- Web Locks API
  - request
    
    Request Lock
  - query
    
    Query Lock State
  - Cross Tab Coordination
    
    Prevent Concurrent Access
- File System Access API
  - showOpenFilePicker
    
    Open File Picker
  - showSaveFilePicker
    
    Save File Picker
  - showDirectoryPicker
    
    Open Directory Picker
  - getFile
    
    Get File Handle
  - createWritable
    
    Create Writable Stream
  - write
    
    Write to File
  - close
    
    Close File Handle
  - remove
    
    Delete File
  - Local File Editor
    
    Build Text Editor
- Idle Detection API
  - IdleDetector
    
    Detect User Idle State
  - requestPermission
    
    Request Idle Permission
  - threshold
    
    Set Idle Threshold
- Keyboard Lock API
  - keyboard.lock
    
    Lock Modifier Keys
  - keyboard.unlock
    
    Release Keyboard Lock
  - Kiosk Mode
    
    Fullscreen Kiosk Application
- Pointer Lock API
  - requestPointerLock
    
    Lock Mouse Pointer
  - exitPointerLock
    
    Exit Pointer Lock
  - movementX
    
    mouse Movement X
  - movementY
    
    mouse Movement Y
  - First Person Game
    
    Camera Control
- Screen Wake Lock API
  - wakeLock.request
    
    Prevent Screen Sleep
  - release
    
    Release Wake Lock
  - Video Player
    
    Keep Screen On During Video
- Screen Orientation API
  - screen.orientation.type
    
    Get Orientation Type
  - screen.orientation.lock
    
    Lock Screen Rotation
  - screen.orientation.unlock
    
    Unlock Screen Rotation
  - orientationchange Event
    
    Detect Orientation Change
- Device Orientation API
  - deviceorientation
    
    Get Device Tilt
  - deviceorientationabsolute
    
    Get Absolute Orientation
  - devicemotion
    
    Get Device Acceleration
  - rotationRate
    
    Get Rotation Speed
  - acceleration
    
    Get Acceleration Data
  - interval
    
    Update Interval
  - Permission Required
    
    Sensor Permissions
  - Gyroscope Access
    
    Access Gyroscope
- Web Audio API
  - AudioContext
    
    Audio Processing Graph
  - OscillatorNode
    
    Generate Sound Wave
  - GainNode
    
    Control Volume
  - StereoPannerNode
    
    Pan Left Right
  - AnalyserNode
    
    Audio Visualization
  - BiquadFilterNode
    
    Audio Filter EQ
  - ConvolverNode
    
    Reverb Effect
  - DynamicsCompressorNode
    
    Compression Effect
  - DelayNode
    
    Echo Effect
  - MediaElementSource
    
    Audio from Video
  - MediaStreamAudioSource
    
    Microphone Input
  - createMediaStreamDestination
    
    Record Audio
  - Audio Visualization
    
    Audio Spectrum Analyzer
- MediaRecorder API
  - MediaRecorder
    
    Record Media Stream
  - start
    
    Start Recording
  - stop
    
    Stop Recording
  - pause
    
    Pause Recording
  - resume
    
    Resume Recording
  - ondataavailable
    
    Get Recorded Data
  - mimeType
    
    Set Recording Format
  - audioBitsPerSecond
    
    Audio Quality
  - videoBitsPerSecond
    
    Video Quality
  - Screen Recorder
    
    Record Screen
- MediaStream API
  - getUserMedia
    
    Access Camera Mic
  - getDisplayMedia
    
    Screen Share
  - MediaStreamTrack
    
    Individual Track Control
  - getTracks
    
    Get All Tracks
  - clone
    
    Clone Media Stream
  - addTrack
    
    Add Track to Stream
  - removeTrack
    
    Remove Track from Stream
  - Video Recorder
    
    Record Video
- Payment Handler API
  - PaymentHandler
    
    Register Payment Handler
  - canMakePayment
    
    Check Payment Availability
  - handlePayment
    
    Handle Payment Request
- Digital Goods API
  - getDetails
    
    Get Product Details
  - listProducts
    
    List Available Products
  - acknowledge
    
    Acknowledge Purchase
  - consume
    
    Consume Purchase
- Secure Payment Confirmation
  - SecurePaymentConfirmation
    
    Biometric Auth Payment
  - isSecurePaymentConfirmationAvailable
    
    Check Availability
  - WebAuthn Integration
    
    WebAuthn for Payment
- Web Share API
  - navigator.share
    
    Share Content
  - Share Data
    
    Title Text URL
  - Share Files
    
    Share Images Documents
  - canShare
    
    Check Share Availability
- Web Share Target API
  - Web Share Target
    
    Receive Shared Content
  - manifest.json
    
    Share Target Registration
  - Shared Content Handling
    
    Handle Shared Data
- Web Transport API
  - WebTransport
    
    Web Transport Connection
  - datagrams
    
    Unreliable Datagrams
  - streams
    
    Reliable Streams
  - WebTransport API vs WebSocket
    
    Comparison
- Web Codecs API
  - VideoEncoder
    
    Encode Video Frames
  - VideoDecoder
    
    Decode Video Frames
  - AudioEncoder
    
    Encode Audio
  - AudioDecoder
    
    Decode Audio
  - Low Latency Video
    
    Real Time Video Processing
- View Transitions API
  - document.startViewTransition
    
    Start View Transition
  - ViewTransition
    
    Transition Object
  - updateCallback
    
    DOM Update Callback
  - finished
    
    Transition Finished Promise
  - ready
    
    Transition Ready Promise
  - skipTransition
    
    Skip Transition Animation
  - SPA Transitions
    
    Single Page App Transitions
  - MPA Transitions
    
    Multi Page App Transitions
- Popover API
  - popover attribute
    
    Popover Element Declaration
  - popovertarget
    
    Popover Target Link
  - popovertargetaction
    
    Show Hide Toggle Action
  - showPopover
    
    Show Popover Method
  - hidePopover
    
    Hide Popover Method
  - togglePopover
    
    Toggle Popover Method
  - beforetoggle Event
    
    Before Toggle Event
  - toggle Event
    
    Toggle Event
  - Popover vs Dialog
    
    Comparison
- Dialog Element
  - showModal
    
    Show Modal Dialog
  - show
    
    Show Non Modal Dialog
  - close
    
    Close Dialog
  - returnValue
    
    Dialog Return Value
  - Modal Dialog
    
    Modal Implementation
- Details Summary
  - open Attribute
    
    Expand by Default
  - name Attribute
    
    Exclusive Accordion Group
- Navigation API
  - navigate
    
    Navigate Event
  - back
    
    Go Back
  - forward
    
    Go Forward
  - traverseTo
    
    Navigate to Key
  - currentEntry
    
    Get Current Navigation Entry
- Sanitizer API
  - Sanitizer
    
    HTML Sanitization
  - sanitize
    
    Sanitize HTML String
  - sanitizeFor
    
    Sanitize for Element
  - setHTML
    
    Set Sanitized HTML
  - XSS Prevention
    
    Prevent Cross Site Scripting
- Trusted Types API
  - TrustedTypePolicy
    
    Create Trusted Policy
  - createPolicy
    
    Create Policy
  - TrustedHTML
    
    Trusted HTML Object
  - TrustedScript
    
    Trusted Script Object
  - TrustedScriptURL
    
    Trusted Script URL
  - DOM XSS Prevention
    
    Prevent DOM Based XSS
- Permission API
  - navigator.permissions
    
    Query Permission Status
  - query
    
    Query Permission
  - request
    
    Request Permission
  - revoke
    
    Revoke Permission
  - Permissions List
    
    Geolocation Notifications Camera
- Reporting API
  - ReportingObserver
    
    Observe Reports
  - Report
    
    Report Object
  - Report Types
    
    Deprecation Intervention Crash
  - Report Endpoint
    
    Report Delivery Endpoint
- Intersection Observer API
  - IntersectionObserver
    
    Observe Element Visibility
  - observe
    
    Start Observing Element
  - unobserve
    
    Stop Observing Element
  - threshold
    
    Visibility Threshold
  - rootMargin
    
    Root Margin
  - Lazy Loading Images
    
    Lazy Load Implementation
  - Infinite Scroll
    
    Infinite Scroll Implementation
- Resize Observer API
  - ResizeObserver
    
    Observe Element Resize
  - observe
    
    Start Observing Resize
  - unobserve
    
    Stop Observing Resize
  - Responsive Components
    
    Component Based Responsive
- Mutation Observer API
  - MutationObserver
    
    Observe DOM Changes
  - observe
    
    Start Observing DOM
  - attributes
    
    Observe Attribute Changes
  - childList
    
    Observe Child Changes
  - subtree
    
    Observe Subtree Changes
  - DOM Change Tracking
    
    Track DOM Modifications
- FedCM
  - Federated Credential Management
    
    Identity Federation API
  - Identity Provider API
    
    Login with Google Facebook
  - IdP Sign In
    
    Identity Provider Sign In
HTML Accessibility
- Introduction
  - Web Accessibility
    
    Accessible Websites
  - WCAG
    
    Web Content Accessibility Guidelines
  - WAI-ARIA
    
    Accessible Rich Internet Applications
  - Screen Readers
    
    JAWS NVDA VoiceOver TalkBack
- Semantic HTML
  - Use Semantic Tags
    
    Header Nav Main Footer
  - Avoid Div Spam
    
    Use Meaningful Elements
- Alt Text
  - Images Alt Attribute
    
    Describe Image Purpose
  - Decorative Images
    
    Empty Alt Alt=""
  - Complex Images
    
    Long Description Nearby
- Headings
  - Proper Heading Order
    
    H1 then H2 then H3
  - No Skipping Levels
    
    H1 to H3 Not H4
  - One H1 Per Page
    
    Page Main Title
- Links
  - Descriptive Link Text
    
    Avoid Click Here
  - Link Purpose
    
    Understand Out of Context
  - Open in New Tab
    
    Notify User
- Forms
  - Label Elements
    
    Label For Input ID
  - Fieldset Legend
    
    Group Related Fields
  - Error Messages
    
    Clear Error Description
  - Focus Indicators
    
    Visible Focus Outline
  - ARIA Required
    
    aria-required="true"
- ARIA Attributes
  - ARIA Label
    
    aria-label for Icon Buttons
  - ARIA Labelledby
    
    aria-labelledby="id"
  - ARIA Describedby
    
    aria-describedby="id"
  - ARIA Expanded
    
    aria-expanded for Dropdowns
  - ARIA Hidden
    
    aria-hidden="true" Hide from Screen Readers
  - ARIA Live
    
    aria-live="polite assertive"
- ARIA Roles
  - Landmark Roles
    
    banner navigation main complementary contentinfo
  - Widget Roles
    
    button tab slider checkbox
  - Document Roles
    
    article heading img list
- Color Contrast
  - Minimum Ratio
    
    4.5:1 for Normal Text
  - Large Text Ratio
    
    3:1 for Large Text
  - Non Text Ratio
    
    3:1 for UI Components
  - Color Blindness
    
    Don't Rely Only on Color
- Keyboard Navigation
  - Tab Index
    
    tabindex="0" for Focusable
  - Skip to Content
    
    Link at Top to Skip Navigation
  - Focus Order
    
    Logical Tab Order
  - Focus Trap
    
    Modal Dialog Focus Loop
  - No Keyboard Trap
    
    Focus Always Movable
- Screen Reader Only
  - CSS Class
    
    Visually Hidden Text
  - Offscreen
    
    Position Absolute Off Screen
- Responsive Accessibility
  - Text Resize
    
    200% Zoom No Break
  - Content Reflow
    
    No Horizontal Scroll at 400%
- Testing Tools
  - Lighthouse
    
    Chrome DevTools Accessibility Audit
  - WAVE
    
    Web Accessibility Evaluation Tool
  - axe
    
    Accessibility Testing Extension
  - Screen Reader Testing
    
    NVDA JAWS VoiceOver
HTML Practice
- HTML Projects
  - Beginner Projects
    
    Personal Bio Page
    
    Photo Gallery
    
    To-Do List App
    
    Recipe Book Page
  - Intermediate Projects
    
    Blog Website
    
    E-commerce Product Page
    
    Portfolio Website
    
    Quiz Application
  - Advanced Projects
    
    Social Media Dashboard
    
    Learning Management System
    
    Real Estate Listing Site
    
    Job Portal Website
- HTML Exercises
  - Basic Exercises
    
    Create Hello World Page
    
    Add Title to Page
    
    Create Heading and Paragraph
    
    Add Image to Page
    
    Create Hyperlink
    
    Create Unordered List
    
    Create Ordered List
  - Intermediate Exercises
    
    Create Navigation Menu
    
    Create HTML Table
    
    Create Contact Form
    
    Create Registration Form
    
    Embed YouTube Video
    
    Create Image Gallery
  - Advanced Exercises
    
    Create Responsive Layout
    
    Create Flexbox Grid
    
    Create CSS Grid Layout
    
    Create Dropdown Menu
    
    Create Modal Popup
    
    Create Accordion
    
    Create Tabs Component
    
    Create Carousel Slider
- HTML Challenges
  - 30 Day Challenge
    
    Daily HTML Tasks
  - Code Pen Challenge
    
    Frontend Mentor Challenges
  - Responsive Challenge
    
    Build Mobile First Design
  - Accessibility Challenge
    
    Make Website Accessible
  - Performance Challenge
    
    Optimize Page Speed
- HTML Interview Prep
  - Basic Questions
    
    What is HTML Full Form
    
    Difference HTML vs HTML5
    
    What are Semantic Elements
    
    What is DOCTYPE
    
    What are Block and Inline Elements
  - Intermediate Questions
    
    Explain Form Elements
    
    What is Local Storage
    
    What are Data Attributes
    
    Explain Iframe
    
    What is Canvas
  - Advanced Questions
    
    Explain Web Workers
    
    Explain Drag and Drop API
    
    Explain Server Sent Events
    
    What is Shadow DOM
    
    Explain Custom Elements
  - Top 100 Questions
    
    Most Asked Interview Questions
HTML References
- HTML Tag List
  - Document Tags
    
    <!DOCTYPE> <html> <head> <body>
  - Metadata Tags
    
    <title> <meta> <link> <style>
  - Sectioning Tags
    
    <header> <nav> <section> <article> <aside> <footer>
  - Text Formatting
    
    <h1>-<h6> <p> <br> <hr> <b> <i> <strong> <em>
  - Lists Tags
    
    <ul> <ol> <li> <dl> <dt> <dd>
  - Table Tags
    
    <table> <tr> <td> <th> <thead> <tbody> <tfoot>
  - Form Tags
    
    <form> <input> <textarea> <button> <select> <option>
  - Media Tags
    
    <img> <video> <audio> <source> <canvas> <svg>
- Global Attributes
  - Core Attributes
    
    id class style title lang dir
  - Event Attributes
    
    onclick ondblclick onload onerror
  - Form Attributes
    
    autofocus disabled readonly required
  - Accessibility
    
    aria-* attributes
  - Data Attributes
    
    data-* custom attributes
- HTML Events
  - Mouse Events
    
    onclick ondblclick onmouseover onmouseout
  - Keyboard Events
    
    onkeydown onkeyup onkeypress
  - Form Events
    
    onsubmit onreset onchange oninput
  - Window Events
    
    onload onunload onresize onscroll
  - Touch Events
    
    ontouchstart ontouchmove ontouchend
- HTML Colors
  - Color Names
    
    140 Standard Color Names
  - Hex Codes
    
    000000 to FFFFFF
  - RGB Values
    
    0 to 255 Values
  - HSL Values
    
    0-360 Hue 0-100% Saturation Lightness
- HTML Canvas
  - Canvas Methods
    
    fillRect strokeRect clearRect
  - Canvas Paths
    
    beginPath moveTo lineTo stroke
  - Canvas Text
    
    fillText strokeText font
  - Canvas Images
    
    drawImage getImageData putImageData
- HTML Audio/Video
  - Media Properties
    
    currentTime duration volume paused
  - Media Methods
    
    play pause load canPlayType
  - Media Events
    
    canplay playing waiting ended error
- HTML Doctypes
  - HTML5
    
    <!DOCTYPE html>
  - HTML 4.01 Strict
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  - HTML 4.01 Transitional
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  - XHTML 1.0 Strict
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
- HTTP Status Codes
  - 1xx Information
    
    100 Continue 101 Switching Protocols
  - 2xx Success
    
    200 OK 201 Created
  - 3xx Redirection
    
    301 Moved Permanently 302 Found
  - 4xx Client Error
    
    400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found
  - 5xx Server Error
    
    500 Internal Server Error 502 Bad Gateway 503 Service Unavailable
- HTTP Methods
  - GET Method
    
    Retrieve Data
  - POST Method
    
    Send Data
  - PUT Method
    
    Update Entire Resource
  - PATCH Method
    
    Partial Update
  - DELETE Method
    
    Remove Resource
  - HEAD Method
    
    Headers Only
  - OPTIONS Method
    
    Allowed Methods
- PX to EM Converter
  - PX to EM Formula
    
    EM = PX / Base Font Size
  - Base Font Size
    
    16px Default Browser
  - Common Conversions
    
    16px = 1em 32px = 2em
  - REM vs EM
    
    REM Root EM Parent
- Keyboard Shortcuts
  - VS Code Shortcuts
    
    Ctrl+Shift+P Command Palette
    
    Ctrl+S Save Ctrl+Z Undo
    
    Ctrl+C Copy Ctrl+V Paste Ctrl+X Cut
    
    Ctrl+F Find Ctrl+H Replace
    
    Ctrl+Shift+F Find in Files
  - Browser Shortcuts
    
    F12 Developer Tools
    
    Ctrl+R Reload Ctrl+Shift+R Hard Reload
    
    Ctrl+T New Tab Ctrl+W Close Tab
    
    Ctrl+Tab Next Tab Ctrl+Shift+Tab Previous Tab
  - Mac Shortcuts
    
    Cmd instead of Ctrl for Mac
HTML Advanced
- Data Attributes
  - data-* Syntax
    
    custom data-attribute
  - JavaScript Access
    
    element.dataset.property
  - CSS Access
    
    attr(data-property)
  - Use Cases
    
    Store Extra Information
  - Examples
    
    data-user-id data-product-id
- Microdata
  - Microdata Introduction
    
    Schema.org Vocabulary
  - itemscope Attribute
    
    Define Microdata Scope
  - itemtype Attribute
    
    Schema URL Type
  - itemprop Attribute
    
    Property Name
  - Example
    
    Person Product Recipe Microdata
  - SEO Benefits
    
    Richer Search Results
  - Social Media
    
    Open Graph Protocol
  - Twitter Cards
    
    Twitter Summary Card
- Shadow DOM
  - Shadow DOM Introduction
    
    Encapsulated DOM Tree
  - attachShadow Method
    
    Create Shadow Root
  - Mode Open vs Closed
    
    Accessibility Difference
  - Shadow Host
    
    Parent Element
  - Shadow Root
    
    Root of Shadow Tree
  - Slot Element
    
    Content Projection
- Custom Elements
  - define Method
    
    customElements.define()
  - Lifecycle Callbacks
    
    connectedCallback disconnectedCallback
  - Attributes
    
    observedAttributes attributeChangedCallback
  - Extending HTML
    
    Extend Native Elements
- Web Components
  - Combination
    
    Custom Elements + Shadow DOM + HTML Templates
  - Template Element
    
    <template> for Reusable Markup
  - Slot Usage
    
    Named Slots for Multiple Projections
- HTML Templates
  - Template Tag
    
    Inert HTML Content
  - Clone Template
    
    content.cloneNode(true)
  - Use Cases
    
    Reusable Components
- Contenteditable
  - Contenteditable Attribute
    
    Edit HTML Directly
  - execCommand
    
    Document Design Mode
  - Use Cases
    
    WYSIWYG Editors
- Spellcheck
  - Spellcheck Attribute
    
    Browser Spell Checking
  - lang Attribute
    
    Language for Spellcheck
- Translate
  - Translate Attribute
    
    Page Translation Control
- Inert
  - Inert Attribute
    
    Make Element Non-interactive
- Popover API
  - Popover Attribute
    
    Popover Element
  - Popover Target
    
    Control Popover Display
  - showPopover Method
    
    JavaScript Show Popover
  - Popover Auto State
    
    Automatic Popover Management
  - Popover Light Dismiss
    
    Click Outside to Close
  - Popover Nesting
    
    Nested Popovers
  - Popover Anchor Positioning
    
    Anchor Positioning CSS
- Dialog Element
  - <dialog>
    
    Modal Dialog Box
  - showModal Method
    
    Show Modal Dialog
  - show Method
    
    Show Non-modal Dialog
  - close Method
    
    Close Dialog
- Details Marker
  - Details Marker CSS
    
    list-style-type
  - Webkit Details Marker
    
    ::-webkit-details-marker
- Output Element
  - Output For
    
    for Attribute
- Progress Element
  - <progress>
    
    Progress Bar
  - value max Attributes
    
    Progress Value
- Meter Element
  - <meter>
    
    Gauge Meter
  - min max value low high optimum
    
    Range Values
- Time Element
  - datetime Attribute
    
    ISO Format
  - Pubdate Attribute
    
    Article Publication Date
- Ruby Element
  - <ruby>
    
    Ruby Annotation for East Asian Text
  - <rt>
    
    Ruby Text Pronunciation
  - <rp>
    
    Ruby Parenthesis Fallback
- BDO Element
  - Bidirectional Override
    
    Override Text Direction
  - dir Attribute
    
    ltr rtl
- BDI Element
  - Bidirectional Isolation
    
    Isolate Directional Text
- WBR Element
  - Word Break Opportunity
    
    Line Break Suggestion
- Search Element
  - <search>
    
    Search Box Container
- Element Timing
  - elementtiming Attribute
    
    LCP Measurement
- Lazy Loading
  - Native Lazy Loading
    
    loading="lazy"
  - Decoding Attribute
    
    async sync auto
- Fetch Priority
  - fetchpriority Attribute
    
    high low auto
  - Fetch Priority Use
    
    Critical Images
- WebGPU API
  - RequestAdapter
    
    Request GPU Adapter
  - RequestDevice
    
    Request GPU Device
  - ConfigureCanvas
    
    Configure GPU Canvas Context
  - CreateRenderPipeline
    
    Create Render Pipeline
  - CreateCommandEncoder
    
    Create Command Encoder
  - CreateBuffer
    
    Create GPU Buffer
  - CreateTexture
    
    Create GPU Texture
  - CreateBindGroup
    
    Create Bind Group
  - ComputeShader
    
    Compute Shader Implementation
  - ComputePipeline
    
    Compute Pipeline Creation
  - GPU Queue
    
    Submit Command Queue
  - WebGPU vs WebGL
    
    Performance Comparison
  - WebGPU Best Practices
    
    Optimization Techniques
- WebXR API
  - RequestSession
    
    Request XR Session
  - XRReferenceSpace
    
    Reference Space Types
  - XRFrame
    
    Get Frame Data
  - XRView
    
    View Matrices
  - XRInputSource
    
    Handle Controller Input
  - XRHitTestSource
    
    AR Hit Testing
  - XRPlane
    
    AR Plane Detection
  - XRMesh
    
    AR Mesh Detection
  - XRLightEstimate
    
    Light Estimation
  - XRAnchor
    
    Anchor Placement
  - WebXR Layers
    
    Compositor Layers
  - Immersive VR
    
    VR Session Creation
  - Immersive AR
    
    AR Session Creation
- MathML
  - MathML Examples
    
    Algebraic Expressions
    
    Calculus Notation
    
    Matrix Display
    
    Chemical Formulas
  - MathML Browser Support
    
    Chrome Firefox Safari Support
- Ruby Annotation
  - Ruby Use Cases
    
    Japanese Kanji Reading
    
    Chinese Pinyin
    
    Korean Hangul
  - Ruby CSS Styling
    
    Styling Ruby Text
- New HTML Tags
  - Portal Tag Usage
    
    Seamless Page Navigation
  - Portal Tag Example
    
    Navigate Between Pages
  - Fenced Frame Usage
    
    Privacy Preserving Ads
  - Selectlist Tag
    
    Customizable Select Dropdown
  - Model Tag
    
    3D Model Display
- View Transitions API
  - Cross Document View Transitions
    
    MPA Transitions
  - Same Document View Transitions
    
    SPA Transitions
  - View Transition Classes
    
    CSS Animation Control
  - View Transition Names
    
    Named Transitions
- Sanitizer API
  - Sanitizer Default Configuration
    
    Default Sanitization
  - Sanitizer Custom Configuration
    
    Custom Allow List
  - Sanitizer Drop Elements
    
    Remove Unsafe Elements
- Trusted Types API
  - Trusted Types Default Policy
    
    Default Policy Creation
  - Trusted Types CSP Header
    
    CSP with Trusted Types
  - Trusted Types Polyfill
    
    Legacy Browser Support
- Cross Origin Isolation
  - Cross Origin Isolated Context
    
    Enable SharedArrayBuffer
  - COOP Same Origin
    
    Cross Origin Opener Policy
  - COEP Require CORP
    
    Cross Origin Embedder Policy
  - CORP Header
    
    Cross Origin Resource Policy
- Permissions Policy
  - Permissions Policy Directives
    
    Feature Control List
  - Permissions Policy Allow List
    
    Origin Allow List
  - Permissions Policy Reporting
    
    Report Violations
- Reporting API
  - Deprecation Reporting
    
    Deprecated API Usage Report
  - Intervention Reporting
    
    Browser Intervention Report
  - Crash Reporting
    
    Page Crash Reports
  - Reporting Endpoint Configuration
    
    Report Delivery Setup
- Speculation Rules API
  - Speculation Rules Inline
    
    Inline JSON Configuration
  - Speculation Rules External
    
    External JSON File
  - Prefetch Rules
    
    Prefetch Page Rules
  - Prerender Rules
    
    Prerender Page Rules
  - Speculation Rules Conditions
    
    Load Condition Checks
  - Speculation Rules Eagerness
    
    Eager Moderate Conservative
- WebBundle
  - Signed Exchanges Generation
    
    Generate SXG Files
  - Signed Exchanges Serving
    
    Serve SXG with Correct Headers
  - Signed Exchanges Debugging
    
    Debug SXG Issues
- Isolated Web Apps
  - IWA Manifest
    
    Isolated Web App Manifest
  - IWA Installation
    
    Install Isolated Web App
  - IWA Permissions
    
    Unrestricted Permissions
- Fenced Frames
  - FLEDGE API
    
    Interest Group Based Advertising
  - Fenced Frame Config
    
    Fenced Frame Configuration
  - Fenced Frame Reporting
    
    Event Reporting
- Private Aggregation API
  - Private Aggregation Reporting
    
    Summary Report Generation
  - Private Aggregation Debugging
    
    Debugging Mode
- Shared Storage API
  - Shared Storage Write
    
    Write to Shared Storage
  - Shared Storage SelectURL
    
    URL Selection from Storage
  - Shared Storage Run
    
    Run Worklet Operation
- Attribution Reporting API
  - Attribution Reporting Source Registration
    
    Register Attribution Source
  - Attribution Reporting Trigger Registration
    
    Register Attribution Trigger
  - Attribution Reporting Aggregation
    
    Summary Report Aggregation
- Topics API
  - Topics API Call
    
    document.browsingTopics()
  - Topics API Observer
    
    Topics Observer
  - Topics API Header
    
    Observe-Browsing-Topics Header
- CHIPS
  - Partitioned Cookie Example
    
    Partitioned Cookie Implementation
  - CHIPS vs Third Party Cookies
    
    Comparison
- First Party Sets
  - First Party Sets Declaration
    
    Declare Related Domains
  - First Party Sets Use Cases
    
    Login Across Domains
- FedCM
  - FedCM API Call
    
    navigator.credentials.get()
  - FedCM Identity Provider Config
    
    IdP Configuration
  - FedCM Account Selection
    
    Account Picker UI
  - FedCM Logout
    
    Logout from IdP
- WebRTC Complete
  - WebRTC Signaling
    
    Signaling Server Setup
  - WebRTC STUN Server
    
    STUN Server Configuration
  - WebRTC TURN Server
    
    TURN Server Fallback
  - WebRTC Data Channel
    
    Data Channel Configuration
  - WebRTC Bandwidth Control
    
    Set Bandwidth Limits
  - WebRTC Recording
    
    Record WebRTC Stream
- WebUSB Complete
  - WebUSB Claim Interface
    
    Claim USB Interface
  - WebUSB Control Transfer
    
    Control Transfer Types
  - WebUSB Bulk Transfer
    
    Bulk Data Transfer
  - WebUSB Interrupt Transfer
    
    Interrupt Transfer
- WebSerial Complete
  - WebSerial Signatures
    
    Serial Port Signatures
  - WebSerial Parity
    
    Parity Bit Configuration
  - WebSerial Stop Bits
    
    Stop Bits Configuration
- WebHID Complete
  - WebHID Feature Reports
    
    Feature Report Handling
  - WebHID Input Reports
    
    Input Report Handling
  - WebHID Output Reports
    
    Output Report Handling
- WebBluetooth Complete
  - WebBluetooth Services
    
    Service Discovery
  - WebBluetooth Characteristics
    
    Characteristic Properties
  - WebBluetooth Descriptors
    
    Descriptor Read Write
- WebAudio Complete
  - WebAudio PannerNode
    
    3D Audio Positioning
  - WebAudio WaveShaperNode
    
    Distortion Effect
  - WebAudio GainNode Automation
    
    Gain Automation
- WebCodecs Complete
  - WebCodecs Video Frame
    
    Video Frame Manipulation
  - WebCodecs Encoded Video Chunk
    
    Video Chunk Encoding
  - WebCodecs Audio Data
    
    Audio Data Processing
- MediaRecorder Complete
  - MediaRecorder Timeslice
    
    Record in Chunks
  - MediaRecorder Error Handling
    
    Error Callback
  - MediaRecorder MIME Types
    
    Supported Codecs
- Clipboard API Complete
  - Clipboard Read Images
    
    Read Image from Clipboard
  - Clipboard Write HTML
    
    Write HTML to Clipboard
  - Clipboard Custom Data
    
    Write Custom MIME Types
- Notifications Complete
  - Notification Badge
    
    Set Notification Badge
  - Notification Actions
    
    Action Buttons
  - Notification Renotify
    
    Renotify Flag
- Intersection Observer Complete
  - Intersection Observer Threshold Array
    
    Multiple Thresholds
  - Intersection Observer Root Element
    
    Scroll Container
  - Intersection Observer Performance
    
    Batch Processing
- Resize Observer Complete
  - Resize Observer Box Size
    
    Content Box Border Box
  - Resize Observer Performance
    
    Avoid Layout Thrashing
- Mutation Observer Complete
  - Mutation Observer Character Data
    
    Text Change Monitoring
  - Mutation Observer Performance
    
    Batch Mutation Handling
- Performance Observer Complete
  - Performance Observer Buffered
    
    Get Past Entries
  - Performance Observer Types
    
    Entry Type Filtering
- HTTP/3 Complete
  - HTTP/3 Server Push
    
    Server Push Alternative
  - HTTP/3 QPACK
    
    Header Compression
  - HTTP/3 Migration
    
    IP Address Migration
- Brotli Compression
  - Brotli Levels
    
    Compression Level 1-11
  - Brotli vs Gzip
    
    Size Comparison
- Zstandard Compression
  - Zstd Levels
    
    Compression Level Tuning
  - Zstd Dictionary
    
    Training Dictionary
- Early Hints
  - Early Hints Implementation
    
    Server Implementation
  - Early Hints CDN
    
    CDN Early Hints Support
HTML Deprecated
- Deprecated Tags
  - <center>
    
    Centering Text CSS text-align
  - <font>
    
    Font Styling CSS
  - <big>
    
    Big Text CSS font-size
  - <strike>
    
    Strikethrough CSS text-decoration
  - <tt>
    
    Teletype Text CSS font-family
  - <frame>
    
    Frameset CSS Grid Flexbox
  - <frameset>
    
    Frame Container
  - <noframes>
    
    No Frames Fallback
  - <applet>
    
    Java Applet Embed
  - <acronym>
    
    Abbreviation <abbr>
  - <basefont>
    
    Base Font CSS body font
  - <blink>
    
    Blinking Text CSS animation
  - <marquee>
    
    Scrolling Text CSS animation
- Deprecated Attributes
  - bgcolor
    
    Background Color CSS
  - background
    
    Background Image CSS
  - border on Tables
    
    Table Border CSS
  - align
    
    Text Align CSS
  - valign
    
    Vertical Align CSS
  - cellpadding
    
    Cell Padding CSS
  - cellspacing
    
    Border Spacing CSS
  - width on Specific Elements
    
    Width CSS
  - height on Specific Elements
    
    Height CSS
  - clear
    
    Float Clear CSS
  - nowrap
    
    White-space CSS
  - scrolling on Iframe
    
    Overflow CSS
  - frame on Tables
    
    Border CSS
  - rules on Tables
    
    Border CSS
  - vspace
    
    margin CSS
  - hspace
    
    margin CSS
  - text on Body
    
    Color CSS
  - link on Body
    
    Color CSS
  - vlink on Body
    
    Color CSS
  - alink on Body
    
    Color CSS
- Deprecated Elements Replacement
  - Presentational Elements
    
    Use CSS Instead
  - Frame Based Layouts
    
    Use Grid Flexbox
  - Applets Plugins
    
    Use Modern APIs
HTML Browser Support
- Caniuse Website
  - caniuse.com
    
    Check Browser Support
- HTML5 Support
  - Modern Browsers
    
    Chrome Firefox Safari Edge
HTML Performance
- Page Speed Optimization
  - Minify HTML
    
    CSS
  - Compress Images
    
    WebP AVIF
  - Lazy Loading Images
    
    loading="lazy"
  - Async Defer Scripts
    
    Non-blocking JavaScript
  - Preload Critical Resources
    
    <link rel="preload">
  - Preconnect to Origins
    
    <link rel="preconnect">
  - DNS Prefetch
    
    <link rel="dns-prefetch">
  - Prefetch Next Pages
    
    <link rel="prefetch">
  - Reduce HTTP Requests
    
    Combine CSS JS
  - Use CDN
    
    Faster Global Delivery
  - Enable Gzip/Brotli
    
    Text Compression
  - Cache Static Assets
    
    HTTP Caching Headers
  - Avoid Render Blocking
    
    Inline Critical CSS
  - Optimize Critical Rendering Path
    
    First Paint Faster
  - Reduce DOM Size
    
    Simplify HTML Structure
  - Avoid Large Layout Shifts
    
    Set Width Height on Images
  - Optimize Web Fonts
    
    font-display swap
  - Use HTTP/2 or HTTP/3
    
    Multiplexing Server Push
- LCP Optimization
  - Largest Contentful Paint
    
    LCP < 2.5 Seconds
  - Optimize Hero Images
    
    Preload LCP Image
  - Optimize Text Elements
    
    Avoid Web Fonts Blocking
- FID Optimization
  - First Input Delay
    
    FID < 100ms
  - Reduce JavaScript Execution
    
    Break Long Tasks
  - Use Web Workers
    
    Move Heavy Processing
- CLS Optimization
  - Cumulative Layout Shift
    
    CLS < 0.1
  - Set Image Dimensions
    
    Width Height Attributes
  - Avoid Dynamic Content Insertion
    
    Reserve Space for Ads
  - Use Aspect Ratio Containers
    
    padding-bottom Trick
- Core Web Vitals
  - LCP FID CLS
    
    Google Ranking Factors
  - INP Interaction to Next Paint
    
    Replacing FID 2024
  - TTFB Time To First Byte
    
    < 800ms Recommended
  - FCP First Contentful Paint
    
    < 1.8 Seconds
  - TBT Total Blocking Time
    
    < 300ms
  - SI Speed Index
    
    < 3.4 Seconds
- Performance Tools
  - Google PageSpeed Insights
    
    Performance Score
  - Lighthouse
    
    Chrome DevTools Audit
  - WebPageTest.org
    
    Detailed Performance Analysis
  - Chrome DevTools Performance Tab
    
    Record Analyze Profile
  - GTmetrix
    
    Performance Monitoring
- Resource Hints
  - Preload
    
    Critical Resources
  - Prefetch
    
    Next Page Resources
  - Preconnect
    
    Third Party Origins
  - DNS Prefetch
    
    Domain Lookup
  - Prerender
    
    Full Page Preload
  - Module Preload
    
    ES Modules
- Critical CSS
  - Inline Critical CSS
    
    Above the Fold Styles
  - Load Non Critical CSS
    
    async CSS Loading
  - Critical Path
    
    First Paint Optimization
- Script Optimization
  - Async Attribute
    
    Load Parallel Execute Immediate
  - Defer Attribute
    
    Load Parallel Execute After HTML
  - Module Script
    
    type="module" Defer by Default
  - Nomoduletag
    
    Nomudule for Fallback
- Font Optimization
  - font-display
    
    swap fallback optional
  - Preload Fonts
    
    <link rel="preload" as="font">
  - Unicode Range
    
    Subset Font Loading
  - Variable Fonts
    
    Reduce Font Files
- Caching Strategy
  - Cache Headers
    
    Cache-Control max-age
  - ETag
    
    Validation Token
  - Last Modified
    
    Date Based Validation
  - Service Worker Cache
    
    Programmatic Caching
  - Workbox Library
    
    Simplified Caching
- Element Timing API
  - elementtiming
    
    Element Timing Attribute
  - PerformanceElementTiming
    
    Element Timing Entry
  - LCP Element
    
    Identify LCP Element
- Layout Instability API
  - LayoutShift
    
    Layout Shift Entry
  - hadRecentInput
    
    Ignore User Input
  - CLS Measurement
    
    Measure CLS
- Event Timing API
  - EventTiming
    
    Event Timing Entry
  - firstInputDelay
    
    Measure FID
  - Processing Duration
    
    Event Processing Time
- Server Timing API
  - Server-Timing Header
    
    Server Timing Header
  - PerformanceServerTiming
    
    Server Timing Entry
  - Backend Performance
    
    Monitor Server Timing
- Resource Timing API
  - PerformanceResourceTiming
    
    Resource Timing Entry
  - initiatorType
    
    Resource Initiator
  - transferSize
    
    Resource Transfer Size
- User Timing API
  - performance.mark
    
    Create Mark
  - performance.measure
    
    Measure Between Marks
  - PerformanceMeasure
    
    Measure Entry
- PerformanceObserver API
  - PerformanceObserver
    
    Observe Performance Entries
  - observe
    
    Start Observing
  - takeRecords
    
    Take Records
- Speculation Rules API
  - Speculation Rules
    
    Prerender Rules
  - prefetch
    
    Speculation Rules Prefetch
  - prerender
    
    Speculation Rules Prerender
  - speculationrules.json
    
    Speculation Rules File
HTML Security
- XSS Prevention
  - Cross Site Scripting
    
    Escape User Input
  - Sanitize HTML
    
    Avoid innerHTML
  - Use textContent
    
    Instead of innerHTML
  - CSP Header
    
    Content Security Policy
  - HTTP Only Cookies
    
    Prevent JavaScript Access
- CSRF Prevention
  - Cross Site Request Forgery
    
    Use Anti CSRF Tokens
  - SameSite Cookies
    
    SameSite=Lax or Strict
- Clickjacking Prevention
  - X-Frame-Options
    
    DENY or SAMEORIGIN
  - CSP frame-ancestors
    
    Restrict Framing
- Iframe Security
  - Sandbox Attribute
    
    Restrict Iframe Capabilities
  - Allow Attribute
    
    Explicit Permissions
- Form Security
  - Input Validation
    
    Client and Server Side
  - HTTPS Only
    
    Encrypt Form Submission
  - CSRF Tokens
    
    Include in Forms
  - Rate Limiting
    
    Prevent Brute Force
- File Upload Security
  - Validate File Type
    
    Allowed Extensions
  - Scan for Malware
    
    Server Side Scanning
  - Store Outside Web Root
    
    Prevent Direct Access
- SQL Injection Prevention
  - Use Prepared Statements
    
    Parameterized Queries
  - Escape Input
    
    Avoid Direct SQL Concatenation
- Sensitive Data
  - No Passwords in HTML
    
    Use HTTPS Forms
  - No API Keys in Frontend
    
    Use Environment Variables
  - Minimize Data Exposure
    
    Send Only Required Data
- Content Security Policy
  - CSP Header
    
    Control Resource Loading
  - default-src
    
    Fallback Directive
  - script-src
    
    Allowed Script Sources
  - style-src
    
    Allowed Style Sources
  - img-src
    
    Allowed Image Sources
  - connect-src
    
    API Endpoints
  - frame-ancestors
    
    Prevent Clickjacking
  - report-uri
    
    Report Violations
- CSP Nonce
  - Random Nonce
    
    Inline Script Allow
- CSP Hash
  - Script Hash
    
    Allow Specific Inline Script
- CSP Strict Dynamic
  - Trusted Scripts
    
    Automatic Trust Propagation
- Trusted Types
  - Trusted Types API
    
    Prevent DOM XSS
  - Policy Creation
    
    Create Trusted Policy
  - Enforcement
    
    Require Trusted Types
- Permission Policy
  - Permissions-Policy
    
    Feature Control
  - Geolocation
    
    Disable Location Access
  - Camera Microphone
    
    Media Device Control
- Cross Origin Isolation
  - COOP COEP
    
    Shared Memory Access
  - Cross Origin Opener Policy
    
    Same Origin Allow Popups
    
    COOP Header
  - Cross Origin Embedder Policy
    
    Require CORP
    
    COEP Header
  - Cross Origin Resource Policy
    
    CORP Header
  - Shared Memory Access
    
    SharedArrayBuffer
- CORP
  - Cross Origin Resource Policy
    
    Same Origin
- CORB
  - Cross Origin Read Blocking
    
    Protect Sensitive Data
- Permissions Policy
  - Permissions-Policy
    
    Feature Policy Header
  - Feature Control
    
    Enable Disable Features
- CHIPS
  - Cookies Having Independent Partitioned State
    
    Partitioned Cookies
  - Partitioned Attribute
    
    Partitioned Cookie Flag
  - Third Party Cookies
    
    Alternative to Third Party Cookies
HTML SEO
- Title Tag
  - Title Optimization
    
    Include Primary Keyword
  - Title Length
    
    50-60 Characters Ideal
  - Brand in Title
    
    Brand Name at End
- Meta Description
  - Description Length
    
    150-160 Characters
  - Description Content
    
    Compelling Summary with Keyword
- Headings
  - H1 Strategy
    
    One H1 with Primary Keyword
  - H2 H3 Structure
    
    Organized Content Hierarchy
  - Keyword Distribution
    
    Natural Keyword Placement
- Semantic HTML
  - Use Semantic Tags
    
    Header Nav Main Article Section
  - Proper HTML Structure
    
    Better Crawler Understanding
- Images
  - Alt Text Optimization
    
    Descriptive with Keywords
  - File Names
    
    Keyword Rich File Names
  - Image Compression
    
    Page Speed Impact
- Links
  - Internal Linking
    
    Link to Related Pages
  - Anchor Text
    
    Descriptive Not Click Here
  - External Links
    
    Link to Authority Sites
  - Nofollow Attribute
    
    User Generated Content
- Canonical Tags
  - Canonical URL
    
    Prevent Duplicate Content
  - Self Referencing Canonical
    
    Homepage Canonical to Homepage
- Robots Meta
  - index follow
    
    Allow Indexing
  - noindex nofollow
    
    Block Indexing
  - noarchive
    
    Prevent Cached Copy
- Structured Data
  - JSON-LD Format
    
    Recommended by Google
  - Organization Schema
    
    Company Information
  - Local Business Schema
    
    Address Phone Hours
  - Product Schema
    
    Price Availability Review
  - Article Schema
    
    Headline Date Author
  - Breadcrumb Schema
    
    Navigation Path
  - FAQ Schema
    
    Questions and Answers
  - HowTo Schema
    
    Step by Step Instructions
  - Event Schema
    
    Date Location Tickets
  - Recipe Schema
    
    Ingredients Instructions
- Open Graph
  - og:title
    
    Social Media Title
  - og:description
    
    Social Media Description
  - og:image
    
    Social Media Thumbnail
  - og:url
    
    Canonical URL for Social
  - og:type
    
    website article product
- Twitter Cards
  - twitter:card
    
    summary_large_image
  - twitter:site
    
    Twitter Handle
- Mobile SEO
  - Viewport Meta
    
    Mobile Friendly Design
  - Responsive Design
    
    Single URL for All Devices
  - AMP Pages
    
    Accelerated Mobile Pages
- International SEO
  - hreflang Tag
    
    Language and Region Targeting
  - lang Attribute
    
    Declare Page Language
  - Content Negotiation
    
    Server Side Language Detection
- Sitemap
  - HTML Sitemap
    
    User Facing Navigation
  - XML Sitemap
    
    Search Engine Submission
  - Sitemap Index
    
    Multiple Sitemap Files
- Robots.txt
  - Robots.txt File
    
    Allow Disallow Crawlers
  - User-agent
    
    Specific Crawler Rules
  - Sitemap Location
    
    Point to XML Sitemap
- URL Structure
  - SEO Friendly URLs
    
    Descriptive Words Not IDs
  - Lowercase URLs
    
    Consistent Format
  - Hyphens vs Underscores
    
    Use Hyphens for Word Separation
- Pagination
  - rel="prev" and "next"
    
    Pagination for Multi-page Articles
- Redirects
  - 301 Permanent Redirect
    
    Moved Permanently SEO
  - 302 Temporary Redirect
    
    Temporary Move
- Signed Exchanges
  - SXG
    
    Sign Exchange for SEO
  - Google Search Support
    
    AMP SXG Support
HTML Advanced Forms
- Form Validation
  - HTML5 Validation Attributes
    
    required pattern min max
  - Custom Validation
    
    JavaScript setCustomValidity
  - Validation Pseudo Classes
    
    :valid :invalid :required
  - Constraint Validation API
    
    checkValidity reportValidity
- Form Styling
  - Validation Styling
    
    Red Border on :invalid
  - Success Styling
    
    Green Border on :valid
  - Error Messages
    
    Custom Error Display
- Form Submission
  - FormData API
    
    new FormData(form)
  - Fetch API
    
    Submit Form with Fetch
  - AJAX Submit
    
    No Page Reload Submit
  - multipart/form-data
    
    File Upload Encoding
- Form Security
  - CSRF Protection
    
    Anti CSRF Token
  - Input Sanitization
    
    Prevent XSS
  - HTTPS Required
    
    Secure Data Transmission
- Form Accessibility
  - ARIA Attributes
    
    aria-invalid aria-describedby
  - Error Announcement
    
    aria-live Region
  - Focus Management
    
    Move Focus to First Error
  - Fieldset Legend
    
    Group Related Inputs
- File Upload
  - Multiple File Upload
    
    multiple Attribute
  - Accept Attribute
    
    Filter File Types
  - File Size Limit
    
    JavaScript Validation
  - Preview Images
    
    FileReader API
  - Drag and Drop Upload
    
    File Drop Zone
  - Upload Progress
    
    XMLHttpRequest Upload Progress
- Autocomplete
  - Autocomplete Values
    
    on off name email tel
  - Address Autocomplete
    
    street-address address-level1 country
  - Payment Autocomplete
    
    cc-name cc-number cc-exp
- Datalist
  - Autocomplete List
    
    <datalist> with Options
  - Option Value
    
    Suggestion Items
  - Dynamic Datalist
    
    JavaScript Update Options
- Output Element
  - Calculation Output
    
    Display Live Calculation
  - for Attribute
    
    Referenced Input IDs
  - form Attribute
    
    Associate with Form
- Progress Element
  - Determinate Progress
    
    value max Attributes
  - Indeterminate Progress
    
    No value Attribute
  - JavaScript Update
    
    Change value Dynamically
- Meter Element
  - Low Value
    
    low Attribute
  - High Value
    
    high Attribute
  - Optimum Value
    
    optimum Attribute
- Fieldset Disable
  - Disable Fieldset
    
    Disable All Form Controls Inside
- Fieldset Styling
  - Fieldset Border
    
    Custom Border Style
  - Legend Positioning
    
    Center or Left
- Form Reset
  - Reset Button
    
    Reset All Form Values
  - Custom Reset
    
    JavaScript Reset Function
HTML Advanced Images
- Image Sprites
  - Sprite Technique
    
    Combine Multiple Images
- Image CDN
  - Cloudinary
    
    Image Optimization CDN
  - Imgix
    
    Real Time Image Processing
  - ImageKit
    
    Resize Crop Compress
  - Bunny.net
    
    Affordable Image CDN
- Responsive Images
  - srcset with x Descriptor
    
    Device Pixel Ratio
  - srcset with w Descriptor
    
    Viewport Width
  - sizes Attribute
    
    Media Condition and Size
  - picture Element
    
    Art Direction
  - type Attribute
    
    Format Fallback
- Client Hints
  - DPR Header
    
    Device Pixel Ratio
  - Viewport-Width Header
    
    Viewport Width
  - Width Header
    
    Requested Image Width
- Image Optimization
  - WebP Conversion
    
    Smaller File Size
  - AVIF Format
    
    Better than WebP
  - Lossless Compression
    
    PNG Quality Retained
  - Lossy Compression
    
    JPG Smaller Size
  - Lazy Loading
    
    loading="lazy"
  - Decoding
    
    async sync auto
  - Fetch Priority
    
    fetchpriority="high" for LCP
  - Responsive Breakpoints
    
    Multiple Size Generation
- Accessibility
  - Alt Text Best Practices
    
    Describe Image Purpose
  - Decorative Images
    
    Empty Alt Attribute
  - Complex Images
    
    Long Description Nearby
  - Figure and Figcaption
    
    Image Captions
- SVG Optimization
  - Inline SVG
    
    Better Control
  - SVG Sprites
    
    Multiple Icons One File
  - Remove Unnecessary Code
    
    Optimize SVG Size
HTML Advanced Tables
- Responsive Tables
  - Horizontal Scroll
    
    overflow-x: auto
  - Collapse on Mobile
    
    Display Block on Small
  - Stack on Mobile
    
    Cards Layout Alternative
  - Data Labels
    
    Show Column Names on Mobile
- Advanced Features
  - Sortable Tables
    
    JavaScript Sort
  - Filterable Tables
    
    Search Box Filter
  - Pagination
    
    Split Data into Pages
  - Export to Excel
    
    CSV Export Function
  - Copy to Clipboard
    
    Table Data Copy
  - Print Styling
    
    Print Optimized Tables
- Table Accessibility
  - Scope Attribute
    
    Column and Row Headers
  - Header Attribute
    
    Complex Table Headers
  - Caption Element
    
    Table Description
  - Summary Attribute
    
    Deprecated Use Caption
- Table Styling
  - Striped Rows
    
    nth-child(even/odd)
  - Hover Effect
    
    tr:hover Background
  - Border Collapse
    
    Collapse Separate Borders
  - Sticky Header
    
    position: sticky on thead
  - Sticky First Column
    
    position: sticky on td:first-child
- Table Colgroup
  - Colgroup Styling
    
    Background Color on Column
  - Col Width
    
    Set Column Widths
  - Col Class
    
    Apply CSS Class to Column
HTML Advanced Lists
- Nested Lists
  - Deep Nesting
    
    Multi-level Hierarchical Lists
  - CSS Styling
    
    Different Bullets per Level
  - Accessibility
    
    Screen Reader Announcement
- Horizontal Lists
  - Navigation Menu
    
    Horizontal Nav Links
  - Dropdown Menu
    
    Nested Horizontal Menu
  - Breadcrumb
    
    Home Category Product
- List Counters
  - CSS Counters
    
    counter-reset counter-increment
  - Numbered Nested Lists
    
    1.1 1.2 Format
  - Content Property
    
    ::before with counter()
- Custom Markers
  - ::marker Pseudo-element
    
    Style List Bullets
  - List Style Image
    
    Image as Bullet
  - Emoji Bullets
    
    Use Emoji as List Marker
- Description Lists
  - Definition Lists
    
    Glossary of Terms
  - FAQ Pages
    
    Question Answer Format
  - Metadata Display
    
    Property Value Pairs
HTML Advanced Links
- Link States
  - :link :visited :hover :active
    
    Order Important
  - :focus-visible
    
    Keyboard Focus Indicator
  - :target
    
    Target Section Styling
- Smooth Scroll
  - scroll-behavior:smooth
    
    CSS Smooth Scroll
  - JavaScript Scroll
    
    element.scrollIntoView()
  - Offset for Fixed Header
    
    scroll-margin-top
- Link Preview
  - Link Preview Metadata
    
    OG Tags for Preview
  - Social Media Cards
    
    Twitter Card Open Graph
- Download Links
  - Download Attribute
    
    Force Download File
  - Download Filename
    
    download="filename.pdf"
- Email Links
  - mailto with Subject
    
    ?subject=Hello
  - mailto with Body
    
    &body=Message
  - mailto with CC
    
    &cc=email@example.com
  - mailto with BCC
    
    &bcc=email@example.com
  - Multiple Recipients
    
    email1
- Phone Links
  - tel Protocol
    
    Click to Call
  - SMS Protocol
    
    sms:number?body=text
- WhatsApp Links
  - wa.me Link
    
    WhatsApp Chat Link
  - WhatsApp API
    
    Send Pre-filled Message
- Telegram Links
  - t.me Link
    
    Telegram Contact
- Signal Links
  - signal.me
    
    Signal Private Messenger
- Skype Links
  - skype:username
    
    Skype Call
- Zoom Links
  - zoom.us Join
    
    Join Meeting Link
- Google Meet
  - meet.google.com
    
    Join Link
- Deep Linking
  - App Deep Links
    
    Open Mobile App
  - Universal Links
    
    iOS Deep Linking
  - Android App Links
    
    Android Deep Linking
HTML Advanced Canvas
- Canvas Animation
  - requestAnimationFrame
    
    Smooth Animation Loop
  - Frame Rate
    
    60 FPS Target
  - Delta Time
    
    Frame Independent Movement
- Canvas Transformations
  - Translate
    
    Move Origin
  - Rotate
    
    Rotate Around Origin
  - Scale
    
    Scale Drawing
  - Transform Matrix
    
    Direct Matrix Manipulation
- Canvas States
  - save() restore()
    
    Push Pop State
- Canvas Clipping
  - clip()
    
    Clip Region Drawing
- Canvas Shadows
  - shadowColor shadowBlur
    
    Drop Shadow Effect
  - shadowOffsetX shadowOffsetY
    
    Shadow Direction
- Canvas Gradients
  - Linear Gradient
    
    createLinearGradient
  - Radial Gradient
    
    createRadialGradient
  - Conic Gradient
    
    createConicGradient
- Canvas Patterns
  - createPattern
    
    Repeat Image Pattern
- Canvas Composition
  - globalCompositeOperation
    
    Blend Modes
- Canvas Filters
  - filter Property
    
    Blur Grayscale Brightness
- Canvas Pixel Manipulation
  - getImageData
    
    Pixel Level Access
  - putImageData
    
    Draw Pixel Data
  - createImageData
    
    Blank Pixel Array
- Canvas Performance
  - OffscreenCanvas
    
    Render in Worker
  - requestAnimationFrame
    
    Optimized Animation
  - Avoid Canvas Resize
    
    Set Width Height Attributes
- Canvas Hit Detection
  - isPointInPath
    
    Detect Click on Shape
  - isPointInStroke
    
    Detect Line Click
- Canvas Export
  - toDataURL()
    
    Export as PNG JPG
  - toBlob()
    
    Export as Blob Object
HTML Advanced SVG
- SVG Animation
  - <animate>
    
    Animate Attributes
  - <animateTransform>
    
    Animate Transformations
  - <animateMotion>
    
    Animate Along Path
  - SMIL vs CSS
    
    SMIL More Powerful
- SVG Interaction
  - JavaScript in SVG
    
    script Element
  - Event Listeners
    
    onclick onmouseover
  - Manipulate SVG
    
    DOM Methods
- SVG Filters
  - <filter>
    
    Apply Effects
  - feGaussianBlur
    
    Blur Effect
  - feColorMatrix
    
    Color Transformation
  - feDropShadow
    
    Drop Shadow
  - feMerge
    
    Combine Multiple Effects
  - feBlend
    
    Blend Modes
  - feComposite
    
    Composition Effects
- SVG Text
  - <textPath>
    
    Text on Path
  - <tspan>
    
    Multi-line Text
  - <textArea>
    
    Text Wrapping
- SVG Gradients
  - <linearGradient>
    
    Linear Color Transition
  - <radialGradient>
    
    Radial Color Transition
- SVG Patterns
  - <pattern>
    
    Repeating Pattern Fill
- SVG Clipping
  - <clipPath>
    
    Clip Region
- SVG Masking
  - <mask>
    
    Masking Effect
- SVG Optimization
  - SVG Optimization Tools
    
    SVGO Compressor
  - Remove Metadata
    
    Smaller File Size
  - Inline vs External
    
    Inline for Small Icons
- SVG Accessibility
  - <title>
    
    SVG Title
  - <desc>
    
    SVG Description
  - role="img"
    
    Accessible Image Role
HTML Advanced Video
- Video Events
  - loadedmetadata
    
    Video Info Loaded
  - canplay
    
    Enough Data to Play
  - play
    
    pause
  - waiting
    
    Buffering
  - error
    
    Video Error
- Video Controls
  - Custom Controls
    
    JavaScript Controls
  - Play Pause Button
    
    Toggle Playback
  - Volume Slider
    
    Change Volume
  - Progress Bar
    
    Seek Video
  - Fullscreen Button
    
    Fullscreen API
  - Playback Speed
    
    playbackRate Property
- Video Captions
  - <track> Element
    
    Subtitle Support
  - WebVTT Format
    
    .vtt File Format
  - kind="subtitles"
    
    Closed Captions
  - kind="captions"
    
    Audio Description
  - kind="descriptions"
    
    Visual Description
  - kind="chapters"
    
    Chapter Markers
  - kind="metadata"
    
    Metadata Track
- Video Quality
  - HLS Streaming
    
    .m3u8 Playlist
  - DASH Streaming
    
    MPEG-DASH
  - Adaptive Bitrate
    
    Quality Based on Bandwidth
- Video DRM
  - Encrypted Media Extensions
    
    EME API
  - Widevine
    
    Google DRM
  - PlayReady
    
    Microsoft DRM
  - FairPlay
    
    Apple DRM
HTML Advanced Audio
- Audio Events
  - canplay through
    
    Audio Ready
  - play pause ended
    
    Playback Events
  - timeupdate
    
    Current Time Update
- Audio Visualization
  - Web Audio API
    
    Audio Context
  - Analyser Node
    
    Frequency Data
  - Canvas Drawing
    
    Visualizer Effect
- Audio Recording
  - MediaRecorder API
    
    Record Audio
  - getUserMedia
    
    Microphone Access
  - Save Recording
    
    Blob Download
HTML Advanced Web APIs
- Web Audio API
  - AudioContext
    
    Advanced Audio Processing
  - Oscillator Node
    
    Generate Sound
  - Gain Node
    
    Volume Control
  - Stereo Panner
    
    Pan Left Right
- Web MIDI API
  - MIDI Access
    
    Musical Instrument Digital Interface
  - Input Output
    
    Connect MIDI Devices
- Web Bluetooth API
  - Bluetooth Device
    
    Connect BLE Devices
  - Characteristics
    
    Read Write Data
- Web USB API
  - USB Device Access
    
    Connect USB Devices
- Web Serial API
  - Serial Port Communication
    
    Arduino Connection
- WebHID API
  - Human Interface Device
    
    Gamepad Keyboard Access
- WebNFC API
  - Near Field Communication
    
    Tap to Read Write
- Web Share API
  - navigator.share
    
    Share Content
- Web Share Target
  - Share Target API
    
    Receive Shared Content
- Web Locks API
  - navigator.locks
    
    Resource Locking
  - Cross Tab Coordination
    
    Prevent Conflicts
- Badging API
  - setAppBadge
    
    Notification Badge Count
  - clearAppBadge
    
    Clear Badge
- Contact Picker API
  - selectContacts
    
    Select Device Contacts
  - Contact Properties
    
    name email tel
- File System Access API
  - showOpenFilePicker
    
    Open File
  - showSaveFilePicker
    
    Save File
  - showDirectoryPicker
    
    Open Folder
- Idle Detection API
  - IdleDetector
    
    User Idle State Detection
  - Idle State
    
    Active Idle Locked
  - Permission Required
    
    Idle Detection Permission
- Keyboard Lock API
  - keyboard.lock
    
    Lock Modifier Keys
  - Unlock Method
    
    Release Keyboard Lock
- Pointer Lock API
  - requestPointerLock
    
    Capture Mouse Pointer
  - Pointer Movement
    
    deltaX deltaY
- Screen Wake Lock API
  - wakeLock.request
    
    Prevent Screen Sleep
  - Release Wake Lock
    
    Screen Wake Lock Release
- Screen Orientation API
  - screen.orientation
    
    Lock Screen Rotation
  - orientationchange Event
    
    Detect Orientation Change
- Device Orientation API
  - deviceorientation
    
    Device Tilt Rotation
  - devicemotion
    
    Device Acceleration
  - Permission Required
    
    Sensor Permissions
- Payment Handler API
  - Payment Handler
    
    Register Payment App
  - canMakePayment
    
    Check Payment Availability
- Secure Payment Confirmation
  - SPC API
    
    Biometric Authentication
- Digital Goods API
  - Digital Goods
    
    In App Purchases
  - Get Details
    
    Product Information
HTML Progressive Web Apps
- What is PWA
  - Progressive Web App
    
    Native Like Experience
- PWA Requirements
  - HTTPS Required
    
    Service Worker Manifest
- Web App Manifest
  - manifest.json
    
    App Metadata
- Manifest Properties
  - name short_name
    
    App Name
  - start_url
    
    Launch URL
  - display
    
    standalone fullscreen minimal-ui
  - theme_color
    
    Title Bar Color
  - background_color
    
    Splash Screen Color
  - icons
    
    App Icons for Different Sizes
  - orientation
    
    Screen Orientation Lock
  - scope
    
    URL Scope of App
- Service Workers
  - Service Worker Registration
    
    Register SW
  - Install Event
    
    Cache Assets
  - Activate Event
    
    Clean Old Caches
  - Fetch Event
    
    Network Cache Strategies
  - Cache Strategies
    
    Cache First Network Fallback
    
    Network First Cache Fallback
    
    Stale While Revalidate
  - Cache Storage
    
    caches.open()
  - Offline Support
    
    Offline Page Fallback
  - Push Notifications
    
    Service Worker Push Event
  - Notification Click
    
    Notification Click Handler
  - Background Sync
    
    Background Sync API
- PWA Installation
  - Install Prompt
    
    beforeinstallprompt Event
  - Install Button
    
    Custom Install Button
  - User Choice
    
    Accept or Dismiss Install
- PWA Update
  - Update Flow
    
    New Service Worker Activation
  - skipWaiting
    
    Force Update
  - clients.claim
    
    Take Control of Pages
- PWA Security
  - HTTPS Required
    
    Secure Context
  - Content Security Policy
    
    CSP for SW
- PWA Testing
  - Lighthouse PWA Audit
    
    Check PWA Requirements
  - Chrome DevTools
    
    Application Tab
- PWA Examples
  - PWA Examples
    
    Twitter Lite Pinterest Spotify
HTML Web Components
- Introduction
  - Web Components Standard
    
    Reusable Components
  - Browser Support
    
    All Modern Browsers
- Custom Elements
  - define Method
    
    Register Custom Element
  - Class Definition
    
    Extends HTMLElement
  - Lifecycle Callbacks
    
    connectedCallback disconnectedCallback
  - Attribute Observation
    
    observedAttributes attributeChangedCallback
  - Adopted Callback
    
    adoptedCallback for iframe
  - Autonomous Elements
    
    Extend HTMLElement Directly
  - Customized Built-in Elements
    
    Extend button input div
  - Naming Rules
    
    Must Contain Hyphen
- Shadow DOM
  - Encapsulation
    
    CSS and DOM Isolation
  - attachShadow
    
    Create Shadow Root
  - Mode Open
    
    Accessible from JavaScript
  - Mode Closed
    
    Not Accessible from JS
  - Shadow Host
    
    Parent Element Reference
  - Shadow Root
    
    Root of Shadow Tree
  - Light DOM
    
    Content Before Encapsulation
  - Slot Element
    
    Content Projection
  - Named Slot
    
    slot="name" Attribute
  - Default Slot
    
    Unnamed Slot for Remaining Content
  - Slotted Pseudo-element
    
    ::slotted() Selector
  - Part Attribute
    
    expose-part for Styling
  - Constructable Stylesheets
    
    Shared Styles
- HTML Templates
  - <template> Tag
    
    Inert HTML Content
  - cloneNode
    
    Clone Template Content
  - importNode
    
    Import Node from Template
  - Adopt Styles
    
    Style Encapsulation
- HTML Slots
  - <slot> Element
    
    Content Insertion Point
  - slotchange Event
    
    Detect Slot Content Change
  - Slot Assignment
    
    Assigned Nodes
- CSS Shadow Parts
  - part Attribute
    
    Style from Outside
  - ::part() Pseudo-class
    
    Target Part from Outside
  - Export Parts
    
    Multiple Part Names
- Element Internals
  - attachInternals
    
    Attach Internal API
  - setFormValue
    
    Form Integration
  - setValidity
    
    Custom Validation
  - Form Associated Custom Elements
    
    Form Participation
  - ARIA Reflection
    
    Accessibility Properties
- Examples
  - Custom Button
    
    Simple Custom Button Component
  - Custom Card
    
    Reusable Card Component
  - Custom Tooltip
    
    Tooltip on Hover
  - Custom Rating
    
    Star Rating Component
  - Custom Tabs
    
    Tabs Component
  - Custom Modal
    
    Modal Dialog Component
- Frameworks Compatibility
  - React with Web Components
    
    Works with Wrappers
HTML Responsive Design
- Advanced Responsive
  - Container Queries
    
    Element Based Responsive
- Container Queries
  - Container Type
    
    inline-size normal size
  - Container Name
    
    Named Containers
  - @container Query
    
    Syntax Usage
  - Container Units
    
    cqw cqh cqi cqb cqmin cqmax
  - Browser Support
    
    Chrome Firefox Safari 2023+
- Style Queries
  - Container Style Queries
    
    Query CSS Properties
  - Style Query Example
    
    Detect Custom Property Value
- Viewport Units
  - New Units
    
    svw svh lvw lvh dvw dvh
  - vi vb
    
    Inline Block Viewport Units
- Small Viewport Units
  - svw svh
    
    Stable Small Viewport
- Large Viewport Units
  - lvw lvh
    
    Stable Large Viewport
- Dynamic Viewport Units
  - dvw dvh
    
    Dynamic Address Bar
- Responsive Typography
  - clamp() Function
    
    Responsive Font Sizes
  - clamp Syntax
    
    clamp(min
  - Clamp Example
    
    clamp(16px
  - Viewport Units
    
    calc(16px + 1vw)
- Responsive Spacing
  - Clamp for Margin
    
    Padding with clamp()
- Responsive Grid
  - auto-fit vs auto-fill
    
    Grid Responsive Columns
  - minmax()
    
    Minimum Maximum Column Width
  - repeat()
    
    Repeat Columns Pattern
  - Grid Template Columns
    
    repeat(auto-fit
- Responsive Images
  - Image Resolution Switching
    
    different sizes for different screens
  - Art Direction
    
    different crops for different devices
  - Format Fallback
    
    WebP AVIF with Fallback
- Responsive Video
  - Aspect Ratio
    
    aspect-ratio CSS Property
  - Object Fit
    
    cover contain fill
  - Embedded Video
    
    YouTube Vimeo Responsive
- Responsive Tables
  - Overflow Scroll
    
    overflow-x: auto on Container
  - Cards on Mobile
    
    Display Block on Small Screens
  - Hide Columns
    
    Hide Less Important Columns on Mobile
- Responsive Navigation
  - Hamburger Menu
    
    JavaScript Toggle
  - CSS Only Hamburger
    
    Checkbox Hack
  - Off Canvas Menu
    
    Slide from Side
  - Top Navigation Stack
    
    Vertical on Mobile
  - Bottom Navigation
    
    Mobile Bottom Tab Bar
- Responsive Testing
  - Chrome DevTools
    
    Device Toolbar
  - Responsively App
    
    Multiple Devices Simultaneously
  - BrowserStack
    
    Cross Browser Testing
HTML Micro Frontends
- Micro Frontends Introduction
  - Micro Frontends
    
    Multiple Teams One App
- Integration Methods
  - Iframe Integration
    
    Simplest Isolation
  - Web Components
    
    Standard Based Integration
  - Module Federation
    
    Webpack Module Federation
  - Import Maps
    
    ES Module Loading
- Web Components Role
  - Custom Elements
    
    Each Team Own Element
  - Shadow DOM
    
    Style Isolation
  - Event Communication
    
    Custom Events
- Import Maps
  - import-map
    
    Module Mapping
  - Module Resolution
    
    Browser Native Module Loading
- Module Federation
  - Expose Modules
    
    Share Code Between Apps
  - Consume Modules
    
    Load Remote Components
HTML HTML Email
- Email HTML Introduction
  - Email HTML
    
    HTML for Email Clients
- Email HTML Differences
  - Table Based Layout
    
    CSS Support Limited
  - Inline CSS Only
    
    External Styles Not Supported
  - No JavaScript
    
    For Security Reasons
  - No Flexbox Grid
    
    Use Tables for Layout
- Email HTML Best Practices
  - Table Layout
    
    <table> for Structure
  - Width 100%
    
    Responsive Email
  - Inline Styles
    
    style Attribute Only
  - Background Color
    
    Use bgcolor Attribute
  - Image Hosting
    
    Public URL Required
  - Alt Text
    
    Important for Images
  - Preview Text
    
    First Lines Important
  - Spam Words
    
    Avoid Trigger Words
- Email HTML Testing
  - Email Testing Tools
    
    Litmus Email on Acid
  - Send Test Emails
    
    Multiple Clients
- Email HTML Clients
  - Gmail Support
    
    Good Support
  - Outlook Support
    
    Partial Support
  - Apple Mail
    
    Excellent Support
  - Thunderbird
    
    Good Support
HTML Game Development
- HTML Games
  - Canvas Games
    
    2D Game Development
  - RequestAnimationFrame
    
    Game Loop
- Canvas Game Basics
  - Game Loop Structure
    
    Update Draw Loop
  - Input Handling
    
    Keyboard Mouse Events
  - Collision Detection
    
    Rect Circle Collision
- Canvas Game Examples
  - Snake Game
    
    Classic Snake Game
  - Pong Game
    
    Classic Pong Game
  - Space Invaders
    
    Shooting Game
  - Platformer
    
    Jump and Run
  - Memory Card Game
    
    Match Pairs
  - Flappy Bird Clone
    
    Obstacle Avoidance
- Game Engines
  - Phaser JS
    
    Popular HTML5 Game Framework
  - PixiJS
    
    2D WebGL Renderer
  - Three JS
    
    3D Games
  - Babylon JS
    
    3D Game Engine
- Game Physics
  - Matter JS
    
    2D Physics Engine
  - Planck JS
    
    Box2D Web Port
- Multiplayer Games
  - WebSockets
    
    Real Time Multiplayer
  - PeerJS
    
    P2P Connection
  - Game State Sync
    
    Server Authority
- Game Monetization
  - Ad Integration
    
    AdMob for Web
  - In App Purchases
    
    PWA Payment API
  - Subscription
    
    Recurring Payments
HTML Advanced Graphics
- Three.js Introduction
  - Three.js
    
    3D Graphics Library
- Three.js Setup
  - Scene Camera Renderer
    
    Basic Three.js Structure
- Three.js Scene
  - Scene Background
    
    Color or Texture
- Three.js Camera
  - PerspectiveCamera
    
    FOV Aspect Near Far
- Three.js Renderer
  - WebGLRenderer
    
    Canvas Element
- Three.js Geometries
  - BoxGeometry
    
    Cube Shape
  - SphereGeometry
    
    Sphere Shape
  - CylinderGeometry
    
    Cylinder Shape
  - TorusGeometry
    
    Donut Shape
- Three.js Materials
  - MeshBasicMaterial
    
    Solid Color
  - MeshStandardMaterial
    
    Light Responsive
- Three.js Lighting
  - AmbientLight
    
    Base Illumination
  - DirectionalLight
    
    Sun Light
  - PointLight
    
    Bulb Light
- Three.js Animation
  - requestAnimationFrame
    
    Animate Loop
  - Rotate Scale
    
    Object Transformation
- Three.js Controls
  - OrbitControls
    
    Rotate Pan Zoom
- Three.js Loaders
  - GLTFLoader
    
    Import 3D Models
- Three.js Textures
  - TextureLoader
    
    Image Mapping
- Babylon.js Introduction
  - Babylon.js
    
    Microsoft 3D Library
- Babylon.js Setup
  - Engine Scene
    
    Basic Structure
- Babylon.js Mesh
  - Create Box Sphere
    
    Basic Shapes
- Babylon.js Materials
  - Standard Material
    
    Color Texture
- Babylon.js Lighting
  - Hemispheric Light
    
    Natural Light
- Babylon.js Camera
  - ArcRotateCamera
    
    Orbit Camera
- WebGL Introduction
  - WebGL API
    
    Low Level 3D Graphics
- WebGL Shaders
  - Vertex Shader
    
    Position Processing
  - Fragment Shader
    
    Color Processing
- WebGPU Introduction
  - WebGPU API
    
    Next Gen Graphics
- WebGPU vs WebGL
  - Performance
    
    Better Compute Capabilities
HTML Printing
- Print CSS
  - Print Stylesheet
    
    media="print"
  - Print Specific Styles
    
    Hide Navigation Show Content
  - Page Breaks
    
    page-break-before page-break-after
  - Print Links
    
    Show URL After Links
- Print JavaScript
  - window.print()
    
    Browser Print Dialog
  - Before Print Event
    
    Prepare Page for Print
  - After Print Event
    
    Restore Page
- Print Optimization
  - Print Colors
    
    Black and White Friendly
  - Print Fonts
    
    Serif Fonts Better
  - Print Margins
    
    @page Margin Rule
HTML Offline
- Offline Support
  - Service Worker
    
    Offline First
  - Cache API
    
    Store Assets
  - IndexedDB
    
    Structured Data Storage
- IndexedDB
  - Database Creation
    
    openRequest
  - Object Store
    
    Create Store
  - Transaction
    
    Read Write Operations
  - CRUD Operations
    
    Add Get Delete Data
  - Cursor
    
    Iterate Through Data
  - Indexes
    
    Search Optimization
- Cache API
  - caches.open
    
    Open Cache
  - cache.addAll
    
    Add Multiple Requests
  - cache.match
    
    Retrieve from Cache
  - cache.delete
    
    Remove from Cache
- Background Sync
  - BackgroundSync
    
    Offline Actions
  - sync.register
    
    Register Sync Event
  - Retry Failed Requests
    
    Automatic Retry
- Periodic Sync
  - PeriodicBackgroundSync
    
    Background Updates
  - minInterval
    
    Minimum Sync Interval
  - Permission Required
    
    User Permission
HTML SEO Advanced
- International SEO
  - hreflang Annotation
    
    Language Region Targeting
- hreflang
  - x-default
    
    Hreflang Default Language
  - Self Referential
    
    Page References Itself
- Canonical Tags
  - Cross Domain Canonical
    
    Syndicated Content
  - Parameter Handling
    
    Canonical to Clean URL
  - Pagination Canonical
    
    View All Page
- Structured Data
  - Product Schema
    
    Price Availability
  - Review Schema
    
    Star Ratings
  - Local Business Schema
    
    Address Phone Hours
  - Organization Schema
    
    Logo Social Profiles
  - Event Schema
    
    Date Location Tickets
  - Recipe Schema
    
    Ingredients Instructions
  - FAQ Schema
    
    Questions and Answers
  - HowTo Schema
    
    Step by Step Guide
  - Breadcrumb Schema
    
    Navigation Path
  - Sitelinks Searchbox
    
    Website Search
  - Video Schema
    
    Video Description Thumbnail
  - Article Schema
    
    Headline Date Author
  - Job Posting Schema
    
    Job Title Salary
  - Course Schema
    
    Course Name Provider
  - Software Application Schema
    
    App Name Rating
- JSON-LD
  - JavaScript Object Notation
    
    Script Tag Type
  - @context
    
    Schema.org URL
  - @type
    
    Schema Type
  - Nested Objects
    
    Complex Data Structure
  - Array Values
    
    Multiple Items
- Rich Results
  - Rich Snippets
    
    Enhanced Search Results
  - Testing Tool
    
    Rich Results Test
  - Search Console
    
    Performance Report
- Core Web Vitals
  - LCP Optimization
    
    Largest Contentful Paint
  - FID Optimization
    
    First Input Delay
  - CLS Optimization
    
    Cumulative Layout Shift
  - INP
    
    Interaction to Next Paint
  - TTFB
    
    Time To First Byte
- Mobile SEO
  - Viewport Configuration
    
    Mobile Friendly
  - Mobile First Indexing
    
    Google Priority Mobile
  - Responsive Design
    
    Single URL
  - Dynamic Serving
    
    User Agent Detection
  - Separate Mobile URLs
    
    m.domain.com
  - Page Speed Mobile
    
    Mobile Performance
- Log File Analysis
  - Server Logs
    
    Bot Activity
  - Crawl Budget
    
    Pages Crawled
  - Crawl Frequency
    
    How Often Bots Visit
- JavaScript SEO
  - Client Side Rendering
    
    Google Supports
  - Server Side Rendering
    
    Better for SEO
  - Dynamic Rendering
    
    Prerender.io
  - Hybrid Rendering
    
    SSR + CSR
- Ecommerce SEO
  - Product Schema
    
    Rich Product Results
  - Category Structure
    
    URL Hierarchy
  - Faceted Navigation
    
    Crawl Optimization
  - Product Variants
    
    Canonical URLs
HTML Accessibility Advanced
- WCAG Guidelines
  - WCAG 2.1
    
    Success Criteria
- ARIA Live Regions
  - polite assertive
    
    Screen Reader Announcements
  - aria-live attribute
    
    Dynamic Content Updates
  - role="status"
    
    Status Messages
  - role="alert"
    
    Important Alerts
  - role="log"
    
    Chat Logs
  - role="progressbar"
    
    Loading Status
  - aria-atomic
    
    Announce Whole Region
  - aria-relevant
    
    Additions Removals Text
- Focus Management
  - Focus Trap
    
    Modal Dialog Loop
  - Focus Return
    
    Close Modal Focus Back
  - Focus Indicators
    
    Visible Focus Ring
  - Focus Order
    
    Logical Tab Order
  - Skip Navigation Link
    
    Skip to Main Content
- Keyboard Navigation
  - Tabindex Values
    
    0 -1 Positive
  - Arrow Keys
    
    Menu Navigation
  - Space Enter
    
    Activate Elements
  - Escape Key
    
    Close Modals
- Screen Reader Testing
  - NVDA
    
    Free Windows Screen Reader
  - JAWS
    
    Commercial Windows Reader
  - VoiceOver
    
    macOS iOS Built-in
  - TalkBack
    
    Android Screen Reader
  - Narrator
    
    Windows Built-in
- Color Contrast Testing
  - WCAG Contrast Checker
    
    Online Tools
  - Color Blindness Simulator
    
    See as Color Blind
  - High Contrast Mode
    
    Windows High Contrast
- Accessible Components
  - Accordion
    
    ARIA Expanded Controls
  - Tabs
    
    ARIA Tablist Tab Tabpanel
  - Carousel
    
    ARIA Live Region
  - Modal Dialog
    
    Focus Trap Escape Close
  - Tooltip
    
    ARIA Tooltip Role
  - Date Picker
    
    ARIA Grid Role
  - Slider
    
    ARIA Slider Role
  - Tree View
    
    ARIA Tree Role
  - Menu Bar
    
    ARIA Menubar Role
  - Progress Bar
    
    ARIA Progressbar Role
- Legal Requirements
  - ADA
    
    Americans with Disabilities Act
  - Section 508
    
    US Federal Law
  - EAA
    
    European Accessibility Act
  - AODA
    
    Ontario Canada Law
  - Accessibility Lawsuits
    
    Legal Risk Mitigation
HTML Tools
- HTML Validator
  - W3C Validator
    
    Check HTML Syntax
  - HTMLHint
    
    Linting Tool
  - Nu HTML Checker
    
    Validator
- HTML Formatter
  - Prettier
    
    Code Formatter
  - JS Beautify
    
    HTML Beautifier
- HTML Minifier
  - HTMLMinifier
    
    Compress HTML
  - Minify
    
    Remove Whitespace
- HTML Converter
  - Markdown to HTML
    
    Convert MD to HTML
  - Rich Text to HTML
    
    Convert Editor Content
  - CSV to HTML Table
    
    Generate Tables
- HTML Editor
  - WYSIWYG Editors
    
    TinyMCE CKEditor
  - CodePen
    
    Online Playground
  - JSFiddle
    
    Online Testing
  - CodeSandbox
    
    Full Environment
  - Replit
    
    Online IDE
- HTML Testing
  - Cross Browser Testing
    
    BrowserStack LambdaTest
  - Responsive Testing
    
    Responsively App
  - Performance Testing
    
    PageSpeed Insights WebPageTest
  - Accessibility Testing
    
    axe Lighthouse WAVE
- HTML Generators
  - Favicon Generator
    
    RealFaviconGenerator
  - Social Card Generator
    
    Open Graph Image
  - SVG Placeholder
    
    SVG Placeholder Generator
  - Lorem Ipsum Generator
    
    Placeholder Text
- HTML Learning Resources
  - MDN Web Docs
    
    Mozilla Documentation
  - W3Schools
    
    Tutorials Reference
  - HTML Spec
    
    WHATWG Living Standard
  - Can I Use
    
    Browser Support Data
  - CSS Tricks
    
    HTML CSS Articles
- HTML Cheat Sheets
  - HTML Tag Cheat Sheet
    
    All Tags Reference
  - HTML Attribute Cheat Sheet
    
    All Attributes
  - HTML5 Cheat Sheet
    
    HTML5 Features
  - Accessibility Cheat Sheet
    
    ARIA Guide
HTML Complete Guide
- HTML Version History
  - HTML 1.0
    
    First Version 1993
  - HTML 2.0
    
    Standardized 1995
  - HTML 3.2
    
    Math Support 1997
  - HTML 4.01
    
    Strict Transitional Frameset 1999
  - XHTML 1.0
    
    Strict XML Syntax 2000
  - HTML5
    
    Latest Major Version 2014
  - HTML Living Standard
    
    Continuous Updates WHATWG
- HTML Timeline
  - Birth of Web
    
    Tim Berners Lee 1989
  - First Browser
    
    WorldWideWeb 1990
  - HTML as Standard
    
    IETF 1993
  - W3C Formation
    
    World Wide Web Consortium 1994
  - XHTML Failure
    
    XHTML 2.0 Abandoned
  - WHATWG Formation
    
    Apple Mozilla Opera 2004
  - HTML5 Standard
    
    W3C Recommendation 2014
- HTML Future
  - HTML6 Possibilities
    
    Proposed Features
  - Web Components Maturity
    
    Wider Adoption
  - AI Integration
    
    Intelligent HTML Generation
  - Immersive Web
    
    WebXR Evolution
- HTML Industry
  - Job Market
    
    HTML Developer Demand
  - Freelance Opportunities
    
    HTML CSS for Clients
  - Full Stack Role
    
    HTML Essential Foundation
  - Frameworks Relation
    
    React Vue Angular Use HTML
- HTML Best Practices
  - Semantic HTML
    
    Use Proper Elements
  - Validation
    
    Always Validate HTML
  - Accessibility
    
    WCAG Compliant
  - Performance
    
    Optimize Loading
  - SEO Friendly
    
    Structured Properly
  - Clean Code
    
    Proper Indentation Comments
  - File Organization
    
    Logical Folder Structure
  - Version Control
    
    Git for HTML Projects
- HTML Common Mistakes
  - Forgetting Closing Tags
    
    Validation Error
  - Wrong Nesting
    
    Improper Hierarchy
  - Case Sensitivity
    
    Lowercase Tags Best
  - Missing Alt Text
    
    Accessibility Fail
  - Inline Styles Avoid
    
    Use CSS Classes
  - Divitis
    
    Excessive Div Usage
  - Ignoring Semantics
    
    Accessibility Issue
  - Not Responsive
    
    Mobile Unfriendly
  - Slow Loading
    
    Optimization Needed
- HTML Project Ideas
  - Beginner Portfolio
    
    Personal Website
  - Business Website
    
    Small Business Site
  - Blog Platform
    
    HTML CSS Blog
  - Ecommerce Site
    
    Product Listing Page
  - Landing Page
    
    Marketing Campaign Page
  - Restaurant Website
    
    Menu Booking
  - Travel Blog
    
    Destinations Gallery
  - Fitness Website
    
    Workout Plans
  - Educational Site
    
    Courses Content
  - News Website
    
    Article Layout
  - Social Media Dashboard
    
    Analytics Display
  - Admin Panel
    
    Backend Interface
  - Portfolio Gallery
    
    Image Grid
  - Event Website
    
    Conference Page
  - Wedding Invitation
    
    Digital Invite
  - Real Estate Site
    
    Property Listings
  - Job Portal
    
    Job Listings Board
  - Recipe Website
    
    Food Recipes
  - Weather App
    
    API Integration
  - Todo App
    
    Task Management
  - Calculator App
    
    Math Operations
  - Quiz App
    
    Interactive Questions
  - Memory Game
    
    Card Matching
  - Snake Game
    
    Classic Arcade
  - Tic Tac Toe
    
    Two Player Game
  - Connect Four
    
    Grid Strategy Game
  - Flappy Bird Clone
    
    Obstacle Game
  - Pong Game
    
    Ball Paddle Game
  - Space Invaders
    
    Shooting Game
  - Platformer Game
    
    Jump Run Game
  - Drawing App
    
    Canvas Painter
  - Photo Editor
    
    Filter Effects
  - Video Player
    
    Custom Controls
  - Audio Player
    
    Playlist Feature
  - Podcast Website
    
    Episode List
  - Music Streaming
    
    Album Player
  - Chart Generator
    
    Data Visualization
  - File Explorer
    
    Dropbox Style
  - Markdown Editor
    
    Live Preview
  - Code Editor
    
    Syntax Highlighting
  - Calendar App
    
    Event Scheduler
  - Clock App
    
    Analog Digital
  - Stopwatch Timer
    
    Countdown Feature
  - Weather Dashboard
    
    Forecast Display
  - Currency Converter
    
    Exchange Rates
  - Unit Converter
    
    Measurements
  - Color Picker
    
    HEX RGB HSL
  - Image Slider
    
    Carousel Gallery
  - Modal Popup
    
    Dialog Box
  - Accordion FAQ
    
    Expand Collapse
  - Tabs Component
    
    Switch Content
  - Tooltip Component
    
    Hover Info
  - Progress Bar
    
    Loading Indicator
  - Skeleton Loader
    
    Placeholder UI
  - Infinite Scroll
    
    Lazy Load Content
  - Parallax Effect
    
    Scrolling Depth
  - Typewriter Effect
    
    Animated Text
  - Particle Background
    
    Canvas Particles
  - 3D Cube Animation
    
    Three.js
  - Product Card
    
    Shop Item Display
  - Pricing Table
    
    Subscription Plans
  - Testimonials
    
    User Reviews
  - Team Section
    
    Staff Profiles
  - Contact Form
    
    User Inquiry
  - Login Signup
    
    Authentication Form
  - Search Bar
    
    Filter Results
  - Navigation Menu
    
    Dropdown Sidebar
  - Breadcrumb Navigation
    
    Path Tracker
  - Pagination
    
    Page Navigation
  - Load More Button
    
    Progressive Loading
  - Star Rating
    
    User Feedback
  - Like Button
    
    Interaction Component
  - Share Button
    
    Social Media Share
  - Copy Button
    
    Clipboard Copy
  - Notification Toast
    
    Alert Message
  - Loading Spinner
    
    Wait Indicator
  - Pulse Animation
    
    Loading Effect
  - Ripple Effect
    
    Material Design
  - Flip Card
    
    3D Hover Effect
  - Glassy Morphism
    
    Frosted Glass UI
  - Neumorphism
    
    Soft UI Design
  - Glassmorphism
    
    Transparent Layer
  - Claymorphism
    
    Soft 3D Effect
  - Wireframe
    
    Low Fidelity Design
  - Prototype
    
    Clickable Mockup
- HTML Tutorial Summary
  - Complete HTML Coverage
    
    From Basics to Advanced
  - Tags Covered
    
    All Semantic and Formatting Tags
  - Attributes Covered
    
    Global Event Input Attributes
  - CSS Integration
    
    Inline Internal External
  - JavaScript Integration
    
    DOM Manipulation Events
  - Responsive Design
    
    Media Queries Flexbox Grid
  - Accessibility
    
    WCAG ARIA Screen Readers
  - Performance
    
    Optimization Techniques
  - Security
    
    CSP XSS Prevention
  - SEO
    
    Best Practices Structured Data
  - APIs Covered
    
    Storage Geolocation Workers
  - PWA
    
    Service Workers Manifest
  - Web Components
    
    Custom Elements Shadow DOM
  - Canvas SVG
    
    2D 3D Graphics
  - Media
    
    Videos Audio YouTube
  - Forms
    
    Input Types Validation
  - Tables
    
    Complex Data Display
  - Lists
    
    Nested Styled Lists
  - Links
    
    Navigation Bookmarks
  - Images
    
    Responsive Optimization
HTML Final Certification
- HTML Quiz Level 1
  - Beginner Questions
    
    Basic HTML Knowledge
- HTML Quiz Level 2
  - Intermediate Questions
    
    Forms Tables Lists
- HTML Quiz Level 3
  - Advanced Questions
    
    APIs Web Components
- HTML Quiz Level 4
  - Expert Questions
    
    Performance Security
- HTML Practical Exam
  - Build a Website
    
    Real World Project
  - Code Review
    
    Best Practices Check
- HTML Certificate
  - Completion Certificate
    
    HTML Mastery
  - Badge
    
    Digital Credential
HTML Final Resources
- Recommended Books
  - HTML and CSS Book
    
    Jon Duckett
  - HTML5 The Missing Manual
    
    Matthew MacDonald
  - Learning Web Design
    
    Jennifer Robbins
- Recommended Courses
  - FreeCodeCamp
    
    Responsive Web Design
  - Coursera
    
    HTML CSS JavaScript
  - Udemy
    
    Complete HTML Course
- Recommended YouTube
  - Traversy Media
    
    HTML Crash Course
  - Web Dev Simplified
    
    HTML Tutorials
  - FreeCodeCamp
    
    Full Courses
- Documentation
  - MDN Web Docs
    
    Most Reliable Reference
  - W3Schools
    
    Easy Reference
  - WHATWG Spec
    
    Official Standard
- Community
  - Stack Overflow
    
    HTML Questions Answers
    
    Q&A platform
  - Dev.to
    
    HTML Articles
    
    Developer blogging
  - Reddit r/html
    
    HTML Discussion
  - Discord Servers
    
    HTML Help Channels
  - GitHub
    
    Code hosting and collaboration
  - Reddit
    
    Subreddits for HTML
  - Discord
    
    Real time chat help
- Newsletters
  - HTML Weekly
    
    Weekly Updates
    
    Weekly HTML news
  - Frontend Focus
    
    Frontend News
    
    Frontend development news
  - CSS Tricks
    
    HTML CSS Tips
  - Web Tools Weekly
    
    Web dev tools
- GitHub Repositories
  - HTML Boilerplate
    
    Starting Template
  - HTML5 Please
    
    Feature Support
  - HTML Reference
    
    Comprehensive Guide
- Code Snippets
  - CSS Tricks Snippets
    
    Useful Code Pieces
  - 30 Seconds of Code
    
    Quick Solutions
  - Codepen Patterns
    
    Component Examples
- Tools List
  - HTML Editors
    
    VS Code Sublime
  - Online Editors
    
    Codepen JSFiddle
  - Validators
    
    W3C HTMLHint
  - Converters
    
    Markdown to HTML
  - Generators
    
    Favicon SVG Placeholder
  - Testing Tools
    
    BrowserStack LambdaTest
  - Performance Tools
    
    PageSpeed Lighthouse
  - Accessibility Tools
    
    axe WAVE Lighthouse
  - Color Tools
    
    Color Contrast Checker
  - Font Tools
    
    Google Fonts Font Squirrel
  - Image Tools
    
    TinyPNG Squoosh
- Thank You
  - Complete HTML Tutorial
    
    End of Comprehensive Guide
- Online Tools
  - CodePen
    
    Online HTML CSS JS editor
  - JSFiddle
    
    Test HTML snippets
  - Replit
    
    Full online IDE
  - CodeSandbox
    
    Web development environment
  - StackBlitz
    
    Online VS Code
- Validation Tools
  - W3C Validator
    
    Official HTML validator
  - HTMLHint
    
    Code linting tool
  - nu validator
    
    Modern HTML checker
- Performance Tools
  - PageSpeed Insights
    
    Google performance tool
  - Lighthouse
    
    DevTools audit
  - WebPageTest
    
    Detailed performance analysis
  - GTmetrix
    
    Performance monitoring
- Accessibility Tools
  - axe DevTools
    
    Accessibility testing
  - WAVE
    
    Web accessibility evaluation
  - Color Contrast Checker
    
    WCAG contrast testing
  - Screen Readers
    
    NVDA JAWS VoiceOver
- SEO Tools
  - Google Search Console
    
    SEO monitoring
  - Rich Results Test
    
    Structured data testing
  - Mobile Friendly Test
    
    Google mobile test
- Color Tools
  - Adobe Color
    
    Color palette generator
  - Coolors
    
    Color scheme designer
  - Color Hunt
    
    Curated color palettes
- Font Tools
  - Google Fonts
    
    Free web fonts
  - Font Squirrel
    
    Web font generator
  - System Font Stack
    
    Cross platform fonts
- Image Tools
  - TinyPNG
    
    Image compression
  - Squoosh
    
    Image optimization
  - Cloudinary
    
    Image CDN and optimization
  - Placeholder Images
    
    Placeholder image generators
- Learning Platforms
  - MDN Web Docs
    
    Complete documentation
  - W3Schools
    
    Tutorials and references
  - FreeCodeCamp
    
    Interactive learning
  - Coursera
    
    Online courses
  - Udemy
    
    Video courses
  - YouTube
    
    Free video tutorials
- Books
  - HTML and CSS by Jon Duckett
    
    Beginner friendly
  - Learning Web Design by Robbins
    
    Comprehensive guide
  - Responsive Web Design by Marcotte
    
    RWD principles
  - HTML5 The Missing Manual
    
    In depth coverage
- Certification
  - FreeCodeCamp
    
    Responsive Web Design cert
  - W3Schools
    
    HTML Certificate
  - Google Digital Garage
    
    Digital skills
HTML Final Checklist
- Learning Path
  - Week 1
    
    HTML Basics and Structure
  - Week 2
    
    Text Formatting and Lists
  - Week 3
    
    Links Images and Tables
  - Week 4
    
    Forms and Input Types
  - Week 5
    
    CSS Integration and Styling
  - Week 6
    
    Responsive Design and Media Queries
  - Week 7
    
    JavaScript Basics with HTML
  - Week 8
    
    APIs Storage and Workers
  - Week 9
    
    Accessibility and ARIA
  - Week 10
    
    SEO and Performance
  - Week 11
    
    Web Components and Shadow DOM
  - Week 12
    
    Final Projects and Certification
- Skills Check
  - Basic Tags
    
    DOCTYPE html head body
  - Text Elements
    
    h1-h6 p br hr
  - Formatting
    
    b strong i em mark small
  - Lists
    
    ul ol li dl dt dd
  - Tables
    
    table tr td th thead tbody
  - Forms
    
    input textarea select button
  - Media
    
    img video audio canvas svg
  - Links
    
    a href target download
  - Semantic
    
    header nav main article section aside footer
  - Attributes
    
    id class style title lang
  - HTML5 Features
    
    datalist details summary dialog
  - Responsive
    
    viewport media queries flexbox grid
  - Accessibility
    
    alt text labels ARIA
  - Performance
    
    lazy loading preload defer async
  - SEO
    
    meta tags structured data canonical
  - APIs
    
    localStorage sessionStorage geolocation
  - PWA
    
    manifest service worker
  - Web Components
    
    custom elements shadow DOM templates
- Interview Questions
  - Question 1
    
    What is DOCTYPE and why needed
  - Question 2
    
    Difference between HTML and HTML5
  - Question 3
    
    Explain semantic HTML with examples
  - Question 4
    
    Block vs Inline elements difference
  - Question 5
    
    How to optimize website performance
  - Question 6
    
    What are data attributes and use
  - Question 7
    
    Explain localStorage vs sessionStorage
  - Question 8
    
    How to make website accessible
  - Question 9
    
    What is responsive web design
  - Question 10
    
    Explain CSS Grid vs Flexbox
  - Question 11
    
    What are pseudo classes and elements
  - Question 12
    
    How does z-index work
  - Question 13
    
    Explain box model in CSS
  - Question 14
    
    What are media queries
  - Question 15
    
    How to center a div
  - Question 16
    
    Explain event bubbling and delegation
  - Question 17
    
    What is closure in JavaScript
  - Question 18
    
    Explain this keyword in JS
  - Question 19
    
    What is promises in JavaScript
  - Question 20
    
    Explain async await
  - Question 21
    
    What is CORS and how to fix
  - Question 22
    
    Explain web workers use cases
  - Question 23
    
    What is shadow DOM
  - Question 24
    
    Explain service workers and PWA
  - Question 25
    
    What are web components
  - Question 26
    
    How to improve Core Web Vitals
  - Question 27
    
    What is CSP and why important
  - Question 28
    
    Explain cross site scripting XSS
  - Question 29
    
    What is CSRF attack prevention
  - Question 30
    
    How does HTTPS work
  - Question 31
    
    What is critical rendering path
  - Question 32
    
    Explain TTFB LCP FID CLS
  - Question 33
    
    What is lazy loading and benefits
  - Question 34
    
    How to optimize images for web
  - Question 35
    
    What is structured data JSON-LD
  - Question 36
    
    Explain hreflang for international SEO
  - Question 37
    
    What are canonical tags
  - Question 38
    
    How to handle pagination SEO
  - Question 39
    
    What is robots.txt and sitemap
  - Question 40
    
    Explain mobile first indexing
  - Question 41
    
    What is WCAG and accessibility levels
  - Question 42
    
    Explain ARIA roles and attributes
  - Question 43
    
    What are skip navigation links
  - Question 44
    
    How to test accessibility
  - Question 45
    
    What is color contrast ratio requirement
  - Question 46
    
    Explain keyboard navigation best practices
  - Question 47
    
    What are focus indicators
  - Question 48
    
    How to make modals accessible
  - Question 49
    
    What is screen reader testing
  - Question 50
    
    Explain legal requirements for accessibility
- Project Ideas
  - Project 1
    
    Personal Portfolio Website
  - Project 2
    
    E-commerce Product Page
  - Project 3
    
    Blog Platform with Comments
  - Project 4
    
    Restaurant Booking System
  - Project 5
    
    Weather Dashboard App
  - Project 6
    
    Task Management Todo App
  - Project 7
    
    Quiz Application with Timer
  - Project 8
    
    Memory Card Matching Game
  - Project 9
    
    Chat Application with WebSockets
  - Project 10
    
    Video Streaming Platform UI
  - Project 11
    
    Music Player with Playlist
  - Project 12
    
    Photo Gallery with Filters
  - Project 13
    
    Drawing Canvas Application
  - Project 14
    
    Markdown Editor Preview
  - Project 15
    
    Code Snippet Sharing Site
  - Project 16
    
    Social Media Dashboard
  - Project 17
    
    Analytics Dashboard Charts
  - Project 18
    
    Real Estate Property Listing
  - Project 19
    
    Job Portal Board
  - Project 20
    
    Online Learning Platform
  - Project 21
    
    Event Booking Website
  - Project 22
    
    Wedding Invitation Page
  - Project 23
    
    Digital Resume Builder
  - Project 24
    
    Invoice Generator Tool
  - Project 25
    
    Currency Converter API
  - Project 26
    
    Unit Conversion Tool
  - Project 27
    
    Password Generator App
  - Project 28
    
    QR Code Generator
  - Project 29
    
    URL Shortener Service
  - Project 30
    
    File Upload with Preview
  - Project 31
    
    PDF Viewer and Annotator
  - Project 32
    
    Text Summarizer Tool
  - Project 33
    
    Sentiment Analysis Dashboard
  - Project 34
    
    Face Detection Application
  - Project 35
    
    Speech to Text Converter
  - Project 36
    
    Text to Speech App
  - Project 37
    
    Screen Recorder Tool
  - Project 38
    
    Whiteboard Collaboration
  - Project 39
    
    Survey Form Builder
  - Project 40
    
    Feedback Collection System
  - Project 41
    
    News Aggregator Website
  - Project 42
    
    Stock Market Ticker
  - Project 43
    
    Cryptocurrency Tracker
  - Project 44
    
    Sports Score Live Update
  - Project 45
    
    Recipe Finder App
  - Project 46
    
    Fitness Workout Planner
  - Project 47
    
    Meditation Timer App
  - Project 48
    
    Budget Expense Tracker
  - Project 49
    
    Investment Calculator
  - Project 50
    
    Loan EMI Calculator
HTML Final Cheatsheet
- Beginner Cheatsheet
  - Basic Structure
    
    html head body
  - Text Tags
    
    h1 to h6 p br hr
  - Formatting Tags
    
    b strong i em mark small del ins
  - Links
    
    a href target
  - Images
    
    img src alt width height
  - Lists
    
    ul ol li dl dt dd
  - Tables
    
    table tr td th
  - Forms
    
    input textarea select button label
- Intermediate Cheatsheet
  - Input Types
    
    email number date color range file
  - Input Attributes
    
    required placeholder readonly disabled
  - Form Attributes
    
    action method enctype target
  - Table Elements
    
    thead tbody tfoot caption colgroup
  - Table Attributes
    
    colspan rowspan
  - Semantic Tags
    
    header nav main article section aside footer
  - Media Tags
    
    video audio source track
  - Graphics Tags
    
    canvas svg
  - Embed Tags
    
    iframe embed object
- Advanced Cheatsheet
  - HTML5 Tags
    
    datalist details summary dialog progress meter
  - Global Attributes
    
    id class style title lang dir
  - Event Attributes
    
    onclick onload onmouseover onchange onsubmit
  - Data Attributes
    
    data-* custom storage
  - ARIA Attributes
    
    aria-label aria-hidden aria-expanded
  - Meta Tags
    
    charset viewport description keywords author
  - Link Tags
    
    rel stylesheet icon preload prefetch
- CSS Cheatsheet
  - Selectors
    
    element class id universal descendant child
  - Box Model
    
    margin padding border width height
  - Display
    
    block inline inline-block flex grid none
  - Position
    
    static relative absolute fixed sticky
  - Flexbox
    
    flex-direction justify-content align-items flex-wrap
  - Grid
    
    grid-template-columns grid-template-rows grid-gap
  - Background
    
    background-color background-image background-size
  - Text
    
    color font-size font-family text-align line-height
- JavaScript Cheatsheet
  - DOM Selection
    
    getElementById querySelector getElementsByClassName
  - DOM Manipulation
    
    innerHTML textContent style classList
  - Events
    
    addEventListener click load submit change
  - Storage
    
    localStorage setItem getItem removeItem clear
  - Fetch API
    
    fetch then catch json
- Responsive Cheatsheet
  - Viewport
    
    meta viewport width device width initial scale
  - Media Queries
    
    max-width min-width orientation
  - Images
    
    max-width 100 percent height auto
  - Units
    
    percent vw vh rem em
- SEO Cheatsheet
  - Title Tag
    
    50-60 characters include keyword
  - Meta Description
    
    150-160 characters compelling summary
  - Headings
    
    One H1 proper hierarchy
  - Images
    
    alt text descriptive filenames
  - Canonical
    
    link rel canonical duplicate content
- Accessibility Cheatsheet
  - Alt Text
    
    descriptive for images empty for decorative
  - Labels
    
    label for input id association
  - ARIA
    
    aria-label aria-describedby aria-live
  - Focus
    
    tabindex visible focus indicator
  - Semantic
    
    use proper HTML elements
- Performance Cheatsheet
  - Lazy Loading
    
    loading lazy on images iframes
  - Async Defer
    
    async for independent scripts defer for order
  - Preload
    
    link rel preload as font style script
  - Compression
    
    Gzip Brotli on server
  - Caching
    
    Cache-Control headers service worker
HTML Final Reference
- Quick Reference
  - Common Tags
    
    Most Used HTML Tags List
  - Void Elements
    
    br hr img input meta link area base col embed source track
  - Deprecated Tags
    
    center font frame frameset applet acronym marquee blink
  - New HTML5 Tags
    
    header nav main article section aside footer details summary dialog
  - Form Input Types
    
    text password email number date color range file submit reset button
  - Global Attributes
    
    id class style title lang dir hidden tabindex contenteditable
  - Event Attributes
    
    onclick ondblclick onload onmouseover onmouseout onkeydown onkeyup
  - CSS Units
    
    px rem em vw vh percent ex ch
  - Color Formats
    
    hex rgb rgba hsl hsla color names
  - Media Formats
    
    mp4 webm ogg mp3 wav jpg png gif svg webp avif
HTML Final Glossary
- Terms A
  - Absolute Path
    
    Full URL path from root
  - Accessibility
    
    Web access for people with disabilities
  - Alt Text
    
    Alternative text for images
  - API
    
    Application Programming Interface
  - ARIA
    
    Accessible Rich Internet Applications
  - Async
    
    Load script without blocking HTML parsing
- Terms B
  - Block Element
    
    Element that starts on new line takes full width
  - Box Model
    
    Margin Border Padding Content
- Terms C
  - Canvas
    
    HTML element for dynamic graphics
  - Child Element
    
    Element nested inside another
  - Class
    
    HTML attribute for CSS styling
  - CLS
    
    Cumulative Layout Shift metric
  - CORS
    
    Cross Origin Resource Sharing
  - CSP
    
    Content Security Policy
- Terms D
  - Data Attribute
    
    Custom attribute starting with data-
  - Defer
    
    Execute script after HTML parsing
  - Deprecated
    
    Feature still works but not recommended
  - DOM
    
    Document Object Model
  - Drag and Drop
    
    API for draggable elements
- Terms E
  - Element
    
    HTML tag with content
  - Em
    
    Relative unit based on parent font size
  - Entity
    
    Special character code like <
- Terms F
  - Favicon
    
    Website icon in browser tab
  - FCP
    
    First Contentful Paint metric
  - FID
    
    First Input Delay metric
  - Flexbox
    
    CSS layout model
- Terms G
  - Geolocation
    
    API for user location
  - Grid
    
    CSS two dimensional layout
- Terms H
  - HTML
    
    HyperText Markup Language
  - HTTP
    
    HyperText Transfer Protocol
  - HTTPS
    
    Secure HTTP with SSL TLS
- Terms I
  - ID
    
    Unique identifier attribute
  - Iframe
    
    Inline frame for embedding
  - Inline Element
    
    Element in text flow no line break
  - INP
    
    Interaction to Next Paint metric
- Terms J
  - JavaScript
    
    Programming language for web
  - JSON
    
    JavaScript Object Notation
  - JSON-LD
    
    JSON for Linked Data structured data
- Terms L
  - Lazy Loading
    
    Defer loading of offscreen content
  - LCP
    
    Largest Contentful Paint metric
  - LocalStorage
    
    Browser persistent storage
- Terms M
  - Media Query
    
    CSS for responsive design
  - Meta Tag
    
    Metadata in HTML head
  - Microdata
    
    Structured data format
- Terms N
  - Nested Element
    
    Element inside another element
- Terms O
  - Open Graph
    
    Facebook social media protocol
- Terms P
  - Padding
    
    Inner space of element
  - Parent Element
    
    Container element
  - Preload
    
    Load critical resources early
  - Pseudo Class
    
    CSS selector colon syntax
  - Pseudo Element
    
    CSS selector double colon
  - PWA
    
    Progressive Web App
- Terms R
  - Rem
    
    Relative unit based on root font size
  - Responsive
    
    Adapts to different screen sizes
  - RGB
    
    Red Green Blue color model
- Terms S
  - Semantic
    
    Meaningful HTML elements
  - Server-Sent Events
    
    One way server to client
  - Service Worker
    
    Proxy for offline caching
  - Shadow DOM
    
    Encapsulated DOM tree
  - Slot
    
    Web component content projection
  - SVG
    
    Scalable Vector Graphics
- Terms T
  - TTFB
    
    Time To First Byte metric
  - Template
    
    Reusable HTML markup
- Terms U
  - UTF-8
    
    Universal Character Set encoding
- Terms V
  - Viewport
    
    Visible area of webpage
  - Void Element
    
    Self closing tag
- Terms W
  - WCAG
    
    Web Content Accessibility Guidelines
  - Web Component
    
    Reusable custom elements
  - Web Storage
    
    Local and session storage
  - Web Worker
    
    Background thread JavaScript
  - WebP
    
    Modern image format
  - WebSocket
    
    Bidirectional realtime communication
- Terms X
  - XHTML
    
    Strict XML version of HTML
  - XSS
    
    Cross Site Scripting attack
HTML Final Congratulations
- Course Complete
  - Congratulations
    
    You have completed HTML Tutorial
  - Next Steps
    
    Learn CSS in depth
    
    Learn JavaScript
    
    Build projects practice daily
    
    Join developer community
  - Keep Learning
    
    Stay updated with new features
    
    Follow HTML specification
    
    Practice coding regularly
  - Thank You
    
    Thank you for learning HTML
HTML Deprecated Tags
- Text Formatting Deprecated
  - <center>
    
    Center text - Use CSS text-align:center instead
  - <font>
    
    Font styling - Use CSS font properties instead
  - <big>
    
    Bigger text - Use CSS font-size:larger instead
  - <strike>
    
    Strikethrough text - Use CSS text-decoration:line-through instead
  - <tt>
    
    Teletype monospace - Use CSS font-family:monospace instead
  - <u>
    
    Underline (redefined) - Use CSS text-decoration:underline
  - <s>
    
    Strikethrough (redefined) - Use CSS text-decoration:line-through
  - <acronym>
    
    Acronym - Use <abbr> tag instead
  - <plaintext>
    
    Plain text - Use <pre> or text/plain instead
  - <listing>
    
    Listing text - Use <pre> or <code> instead
  - <xmp>
    
    Example text - Use <pre> or <code> instead
  - <nobr>
    
    No break text - Use CSS white-space:nowrap instead
  - <spacer>
    
    Space insertion - Use CSS margin or padding instead
  - <multicol>
    
    Multi-column text - Use CSS columns instead
  - <bgsound>
    
    Background sound - Use <audio> tag instead
- Layout Deprecated
  - <frame>
    
    Individual frame - Use CSS Grid/Flexbox instead
  - <frameset>
    
    Frame container - Use CSS Grid/Flexbox instead
  - <noframes>
    
    Fallback for frames - Use modern layout techniques
    
    No frames content - Use responsive design
  - <layer>
    
    Layer positioning - Use CSS positioning instead
  - <ilayer>
    
    Inline layer - Use CSS positioning instead
- Embed Deprecated
  - <applet>
    
    Java applet - Use <object> or modern JS
  - <embed>
    
    External plugin (redefined) - Still used for PDF/flash but caution
  - <noembed>
    
    Fallback for embed - Use <object> fallback
  - <param>
    
    Parameters for plugins - Use data attributes or JS
- Animation Deprecated
  - <blink>
    
    Blinking text - Use CSS animation instead
  - <marquee>
    
    Scrolling text - Use CSS animation instead
- Form Deprecated
  - <keygen>
    
    Key pair generator - Use Web Crypto API instead
  - <isindex>
    
    Single line input - Use <input> tag instead
  - <nextid>
    
    NeXT ID generator - Not supported
- List Deprecated
  - <dir>
    
    Directory list - Use <ul> tag instead
  - <menu>
    
    Menu list (redefined) - Modern <menu> for toolbar
- Table Deprecated
  - <colgroup>
    
    Column group (still valid but attributes deprecated)
  - <col>
    
    Column (still valid but attributes deprecated)
- Script Deprecated
  - <script language>
    
    Language attribute - Use type="text/javascript"
- Metadata Deprecated
  - <meta http-equiv>
    
    Some values deprecated - Use modern equivalents
  - <basefont>
    
    Base font - Use CSS body font properties
  - <link rev>
    
    Reverse relationship - Use rel attribute instead
HTML Attributes
- Contenteditable
  - contenteditable
    
    Make Element Editable
  - execCommand
    
    Document Editing Commands
  - WYSIWYG Editor
    
    Build Rich Text Editor
HTTP
- HTTP/3
  - HTTP/3
    
    Latest HTTP Version
  - QUIC Protocol
    
    UDP Based Transport
  - 0 RTT
    
    Zero Round Trip Time
  - Connection Migration
    
    IP Change Support
- Early Hints
  - 103 Early Hints
    
    Preload Before Response
  - Link Header
    
    Preload Resources Early
  - Performance Optimization
    
    Faster Page Load
- Compression
  - Brotli
    
    Better Compression than Gzip
  - Zstandard
    
    Zstd Compression
  - Accept-Encoding
    
    Compression Negotiation
HTML Packaging
- WebBundle
  - WebBundle
    
    Package Web Resources
  - Signed Exchanges
    
    SXG Format
  - Bundling
    
    Signed HTTP Exchanges
HTML Privacy
- Isolated Web Apps
  - Isolated Web Apps
    
    Enhanced Security Apps
  - Trust Tokens
    
    Privacy Preserving Tokens
- Fenced Frames
  - <fencedframe>
    
    Privacy Preserving Frame
  - Interest Groups
    
    FLEDGE API
- Private Aggregation API
  - PrivateAggregation
    
    Private Data Aggregation
  - contributeToHistogram
    
    Contribute Data
- Shared Storage API
  - SharedStorage
    
    Shared Storage Access
  - worklet
    
    Shared Storage Worklet
- Attribution Reporting API
  - Attribution Reporting
    
    Conversion Measurement
  - registerSource
    
    Register Attribution Source
  - registerTrigger
    
    Register Attribution Trigger
- Topics API
  - Topics API
    
    Interest Based Advertising
  - document.browsingTopics
    
    Get Topics
  - Privacy Sandbox
    
    Chrome Privacy Sandbox
- First Party Sets
  - First Party Sets
    
    Related Domain Declaration
  - owner
    
    Set Owner Domain
  - version
    
    Set Version
Category
- Subcategory
  - ChildSubcategory
    
    Title
HTML Complete
- Congratulations
  - Course Complete
    
    HTML Mastery Achieved
- Next Steps
  - Learn CSS
    
    Advanced CSS Techniques
  - Learn JavaScript
    
    ES6+ Modern JavaScript
  - Build Projects
    
    Real World Projects
  - Get Certified
    
    HTML Certification
- Resources
  - Documentation
    
    MDN Web Docs
  - Community
    
    Stack Overflow GitHub
  - Tools
    
    VS Code Chrome DevTools

📘

PHP Tools Hub

About Us
Contact
Privacy Policy
Terms of Use

Popular Tools

JSON Formatter
Base64 Encoder
UUID Generator
Lorem Ipsum