HTML Quick Reference
HTML describes the structure and meaning of a web document. This page is a reference for the markup used in course examples. Read unfamiliar sections as needed; there is no separate exercise or setup requirement here.
Part 2’s HTML & the DOM chapter takes the next step: how the browser parses a document and how application code interacts with the resulting tree. This reference stays with writing and reading markup.
For a first pass, focus on a small document, elements and attributes, headings and paragraphs, links and buttons, and forms and controls. Use the other sections when their elements or attributes appear in an example.
A small document
A complete HTML document can be saved as example.html and opened in a browser. This example is independent of the course project:
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Study room guide</title> </head> <body> <main> <h1>Study room guide</h1> <p>Find a quiet place to work.</p> </main> </body></html>The document type declaration selects the normal modern HTML rendering mode. The html element contains the document; lang="en" identifies its language. The head contains metadata, including the title shown by the browser. The body contains the page content.
The viewport declaration supports layouts that adapt to a mobile device’s viewport. It does not make the page responsive by itself; layout is studied in Part 6.
A Svelte component is normally a fragment of a page, not a second complete document. In Part 1, client/src/app.html supplies the document shell around the Svelte application. Do not replace that framework template with this standalone example.
Elements, attributes, and nesting
An element often has a start tag, content, and an end tag:
<p>This room has <strong>six seats</strong>.</p>strong describes importance. It does not merely request bold text. A browser supplies a default presentation, and CSS can change that presentation.
Attributes provide information on the start tag:
<a href="/rooms" class="navigation-link">Browse rooms</a>Here, href gives the link destination and class supplies a reusable name that CSS or other code can select. Attribute values are quoted in these materials.
Close nested elements in the reverse order from opening them. Prefer clear, valid markup over relying on the browser to repair mistakes. For example, a paragraph should not be used as a wrapper for a heading or a list.
Some elements are void elements, with no contents and no end tag:
<img src="room.jpg" alt="A study table beside a window"><input type="text" name="query">The HTML syntax specification defines these rules. A slash on an HTML void element is not what makes it void.
Headings and paragraphs
Use headings to describe the organization of the content:
<h1>Study spaces</h1><p>Choose a space that fits your work.</p>
<h2>Quiet rooms</h2><p>These rooms are intended for individual work.</p>
<h2>Group rooms</h2><h3>Reservation rules</h3><p>Leave the room ready for the next group.</p>Select heading levels for structure, not font size. Use CSS to change appearance. A paragraph is a block of prose, not a general-purpose spacing tool; repeated line breaks are not a layout system.
For inline meaning, em marks emphasis and strong marks importance. code identifies code or a literal identifier. Use the element that matches the content rather than whichever default appearance seems convenient.
Links and buttons
A link navigates to a resource or location:
<a href="/rooms">All rooms</a><a href="#opening-hours">Opening hours on this page</a>The value #opening-hours refers to the element whose unique id is opening-hours. Classes and identifiers are explained below.
A button performs an action or submits a form:
<button type="button">Show filters</button>The first button is only markup: showing filters requires application behavior. In a form, choose the type deliberately. Use type="submit" to submit and type="button" for another action. Do not replace a native link or button with a clickable div merely to control its appearance.
Describe the destination or action in the visible text. “Room opening hours” is more useful than several unrelated links all named “Click here.”
Lists
An unordered list groups items without an essential order:
<ul> <li>Quiet work areas</li> <li>Group rooms</li> <li>Accessible workstations</li></ul>Use ol instead when sequence matters. List items can themselves contain another list; close the parent li after its nested list.
A description list relates terms and descriptions:
<dl> <dt>Capacity</dt> <dd>Six people</dd> <dt>Equipment</dt> <dd>Display and whiteboard</dd></dl>Images and alternatives
src identifies an image resource and alt supplies a text alternative appropriate to its purpose:
<img src="entrance.jpg" alt="Step-free entrance on the east side of the building">A purely decorative image can have alt="". Do not omit the attribute merely because an image is decorative. An image acting as a link or button needs an alternative that communicates that action, not just its appearance. Part 6 returns to these choices in an accessibility audit.
The filename in the example represents an image you would supply; the markup does not create that asset.
Semantic page regions
Elements such as header, nav, main, article, section, and footer describe page regions. For example:
<header> <p>Study space directory</p> <nav aria-label="Main navigation"> <a href="/rooms">Rooms</a> <a href="/help">Help</a> </nav></header>
<main> <h1>Room Cedar</h1> <section> <h2>Facilities</h2> <p>A display and a whiteboard are available.</p> </section></main>
<footer> <p>Maintained by the study space team.</p></footer>The aria-label gives the navigation region an accessible name. Part 6 explains when ARIA is needed and how it complements native HTML semantics.
Use div and span when a generic grouping is appropriate. They do not supply the meaning of a button, heading, or navigation region. Semantic markup gives both people and software more useful information than a page made entirely of anonymous containers. It is a starting point, not proof that an interface is accessible.
Classes and identifiers
An id identifies one element within a document. It can be a fragment-link target or connect a label to a form control. Keep IDs unique within the document.
A class can be shared by many elements, and an element can have several classes:
<p id="opening-hours" class="notice compact">Open until 18:00.</p>The words notice and compact do not style anything by themselves. CSS rules can use them. HTML describes the content; CSS controls its presentation.
Forms and controls
This form collects a search query using the browser’s built-in submission mechanism:
<form action="/search" method="get"> <label for="room-query">Room name</label> <input id="room-query" name="q" type="search"> <button type="submit">Search</button></form>action names the receiving URL and method chooses how the form is submitted. name="q" supplies the submitted field name; the id connects the control to its label. An ID alone does not name a submitted field. This example assumes an application provides /search; opening a standalone file does not create the endpoint.
The HTML forms specification describes form controls and submission. Part 4 teaches how forms connect to the course API.
Different controls fit different input:
<label for="topic">Topic</label><select id="topic" name="topic"> <option value="question">Question</option> <option value="problem">Problem report</option></select>
<label for="message">Message</label><textarea id="message" name="message" rows="4"></textarea>
<label> <input type="checkbox" name="reply" value="yes"> I would like a reply</label>Controls should be inside their intended form. An unchecked checkbox is normally absent from the submitted form data; it does not automatically submit the string false.
Use fieldset and legend to group related choices:
<fieldset> <legend>Preferred workspace</legend> <label><input type="radio" name="space" value="quiet"> Quiet</label> <label><input type="radio" name="space" value="group"> Group</label></fieldset>The shared radio-button name defines the group. A visible label is not replaced by placeholder text.
Browser checks and boolean attributes
HTML can request useful browser-side checks:
<label for="email">Reply address</label><input id="email" name="email" type="email" required>These checks improve interaction, but the server still has to validate incoming data. A client can send a request without using this form.
Boolean attributes are controlled by their presence. For example, disabled="false" still disables an HTML control. Remove the attribute to make it absent; do not treat its text as a JavaScript boolean.
Text that resembles markup
Use character references when literal text could be read as markup:
<p>Use <h1> for the main heading.</p><p>Tea & discussion</p>This is different from deciding whether untrusted content may be rendered as HTML. The course uses ordinary text rendering by default and studies injection and XSS in Part 5.
Where this reference leads
You now have a reference for reading the markup in the walking skeleton. Part 2 connects HTML to the DOM and framework rendering. Part 4 develops form interaction. Part 6, beginning with CSS and utility-first styling, turns the initial semantic habits into systematic layout and accessibility work.