HTML Core
Document structure, elements, text, links, media, tables and forms.
This is an overview — pick a sub-topic below.
Sub-topics (25)
HTML Document Structure
Every page has a doctype, an `html` root, a `head` (metadata) and a `body` (visible content).
Elements and Tags
An element is a start tag, content and end tag: `<p>Text</p>`. Some elements are void (no content or end tag): `<img>`, `<br>`, `<input>`.
Attributes
Extra information on an element written as `name="value"` in the start tag.
Text Semantics
Inline elements that give text meaning: `strong` (importance), `em` (emphasis), `code`, `abbr`, `time`, `mark`, `small`, `sub`, `sup`.
Headings
`h1`–`h6` define the outline of a page.
Paragraphs
`p` wraps a block of text; browsers add spacing and collapse extra whitespace.
Links
`a` with `href` connects pages, sections, emails and files.
Images
`img` embeds a picture; `alt` describes it for people who can't see it.
Lists
Unordered (`ul`), ordered (`ol`) and description lists (`dl`), with items in `li` (or `dt`/`dd`).
Tables
`table`, `thead`, `tbody`, `tr`, `th` and `td` present tabular data.
Forms
`form` collects user input and sends it to a server (`action`, `method`).
Input Types
`input type=` text, email, password, number, range, date, time, color, file, checkbox, radio, search, tel, url.
Labels
`label` names a form control — clicking it focuses the control, and screen readers announce it.
Buttons
`button` triggers actions; `type="submit"` (default in forms), `type="button"` or `type="reset"`.
Select and Textarea
`select` with `option`s gives a dropdown; `textarea` accepts multi-line text.
Audio
`audio` plays sound with optional controls.
Video
`video` plays video files with controls, poster image and captions.
Iframes
`iframe` embeds another page — maps, YouTube videos, demos.
Semantic HTML
Use elements that describe their role: `header`, `nav`, `main`, `article`, `section`, `aside`, `footer`, `figure`.
Metadata
`head` elements describing the page: `title`, `meta` description, charset, viewport, `link` (stylesheets, icons, canonical URL).
Doctype
`<!doctype html>` on the first line tells browsers to use standards mode.
HTML Entities
Codes for reserved or special characters: `<` (<), `>` (>), `&` (&), ` `, `©`, `Ω`.
Global Attributes
Attributes valid on any element: `id`, `class`, `style`, `title`, `lang`, `dir`, `hidden`, `tabindex`, `data-*`.
Data Attributes
Custom `data-*` attributes store extra information for scripts and CSS.
HTML Validation
Check markup against the standard with the W3C Validator or editor linters.
Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.
Discussion (0)
Sign in or join free to ask questions and discuss this topic.