Beginner
Complete HTML fundamentals: document structure, text, links, images, media, lists, tables, forms, semantic elements, attributes, entities, and SEO meta tags.
Progress: 0 / 40 topics completed
HTML Foundations
What is HTML?
Understand what HTML is, how browsers render it, and why it is the foundation of every web page.
HTML Document Structure
Learn the required skeleton of every HTML document: DOCTYPE, html, head, and body elements.
The Head Element
Explore the elements that live inside <head>: title, meta, link, script, and style.
HTML Comments
Add developer notes and temporarily disable markup with HTML comment syntax.
Text Content
Headings
Use h1 through h6 to create a logical content hierarchy for users and search engines.
Paragraphs and Line Breaks
Write text content with <p>, control line breaks with <br>, and add thematic breaks with <hr>.
Text Formatting Tags
Add meaning to inline text with strong, em, mark, del, ins, sup, sub, and more.
Block vs Inline Elements
Understand the fundamental display difference between block-level and inline HTML elements.
Links
Hyperlinks
Create clickable links with the <a> element, href attribute, and link text.
Link Targets and Relationships
Master link behavior with target, rel, download attributes and relative vs absolute URLs.
Anchor Links and Same-Page Navigation
Create table-of-contents links and page jumps using fragment identifiers and id attributes.
Images and Media
Images
Embed images with <img>, understand src and alt attributes, and control size.
Audio and Video
Embed media directly in HTML5 with <audio> and <video> elements and their key attributes.
Iframes
Embed external content YouTube videos, maps, widgets with the <iframe> element.
Lists
Unordered Lists
Create bulleted lists with <ul> and <li>, the most common list type in HTML.
Ordered Lists
Create numbered sequences with <ol>, and customize numbering with type and start attributes.
Nested Lists
Create hierarchical list structures by nesting <ul> or <ol> inside <li> elements.
Description Lists
Create term-definition pairs with <dl>, <dt>, and <dd> for glossaries and metadata.
Tables
Forms
Form Basics
Create HTML forms with the <form> element, understand action and method attributes.
Input Types
Master the many <input> types: text, password, email, number, checkbox, radio, date, and more.
Labels and Accessibility
Associate <label> with inputs for accessible, clickable form fields.
Select Dropdowns
Create dropdown menus with <select>, <option>, and <optgroup> elements.
Textarea and Buttons
Collect multi-line text with <textarea> and trigger actions with <button>.
Form Validation
Add built-in browser validation with required, minlength, maxlength, min, max, and pattern.
Fieldset and Legend
Group related form controls with <fieldset> and label the group with <legend>.
Semantic HTML
Semantic Layout Elements
Structure pages with <header>, <footer>, <nav>, <main>, and <aside>.
Article and Section
Organize content with <article> (self-contained pieces) and <section> (thematic groups).
Semantic Text Elements
Use <figure>, <figcaption>, <time>, <address>, and <pre> for meaningful text content.
Div and Span
Use <div> and <span> as generic containers when no semantic element fits.
Attributes and Accessibility
Global Attributes
Apply id, class, style, title, hidden, and tabindex to any HTML element.
Data Attributes
Store custom data in HTML elements with data-* attributes and access them from JavaScript.
ARIA and Accessibility
Improve screen reader support with ARIA roles, aria-label, and aria-hidden.
Advanced Basics
HTML Entities
Display reserved and special characters using HTML entities like &, <, ©.
SEO Meta Tags
Optimize pages for search engines with meta description, robots, canonical, and structured data hints.
Open Graph and Social Tags
Control how your pages look when shared on Facebook, Twitter/X, LinkedIn with OG and Twitter Cards.
HTML Validation and Best Practices
Write clean, valid HTML with proper nesting, indentation, and the W3C Validator.
HTML5 New Elements Overview
Discover key HTML5 additions: details/summary, dialog, progress, meter, datalist, and template.