HTML tutorial

Learn how to structure clear, accessible web pages with modern HTML.

Course contents

HTML Basics — What HTML actually is, the skeleton every page starts from, the DOCTYPE line, how HTML has changed over time, and how to create and open your first HTML file.
Elements — Tags, elements, the basic tags you will use constantly (heading, paragraph, line break, center, horizontal rule, preformatted text), inline versus block, and how nested elements work.
Attributes — What attributes are, id and class, align/dir/title, the lang attribute, data-* attributes, the style attribute, quoting values, and boolean attributes.
Text Formatting — What text formatting means, the everyday formatting elements (b, strong, i, em, small, u, strike, sup, sub, ins, del, mark), and the quotation and citation elements (blockquote, q, abbr, address, cite, bdo).

Entities — What HTML entities are, the spacing entities, the five reserved characters you must always escape, exponents and maths signs, currency symbols including the rupee, the two dashes, and the copyright, trademark and registered trademark symbols.

Links — What links are, the anchor tag and its href, opening a link in a new tab safely, jumping to a section of a page, download links and renaming the saved file, and email links with subject, body, CC and BCC.
Images — Putting pictures on a page, relative and absolute paths, writing alt text that works, the title attribute, why width and height stop the page jumping, using images from other sites, and image maps.
Multimedia Elements — The audio and video elements with their controls and formats, iframes and why they need a title, and the embed and object elements including showing a PDF with a proper fallback.

Lists — The three kinds of HTML list, unordered and ordered lists with their styling and numbering attributes, description lists for terms and meanings, and the one rule for nesting a list inside another.
Tables — What tables are for, building one from table, tr, th and td, why a header cell is not a bold data cell, the caption element, and grouping rows with thead, tbody and tfoot.
Spanning Cells — Stretching a cell across columns with colspan and down rows with rowspan, how to count cells once a span is in play, combining both on one cell, and a full timetable example.
Responsive Tables — Why tables overflow on small screens instead of reflowing, putting a table in its own horizontal scroll box, making that box reachable by keyboard, and using captions and sticky headers to keep it understandable.

Form Submission — What a form is and which part does what, the action and method attributes, the difference between GET and POST, why a field with no name is never sent, and submit and reset buttons.
Form Inputs — Labels and how to wire them, text inputs with placeholder and value, readonly against disabled, accessibility basics, and the choice controls: radio buttons, checkboxes, select dropdowns, multiple selection and datalist.
Input Types — The input types you will actually use — email, password, number, date, time, range, color, url, search and hidden — what each changes about the control, the mobile keyboard and the built-in checking.
Form Validation — Blocking empty fields with required, setting ranges with min and max, limiting text with minlength and maxlength, matching formats with pattern and title, the built-in email check, and styling valid and invalid states.

Semantic Elements — What semantic HTML means and why it matters, semantic against non-semantic elements, the common areas of a page layout, and the seven layout elements: header, nav, main, section, article, aside and footer.

Accessibility Basics — What accessibility means in practice, alt text and labels, keyboard access and visible focus, how semantic HTML does most of the work, and an introduction to ARIA labels and roles with the rule for when to use them.

SEO — The title and meta description, character encoding and the viewport tag, SEO-friendly headings and alt text, and the Open Graph tags that control how a shared link previews.

Modern HTML Components — The template element and why it beats building markup from strings, what SVG is and how it differs from a normal image, the circle, rectangle and line shapes, and making an SVG accessible.
HTML Canvas Basics — What canvas is and when it beats HTML or SVG, adding the element and sizing it correctly, getting the 2D context, drawing lines, rectangles, paths, circles, arcs and text, setting colours and fonts, and the coordinate system.

Best Practices — Writing clean, readable HTML: indentation and formatting, meaningful file, id and class names, avoiding unnecessary nesting, guidelines for choosing semantic elements, and the deprecated tags and attributes to replace.

Cheat Sheet — Document structure, text and formatting elements, links, images, lists, tables, forms, semantic elements, meta tags, common attributes and the HTML entities you use daily, in one place.
HTML Reference — The complete tag catalogue, global and event attributes, every input type, the media elements reference and the full HTML5 element list.