HTML stands for HyperText Markup Language, and its job is to say what every piece of a page is: a heading, a paragraph, a list, an image.
An element is normally a pair of tags with content between them, like <p>Chocolate melts at 34 degrees.</p>.
The opening tag can carry attributes, extra information written as name="value", as in <img src="logo.png">.
A handful of elements are void elements with no content and no closing tag, including <img>, <br> and <input>.
Tags must close in reverse order of opening, so <p><strong>text</strong></p> is correct and <p><strong>text</p></strong> is broken.
Browsers quietly repair bad nesting, which is why a page can look nearly right and still be wrong underneath.
Every Page Starts From the Same Skeleton
<!DOCTYPE html> on the first line tells the browser to use modern standards instead of an old compatibility mode that breaks layouts.
<html lang="en"> wraps the whole document, and the lang attribute tells a screen reader which language to pronounce the words in.
The head holds information about the page rather than page content: the title, the character set and the links to stylesheets.
<meta charset="utf-8"> makes accented letters and symbols such as é, ° and → show correctly rather than as strings of question marks.
The title shows in the browser tab and is the headline in a search result, so write "Kettle repair guide" rather than "Untitled document".
The body holds everything a visitor can actually see.
Example
A working page is six lines: doctype, html, head with charset and title, then body with an h1.
Save it as index.html and drag the file into a browser, no server needed.
Name files in lowercase with hyphens, so about-us.html rather than About Us.html, because web servers are fussy about capitals and spaces.
Semantic Tags Say What a Thing Is
Definition
Semantic HTML
Writing HTML with tags that describe what the content means, such as nav for navigation or article for a standalone piece, rather than using div for everything.
A <div> carries no meaning at all, while semantic elements name the job the content does.
<header> holds the masthead and site name, <nav> holds the main set of links, and <main> holds the content unique to that one page.
<section> groups related content under its own heading, while <article> wraps something that would still make sense if you copied it out on its own, like a review or a blog post.
<footer> takes the credits, contact details and copyright line.
A screen reader user can jump straight to <main> or list every <nav> on the page, which a wall of identical divs cannot offer.
Use <main> once per page, and use <section>, <article> and <nav> as many times as the content genuinely needs.
Headings Are an Outline, Not a Font Size
Use one <h1> for what the page is about, <h2> for each major section, and <h3> for subsections inside those.
Never skip a level to get smaller text, because jumping from h2 to h4 leaves a gap that assistive software reads as missing content.
If a heading looks too big, shrink it with CSS font-size and leave the level alone.
Paragraphs go in <p>, one idea per paragraph.
<ul> makes an unordered list where the order does not matter, and <ol> numbers the items where it does, like the steps for soldering a joint.
Both lists take <li> children only, so any paragraph or image you want inside a list must sit inside an <li>.
Common Mistake
Pressing Enter twice does not create a new paragraph, because HTML collapses runs of whitespace into a single space.
<br> is for a line break inside one block of text, such as the lines of a postal address, not for pushing paragraphs apart.
Space between blocks is a CSS margin job, never a row of empty tags.
Links and Alt Text Are Where Accessibility Lives
<a href="products.html">Our products</a> makes a link, and the href attribute is the destination.
A relative path such as images/logo.png points inside your own folder structure, while an absolute URL starting https:// points at another site.
Link text has to make sense read on its own, so "Download the user manual" beats "click here" for anyone skimming a list of links.
<img src="kettle.jpg" alt="Stainless steel kettle with a black handle"> needs both attributes, src for the file and alt for the description.
Alt text says what the image shows in this context, so a chart gets its finding, not the word "chart".
A purely decorative image takes alt="" with nothing inside, which tells a screen reader to skip it rather than read out a filename like IMG_4471.
Setting width and height attributes on the img reserves the space so the page stops jumping about while pictures load.
The wider accessibility thinking, colour contrast, focus order and readable type sizes, belongs to the interface design articles in this unit.
Forms in Outline: Every Field Gets a Label
<form> wraps the fields, its action attribute says where the data is sent and method is normally post.
<input type="text">, type="email", type="number" and type="date" each hand a phone user a different on screen keyboard.
Every input needs a <label for="email"> whose for value matches the input's id, so tapping the words moves the cursor into the box.
<textarea> takes long answers and <select> offers a dropdown of fixed choices.
<button type="submit">Send</button> sends the form.
Adding required to an input makes the browser refuse to submit an empty field, with no code of your own.
Tip
Placeholder grey text is a hint, not a label, and it vanishes the moment someone types.
Group related fields such as address lines inside a <fieldset> with a <legend>.
Test any form by tabbing through it with the keyboard only and never touching the mouse.
Validate the Markup Before You Blame the CSS
The W3C Markup Validation Service at validator.w3.org reads your page and lists every unclosed tag, missing alt and duplicate id.
A duplicate id is a genuine bug, because CSS, JavaScript and label-for all assume an id appears once per page.
Fix errors from the top of the list down, since one unclosed tag usually generates a dozen knock-on complaints that disappear together.
Browser developer tools, opened with F12, show the structure the browser actually built, which exposes where it has silently patched your nesting.
A screenshot of the validator reporting zero errors is honest evidence of technical quality for Criterion C in your design folder.
Active recall
What is the difference between a tag, an element and an attribute?
Give one thing <article> lets a screen reader user do that a <div> cannot.
Why is skipping from <h2> straight to <h4> a problem?
When should an image have alt="" instead of a description?
Name two faults the W3C validator catches that a browser will hide from you.