Introduction to HTML
What is HTML?
Introduces HTML as the language that structures all content on the web.
Explains what a markup language is, and how HTML differs from programming languages like JavaScript.
Covers how browsers parse and render HTML into a visible page.
Sets up the development environment: a text editor and a browser — nothing else required.
Start
Anatomy of an HTML Element
Breaks down the structure of an HTML element: opening tag, content, closing tag, and attributes.
Introduces void (self-closing) elements such as br, hr, img, and input.
Covers nesting rules — what makes valid HTML and what common mistakes look like.
Hands-on: writing and viewing a first HTML file in the browser.
Start
Document Structure
The skeleton of every HTML page: DOCTYPE declaration, html, head, and body.
What goes in the head: title, meta charset, meta viewport, and linking external files.
Why document structure matters for browsers, search engines, and assistive technologies.
Start
Headings, Paragraphs, and Text
Structuring written content with h1–h6 headings and p paragraphs.
Inline text elements: strong, em, small, mark, abbr, code, kbd, and sub/sup.
The br and hr elements and when (not) to use them.
Introduces the concept of semantic meaning — using the right element for the right content.
Start
Lists
Unordered lists (ul/li), ordered lists (ol/li), and definition lists (dl/dt/dd).
Attributes on ol: type and start for controlling numbering style.
Nesting lists to create multi-level outlines.
When to use a list vs a paragraph — semantic considerations.
Start
Links and Navigation
The anchor element — href, target, rel, and download attributes.
Absolute vs relative URLs and when to use each.
Linking to sections within the same page using id anchors.
Building a simple navigation menu using lists and links.
Accessibility: meaningful link text and the role of visited/focus states.
Start
Images and Media
Embedding images with img: src, alt, width, height, and loading attributes.
Image formats for the web: JPEG, PNG, SVG, WebP — choosing the right one.
Responsive images with srcset and the picture element.
Embedding video and audio with the video and audio elements, and the source fallback pattern.
Accessibility: alt text best practices and when to use an empty alt.
Start
Tables
Structuring tabular data with table, thead, tbody, tfoot, tr, th, and td.
Spanning rows and columns with colspan and rowspan.
The caption element for table titles.
Accessibility: scope attribute and the distinction between layout tables (avoid) and data tables.
Start
Forms and Inputs
Building interactive forms with form, label, input, textarea, select, and button.
Key input types: text, email, password, number, date, checkbox, radio, range, and file.
Form attributes: action, method, placeholder, required, disabled, and autocomplete.
Grouping controls with fieldset and legend.
How form data is submitted to a server (GET vs POST).
Start
Semantic HTML5 Elements
The HTML5 landmark elements: header, nav, main, article, section, aside, and footer.
How semantic structure benefits search engines (SEO) and screen readers (accessibility).
Choosing between div/span (non-semantic) and the appropriate semantic element.
Practical exercise: re-marking up a div-heavy page using semantic elements.
Start
HTML Entities, Characters, and Encoding
Reserved characters in HTML: <, >, &, and " — and their entity equivalents.
Named and numeric character references for symbols: ©, ™, →, and non-breaking spaces.
The role of meta charset="UTF-8" and why encoding matters for international content.
Start
Metadata, SEO, and Sharing
Meta tags that influence search engines: description, robots, and canonical.
Open Graph and Twitter Card meta tags for rich link previews on social media.
The link element: favicon, stylesheet, preload, and font loading.
Structured data basics: what schema.org markup is and why it matters.
Start
Accessibility Fundamentals
Why accessibility is a legal requirement and a mark of quality, not an afterthought.
ARIA roles, aria-label, aria-hidden, and aria-describedby — when to use them and when native HTML is enough.
Keyboard navigation: tab order, focus management, and skip links.
Testing with a screen reader and the browser's accessibility tree.
Start
Building a Complete Web Page
A capstone project that applies every concept from the course: structuring a multi-section page with semantic elements, a navigation bar, images, a data table, and a contact form.
Covers validation with the W3C Markup Validator and fixing common errors.
Prepares learners for the next course: Introduction to CSS.
Start