LetCodes

Learn HTML

This is a starter landing page for HTML. Replace this paragraph with a short, friendly description of the topic and what readers will learn from the tutorial series.

Tutorial contents

Introduction to HTML
What Is HTML?
History of HTML & HTML5
How the Web Works
Editors & Tools
Your First HTML Page
How Browsers Render HTML
The Doctype (<!DOCTYPE html>)
Anatomy of a Document
The Root Element (<html>)
The Head (<head>)
The Body (<body>)
Syntax Rules & Conventions
Elements, Tags & Nesting
Attributes
Global Attributes
Comments ()
Whitespace & Formatting
Block vs Inline Elements
Void (Self-Closing) Elements
Headings (<h1>–<h6>)
Paragraphs (<p>)
Line Breaks & Rules (<br>, <hr>)
Text Formatting (<b>, <i>, <strong>, <em>)
Quotations (<blockquote>, <q>, <cite>)
Code & Preformatted (<code>, <pre>, <kbd>)
Subscript & Superscript (<sub>, <sup>)
Abbreviations & Definitions (<abbr>, <dfn>)
Highlight & Edits (<mark>, <ins>, <del>)
Generic Containers (<span>, <div>)
Text Direction (dir, <bdo>, <bdi>)
Unordered Lists (<ul>)
Ordered Lists (<ol>)
List Items (<li>)
Description Lists (<dl>, <dt>, <dd>)
Nested Lists
Hyperlinks (<a>)
Link Targets & rel Attribute
Anchors & Fragment Links
mailto, tel & Other Schemes
Download Links
Navigation Menus (<nav>)
Images (<img>)
Image Formats (JPG, PNG, WebP, AVIF)
Alt Text & Accessibility
Figures (<figure>, <figcaption>)
Image Maps (<map>, <area>)
Favicons & App Icons
Responsive Images (srcset, sizes)
Art Direction (<picture>)
Lazy Loading Images
Tables (<table>)
Rows & Cells (<tr>, <td>, <th>)
Sections (<thead>, <tbody>, <tfoot>)
Caption & Column Groups (<caption>, <colgroup>)
Spanning Cells (colspan, rowspan)
Accessible & Responsive Tables
Forms Introduction (<form>)
Form Attributes (action, method)
Labels (<label>)
Text Inputs (text, password, search)
Email, URL & Tel Inputs
Number & Range Inputs
Checkboxes & Radio Buttons
Date & Time Inputs
Color & File Inputs
Hidden & Other Inputs
Text Areas (<textarea>)
Dropdowns (<select>, <option>, <optgroup>)
Autocomplete (<datalist>)
Buttons (<button>)
Grouping (<fieldset>, <legend>)
Form Validation (required, pattern)
Constraint Validation API
Form Best Practices & UX
Audio (<audio>)
Video (<video>)
Media Sources & Codecs (<source>)
Captions & Subtitles (<track>)
Embedding (<embed>, <object>)
Inline Frames (<iframe>)
Iframe Security (sandbox, loading)
Why Semantic HTML?
Sectioning (<section>, <article>)
Header & Footer (<header>, <footer>)
Main & Aside (<main>, <aside>)
Disclosure (<details>, <summary>)
Dialogs & Modals (<dialog>)
Time & Address (<time>, <address>)
Document Outline & Landmarks
Canvas Basics (<canvas>)
Inline SVG Basics (<svg>)
SVG vs Canvas
Page Title (<title>)
Meta Tags (<meta>)
Charset & Viewport
Linking CSS (<link>)
Adding Scripts (<script>)
Base URL (<base>)
Resource Hints (preload, prefetch, preconnect)
SEO Fundamentals
SEO Meta Tags & Robots
Open Graph Protocol
Twitter / X Cards
Canonical URLs & hreflang
Microdata (itemscope, itemprop)
JSON-LD & Schema.org
Accessibility (a11y) Intro
ARIA Roles
ARIA States & Properties
Keyboard Navigation & tabindex
Screen Readers & Live Regions
Accessible Forms
HTML Entities & Special Characters
Character Encoding (UTF-8)
Emoji & Symbols
Templates (<template>)
Slots (<slot>)
Custom Elements Overview
Shadow DOM Overview
Data Attributes (data-*)
Drag & Drop API
Geolocation API
Web Storage (localStorage)
Editable Content (contenteditable)
HTML5 APIs Overview
Lazy Loading & loading Attribute
Script Loading (async, defer)
Critical Rendering Path
Performance Best Practices
Semantic & Clean Markup
Validating HTML (W3C Validator)
Common Mistakes to Avoid
Code Style & Conventions
HTML Cheatsheet
Element Reference
Attribute Reference
Interview Questions