Appearance
C1 · HTML Fundamentals
Spec reference: Learning Aim C - Develop a Website to Meet Client Requirements Key idea: HTML provides the structure and content of every web page.
HTML Full Course - Build a Website (freeCodeCamp)
Basic HTML document structure
Every HTML page follows the same skeleton:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sweet Delights - artisan bakery in Leicester">
<title>Sweet Delights Bakery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<h1>Welcome to Sweet Delights</h1>
<p>Leicester's favourite artisan bakery.</p>
</main>
<footer>
<p>© 2025 Sweet Delights</p>
</footer>
<script src="script.js"></script>
</body>
</html>| Section | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser this is HTML5 |
<html lang="en"> | Root element; lang helps screen readers |
<head> | Metadata - not visible on page; includes title, CSS links, meta tags |
<body> | Everything visible on the page |
<header> | Top of page - typically logo and navigation |
<main> | Primary content of the page |
<footer> | Bottom of page - copyright, links |
Semantic HTML
Semantic HTML uses tags that describe the meaning of content, not just its appearance. This improves accessibility and SEO.
| Semantic tag | Meaning |
|---|---|
<header> | Page or section header |
<nav> | Navigation links |
<main> | Main content of the page |
<section> | A themed grouping of content |
<article> | Self-contained content (blog post, news article) |
<aside> | Side content (sidebar, related links) |
<footer> | Footer of page or section |
<figure> + <figcaption> | Image with caption |
Using <div> for everything is non-semantic - use the correct tag for each purpose.
Essential HTML tags
Headings
html
<h1>Main page title</h1> <!-- Only one per page -->
<h2>Section heading</h2>
<h3>Subsection heading</h3>
<!-- h4, h5, h6 also available -->Text content
html
<p>A paragraph of text.</p>
<strong>Bold/important text</strong>
<em>Italic/emphasised text</em>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule (divider line) -->Lists
html
<!-- Unordered list (bullet points) -->
<ul>
<li>Artisan breads</li>
<li>Cakes</li>
<li>Cookies</li>
</ul>
<!-- Ordered list (numbered) -->
<ol>
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 25 minutes</li>
</ol>Links
html
<!-- Internal link (to another page on your site) -->
<a href="contact.html">Contact us</a>
<!-- External link (opens in new tab) -->
<a href="https://google.com" target="_blank" rel="noopener">Visit Google</a>
<!-- Link to a section on the same page -->
<a href="#about">About us</a>
<section id="about">...</section>Images
html
<img src="images/cake.jpg"
alt="A three-tier chocolate cake with cream frosting"
width="800"
height="600">Always include alt text
The alt attribute describes the image for screen readers and displays if the image fails to load. It is essential for accessibility and SEO. Never leave it empty on meaningful images.
Tables
html
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sourdough Loaf</td>
<td>£4.50</td>
</tr>
<tr>
<td>Chocolate Cake (slice)</td>
<td>£3.00</td>
</tr>
</tbody>
</table>Forms
html
<form action="submit.php" method="POST">
<label for="name">Your name:</label>
<input type="text" id="name" name="name" required placeholder="e.g. Alice Smith">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">Send Message</button>
</form>| Input type | Use case |
|---|---|
type="text" | Short text - names, usernames |
type="email" | Email address (auto-validated) |
type="password" | Password (characters hidden) |
type="number" | Numeric input |
type="tel" | Phone number |
type="checkbox" | Multiple choice options |
type="radio" | Single choice from a group |
type="date" | Date picker |
type="submit" | Form submission button |
Linking pages together
A website is multiple HTML files linked together. Your folder structure should be organised:
sweetdelights/
├── index.html ← Homepage (always named index.html)
├── products.html
├── blog.html
├── contact.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
├── banner.jpg
└── cake.jpgTIP
Always name your homepage index.html. Web servers automatically serve this file when someone visits your domain.
HTML validation
Write valid HTML - use the W3C Validator (validator.w3.org) to check:
- All tags are properly opened and closed
- Required attributes are present (e.g.
alton images) - Nesting is correct (no
<p>inside<span>) DOCTYPEis declared
Invalid HTML can cause unexpected rendering across different browsers.
Summary
| Term | Meaning |
|---|---|
| HTML | HyperText Markup Language - defines the structure of web pages |
| Tag | An HTML element like <h1>, <p>, <img> |
| Semantic HTML | Tags that describe meaning (e.g. <nav>, <article>) rather than just appearance |
| Alt text | Description of an image for screen readers and when images fail to load |
<head> | Contains metadata - not visible on the page |
<body> | Contains all visible page content |
| W3C Validator | Tool that checks HTML code for errors and standards compliance |
Test Yourself
Question 1 of 5
What is the purpose of the <head> section in an HTML document?