Learn how the web works and build, style and publish your own responsive website with semantic HTML and modern CSS.

HTML & CSS Foundations

## Why this matters

A handful of elements make up most of the content on the web: headings, paragraphs, lists, links and images. Using them correctly gives your page a clear outline that people can skim, screen readers can navigate and search engines can understand. Attributes add the extra information those elements need to work, such as where a link goes or what an image shows.

## Attributes in one minute

An attribute lives inside the opening tag as `name="value"`:

```html
<a href="https://developer.mozilla.org/" title="MDN Web Docs">MDN</a>
```

- Always quote values. Double quotes are the convention.
- Some attributes work on any element: `id` (a unique name on the page), `class` (a reusable label for CSS) and `lang`.
- Others belong to specific elements: `href` on links, `src` and `alt` on images.
- Boolean attributes are true when present: `<input required>`.

## Headings: the outline of the page

HTML has six heading levels, `<h1>` to `<h6>`. Think of them as a table of contents:

```html
<h1>Learn to Cook</h1>
  <h2>Breakfast</h2>
    <h3>Pancakes</h3>
    <h3>Omelettes</h3>
  <h2>Dinner</h2>
```

- Use **one `<h1>`** per page for its main topic.
- Go down one level at a time. Do not jump from `<h2>` to `<h4>` because `<h4>` looks the right size.
- Screen reader users often jump from heading to heading to skim a page, so the outline really is navigation.

## Paragraphs and inline text

Wrap running text in `<p>`. Inside text, `<strong>` marks strong importance and `<em>` marks stress emphasis. Both carry meaning; if you only want a visual effect, use CSS instead. Blank lines and extra spaces in your source are collapsed into a single space, so use separate `<p>` elements, not line breaks, for separate paragraphs.

## Lists

- `<ul>` is an **unordered** list, where order does not matter (ingredients, features).
- `<ol>` is an **ordered** list, where order does matter (steps, rankings).
- Each item is an `<li>`, and `<li>` must be a direct child of `<ul>` or `<ol>`.

```html
<ol>
  <li>Preheat the oven.</li>
  <li>Mix the batter.</li>
  <li>Bake for 20 minutes.</li>
</ol>
```

Navigation menus are usually a `<ul>` of links, because a menu is a list of choices.

## Links

The anchor element `<a>` with an `href` makes a link:

```html
<a href="https://www.w3.org/">The W3C</a>          
<a href="about.html">About me</a>                   
<a href="#contact">Jump to contact</a>              
<a href="mailto:hello@example.com">Email me</a>     
```

The text inside the link should make sense on its own. Screen reader users can list every link on a page, and a list of ten "click here" links tells them nothing. Write "Download the course syllabus", not "click here".

## Images

```html
<img src="images/team.jpg" alt="Five club members at the finish line, arms raised" width="800" height="533">
```

- `src` is the image's URL, relative or absolute.
- `alt` is the text alternative, read aloud by screen readers and shown if the image fails to load. Describe what matters about the image in context. For a purely decorative image, use an **empty** `alt=""` so screen readers skip it; never leave `alt` out altogether.
- `width` and `height` (in pixels, without units) let the browser reserve space before the image loads, so the text does not jump around.

## Worked example: from a wall of text to structure

Before:

```html
<div>Opening hours</div>
Monday to Friday 9 to 5. Saturday 10 to 2. Closed Sunday.
```

After:

```html
<h2>Opening hours</h2>
<ul>
  <li>Monday to Friday: 9am to 5pm</li>
  <li>Saturday: 10am to 2pm</li>
  <li>Sunday: closed</li>
</ul>
```

The second version looks better even with no CSS, a screen reader announces "heading level 2" and "list, 3 items", and you now have elements you can style precisely.

## Common mistakes

- **Using `<div>` for everything.** A `<div>` has no meaning. Reach for a meaningful element first.
- **Skipping heading levels** or using several `<h1>` elements for visual size.
- **Missing or useless `alt` text**, like `alt="image"` or `alt="photo.jpg"`.
- **Vague link text** such as "here", "more" or "link".
- **Putting `<li>` outside a list**, or a `<p>` inside another `<p>` (paragraphs cannot nest).

## Quick recap

- Attributes are `name="value"` pairs in the opening tag.
- One `<h1>`, then `<h2>`, `<h3>` in order: the headings are the page outline.
- `<ul>` when order does not matter, `<ol>` when it does, `<li>` for each item.
- Links need an `href` and descriptive text; images need `src`, meaningful `alt`, and ideally `width` and `height`.

## Try it

Open the **Do** tab and turn a page made of loose text and `<div>` elements into a structured page with headings, a list, a link and an accessible image.

Use headings, paragraphs, lists, links and images correctly, with the attributes each one needs.

Tags and attributes

The only tags you need when first learning HTML

HTML - Attributes - W3Schools.com

## Why this matters

Accessibility means people can use your site whatever their abilities or devices: someone who is blind and uses a screen reader, someone who cannot use a mouse and navigates by keyboard, someone with low vision zoomed to 300%, or someone on a cracked phone in bright sunlight. Around one in six people worldwide lives with a significant disability, according to the World Health Organization. In many countries, accessibility is also a legal requirement for public and commercial sites, and the shared technical standard is the **Web Content Accessibility Guidelines (WCAG)**.

The best news for a beginner: most accessibility comes free with correct HTML. It is far cheaper to write it right the first time than to fix it later.

## How assistive technology reads your page

A screen reader does not see your layout. It reads the **accessibility tree**, which the browser builds from your HTML. Every element contributes a **role** (heading, link, button, list), a **name** (the link text, the alt text, the label) and sometimes a **state** (checked, expanded). If you use a `<div>` where a `<button>` belongs, the tree just says "text", and the user has no way to know it can be pressed.

## Four habits that cover most problems

### 1. Text alternatives for images

Every `<img>` needs an `alt` attribute: meaningful text for informative images, `alt=""` for decorative ones (covered in the previous lesson).

### 2. Labels for every form control

Placeholder text is not a label: it disappears as soon as you type and is often low-contrast. Connect a visible `<label>` to its control with `for` and `id`:

```html
<label for="email">Email address</label>
<input type="email" id="email" name="email">
```

Now a screen reader announces "Email address, edit text", and clicking the label focuses the input, which gives everyone a bigger target. You can also wrap the input inside the label: `<label>Email <input type="email"></label>`.

### 3. Real buttons and links

```html

<div class="btn" onclick="save()">Save</div>


<button type="button" onclick="save()">Save</button>
```

The rule of thumb: if it **goes somewhere**, use `<a href>`. If it **does something** on this page, use `<button>`. Both work with the keyboard out of the box, and you can style them to look however you like.

### 4. Landmarks

Landmark elements describe the regions of a page. Screen reader users can jump straight to them, like skipping to a chapter.

| Element | Landmark | Use for |
|---|---|---|
| `<header>` | banner (when not inside another section) | site logo, title, top navigation |
| `<nav>` | navigation | a group of major navigation links |
| `<main>` | main | the page's primary content; exactly one per page |
| `<aside>` | complementary | related but secondary content |
| `<footer>` | contentinfo (when not inside another section) | copyright, contact, secondary links |

Within `<main>`, use `<section>` (with a heading) for thematic groups and `<article>` for self-contained pieces such as a blog post. If a page has more than one `<nav>`, give each an `aria-label` ("Main", "Footer") so users can tell them apart.

## Language, titles and the keyboard

- `<html lang="en">` makes screen readers use the right pronunciation.
- A unique, descriptive `<title>` is the first thing announced when a page opens.
- Try your page with **only the keyboard**: Tab moves forward, Shift+Tab moves back, Enter activates links and buttons, Space toggles checkboxes and presses buttons. You should always see where focus is, and you should be able to reach everything you can click.

## A word about ARIA

ARIA attributes (`role`, `aria-label`, `aria-expanded` and others) add accessibility information when HTML has no suitable element. The first rule of ARIA, from the W3C, is: if a native HTML element does the job, use it instead. A `<button>` beats `<div role="button" tabindex="0">` plus keyboard handlers every time. Use ARIA sparingly and for specific needs, such as labelling two `<nav>` elements.

## Worked example: testing your own page

1. Open your page and press Tab repeatedly. Note anything you cannot reach or cannot see focus on.
2. Open developer tools, select an element, and open the **Accessibility** pane (Chrome and Edge) or the **Accessibility** tab (Firefox) to see its role and name.
3. Run **Lighthouse** (Chrome developer tools) with the Accessibility category, or the free WAVE checker from WebAIM. They catch missing alt text, unlabelled inputs and low contrast.
4. Turn on a real screen reader for a few minutes: VoiceOver on macOS and iOS, Narrator on Windows, TalkBack on Android, or the free NVDA on Windows.

Automated tools find only part of the problems. A quick keyboard test finds many of the rest.

## Common mistakes

- **Placeholder instead of a label.**
- **Clickable `<div>` or `<span>` elements** instead of buttons and links.
- **Removing the focus outline** (`outline: none`) without adding a visible replacement.
- **Several `<main>` elements**, or none.
- **Information by colour alone**, such as "required fields are red". Add text or an icon too.

## Quick recap

- Correct HTML gives assistive technology the roles and names it needs.
- Alt text on images, a `<label>` on every control, `<button>` for actions and `<a href>` for navigation.
- Landmarks: `<header>`, `<nav>`, one `<main>`, `<footer>`.
- Test with the keyboard and an automated checker; prefer native HTML over ARIA.

## Try it

Open the **Do** tab and repair a library home page built from `<div>` elements, placeholders and a fake button.

Add alt text, form labels, real buttons and landmarks so everyone can use your page.

Accessibility from day one

HTML & CSS for Absolute Beginners: Semantic HTML

Quick accessibility wins that are easy to implement

## Why this matters

A personal homepage is the first project in almost every front-end portfolio, and for good reason: it uses everything you have learned so far, it is small enough to finish, and you will keep improving it for the rest of the course. In Module 3 you will style it, in Module 4 you will make it responsive, and in the final lesson you will publish it.

This lesson is HTML only. Resist the urge to style anything yet. A page with clean structure is easy to style; a page built to look right is hard to fix.

## Step 1: plan the content first

Before writing any tags, write the content in plain text. A good first homepage has:

- your name and a one-line description of what you do or are learning;
- an **About** section: two or three sentences about you;
- a **Projects** section: two or three things you have built or are building (course exercises count);
- a **Contact** section: how to reach you.

Be careful with personal information on a public page. An email address created for your portfolio and a link to a professional profile are fine; your home address and phone number are not needed.

## Step 2: sketch the structure

Map the content onto landmarks and headings:

```text
header
  site name
  nav: About | Projects | Contact
main
  h1: Hi, I'm Sam Rivera
  section#about     h2 About me
  section#projects  h2 Projects
    article  h3 Recipe card
    article  h3 Library home page
  section#contact   h2 Contact
footer
  copyright line
```

Each `<section>` gets an `id` and a heading. Each project is an `<article>`, because it would make sense on its own.

## Step 3: in-page navigation with fragments

A link whose `href` starts with `#` jumps to the element with that `id` on the same page:

```html
<nav aria-label="Main">
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section id="about">
  <h2>About me</h2>
  <p>...</p>
</section>
```

- An `id` must be unique on the page, and the match is case-sensitive: `#About` will not find `id="about"`.
- The nav is a list of links because it is a list of choices.
- Clicking the link also moves keyboard focus position to that section, which helps keyboard users.

## Step 4: write the page

Here is the skeleton of the main content:

```html
<main>
  <h1>Hi, I'm Sam Rivera</h1>
  <p>I am learning front-end development and building small, accessible websites.</p>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <h3>Recipe card</h3>
      <p>A single recipe page with an ordered list of steps.</p>
    </article>
  </section>
</main>
```

Notice the heading levels: one `<h1>` for the page, `<h2>` for each section, `<h3>` for each project inside the projects section.

For the contact section, a `mailto:` link opens the visitor's email app:

```html
<p>Email me at <a href="mailto:sam@example.com">sam@example.com</a>.</p>
```

The footer is a good place for a copyright line. `&copy;` is an **HTML entity** that displays the copyright symbol; other useful entities are `&amp;` (&), `&lt;` (<) and `&gt;` (>), which you need when you want to show those characters as text.

## Step 5: check your work

1. **Read it with no CSS.** Does the page still make sense from top to bottom? It should.
2. **Click every nav link.** Each should jump to its section.
3. **Tab through the page.** You should reach every link in a sensible order.
4. **Validate** at validator.w3.org (paste your code with "Validate by Direct Input").
5. **Check the outline.** In the validator, the "Outline" option lists your headings; they should read like a table of contents.

## Common mistakes

- **Mismatched ids and hrefs**, such as `href="#project"` with `id="projects"`.
- **Duplicate ids**, which make links and CSS unpredictable.
- **Sections without headings.** If a group of content has no natural heading, it probably should be a `<div>`, not a `<section>`.
- **Using `<br>` for spacing.** Spacing is CSS's job, which comes next module.
- **Putting the `<nav>` outside the `<header>` without reason.** Both are valid, but keep the main navigation in one obvious place.

## Quick recap

- Plan the content, sketch the structure, then write the tags.
- Landmarks (`header`, `nav`, `main`, `footer`) plus sections with ids and headings.
- In-page links use `href="#id"` and need an exact id match.
- Check with no CSS, the keyboard and the validator.

## Try it

Open the **Do** tab and build your homepage. Use your own name and projects if you like; the checks only look at the structure.


Plan and build a one-page personal site with a header, navigation and sections, in semantic HTML only.

Build a personal homepage

Build a Personal Website with HTML & CSS (Beginner Crash Course)

## Why this matters

Forms are how people talk back to a website: sign-ups, searches, checkouts, contact messages, surveys. A badly built form loses customers and locks out keyboard and screen reader users. A well-built one does a lot of work for free: the right keyboard appears on phones, the browser fills in known details, and simple mistakes are caught before anything is sent.

## The form element

```html
<form action="/subscribe" method="post">
  ...controls...
  <button type="submit">Subscribe</button>
</form>
```

- `action` is the URL the data is sent to. On a static site without a server you will often use a third-party form service, or handle the data with JavaScript later.
- `method` is `get` (data goes in the URL query, good for searches) or `post` (data goes in the request body, right for anything that creates or changes something).
- Each control's `name` attribute becomes the key in the submitted data: `email=sam%40example.com`. A control without a `name` is not submitted at all.

## Labels, always

Every control needs a label, exactly as in the accessibility lesson:

```html
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email">
```

The `autocomplete` attribute tells the browser what the field is (`name`, `email`, `tel`, `street-address`, `new-password` and more) so it can offer to fill it in.

## Pick the right input type

| Type | Gives you |
|---|---|
| `text` | a plain single-line field |
| `email` | an email keyboard on phones, and format checking |
| `password` | hidden characters |
| `tel` | a phone keypad (no format checking, because phone formats vary) |
| `number` | a numeric field with `min`, `max` and `step` |
| `url` | URL keyboard and format checking |
| `date` | a date picker |
| `checkbox` | an on/off choice |
| `radio` | one choice out of a group |

For longer text, use `<textarea>`. For a choice from a long list, use `<select>` with `<option>` elements.

## Groups: fieldset and legend

Radio buttons that belong together share a `name`, and the group gets a `<fieldset>` with a `<legend>` that acts as the group's label:

```html
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" checked> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>
```

A screen reader announces "Preferred contact method, group" and then "Email, radio button, 1 of 2". Here each input is wrapped inside its label, which connects them without needing `for` and `id`.

## Built-in validation

HTML can check many rules before the form is sent, with no JavaScript:

```html
<input type="email" name="email" required>
<input type="number" name="age" min="13" max="120">
<textarea name="message" minlength="20" maxlength="500" required></textarea>
<input type="text" name="postcode" pattern="[0-9]{5}" title="Five digits">
```

- `required`: the field must not be empty.
- `minlength` / `maxlength`: limits on text length.
- `min` / `max` / `step`: limits on numbers and dates.
- `pattern`: a regular expression the value must match.

If a rule fails, the browser blocks the submission and shows a message next to the first invalid field. CSS can style invalid fields with the `:invalid` and `:user-invalid` pseudo-classes.

**Important:** browser validation helps the honest user. It is not security. Anyone can bypass it, so the server must always check the data again.

## Buttons

`<button type="submit">` sends the form; `<button type="button">` does nothing by default (for JavaScript actions). A `<button>` inside a form with no `type` is a submit button, which surprises people, so always write the type. The button text should say what happens: "Create account", not "Submit".

## Worked example: a newsletter sign-up

```html
<form action="/subscribe" method="post">
  <p>
    <label for="nl-email">Email address</label>
    <input type="email" id="nl-email" name="email" autocomplete="email" required>
  </p>
  <p>
    <label>
      <input type="checkbox" name="weekly" value="yes">
      Send me the weekly digest
    </label>
  </p>
  <button type="submit">Subscribe</button>
</form>
```

Try submitting it empty: the browser stops you and points at the email field. Type `sam@` and try again: it explains the format problem. You wrote no JavaScript.

## Common mistakes

- **Placeholders as labels.**
- **Forgetting `name`**, so the value is never sent.
- **Radio buttons with different names**, which lets the user select all of them.
- **Using `type="text"` for everything**, losing phone keyboards and free checks.
- **Trusting client-side validation** as if it were security.

## Quick recap

- `<form>` with `action`, `method`; each control needs a `name` and a label.
- Choose input types that match the data; group radios with `<fieldset>` and `<legend>`.
- `required`, `minlength`, `min`, `max` and `pattern` give free validation; the server still checks.
- Always set the button `type` and write clear button text.

## Try it

Open the **Do** tab and rebuild a club sign-up form that currently relies on placeholders and fake buttons.


Build a labelled, accessible form with the right input types and built-in validation.

Forms and inputs

Learn HTML Forms In 25 Minutes

Headings, lists, links, images, landmarks and labelled forms: structure a real, accessible page.