Essential HTML

Headings and paragraphs

Use one <h1> per page for the main title, then smaller headings for sections.

<h1>My Portfolio</h1>
<h2>About Me</h2>
<p>I enjoy building small web pages and learning CSS.</p>

Lists for tidy detail

<h3>Favourite subjects</h3>
<ul>
  <li>Digital Technologies</li>
  <li>Art</li>
  <li>Science</li>
</ul>

<h3>Assessment steps</h3>
<ol>
  <li>Plan your pages</li>
  <li>Write the HTML</li>
  <li>Add CSS</li>
</ol>

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="gallery.html">Gallery</a>
</nav>

Keep link text clear (e.g. “About” instead of “Click here”).
For a horizontal menu with Tailwind utilities you can add: class="flex gap-4" to <nav>.

Images with alt text

<img src="images/sunset.jpg" alt="Orange sunset over the ocean" width="320" />

Use short, accurate alt text so screen readers describe the image.
Store images in an images/ folder to keep paths simple.

Page sections

<header>
  <h1>Coastal Walks</h1>
  <p>Discover local trails.</p>
</header>
<main>
  <section>
    <h2>Top picks</h2>
    <p>Start with the clifftop loop.</p>
  </section>
</main>
<footer>
  <p>© 2025 Coastal Walks</p>
</footer>

Linking multiple pages

Save each page as its own .html file in the same folder.
Link between them with relative paths:

<a href="about.html">About</a>
<a href="contact.html">Contact</a>

If pages are in a subfolder (e.g. pages/about.html), link with href="pages/about.html".