Log inStart free

Lesson 2 of 13 · 8 min · 2 hands-on steps

Text, Links & Images

Headings, paragraphs, bold text, links to other pages, and images with alt text.

Text elements

<h1>Main title (one per page)</h1>
<h2>Section heading</h2>
<h3>Sub-section</h3>
<p>A paragraph with <strong>important</strong> and <em>emphasized</em> words.</p>
<br />  <!-- a line break -->
<hr />  <!-- a horizontal divider -->

Headings go in order (h1 → h2 → h3) like an outline. Screen readers and Google use them to understand your page.

Links

<a href="https://wikipedia.org">Visit Wikipedia</a>
<a href="/about">About us</a>          <!-- a page on the same site -->
<a href="#contact">Jump to contact</a> <!-- a spot on the same page -->

Write link text that makes sense on its own: "Read the docs" beats "click here".

Images

<img src="photo.jpg" alt="Two friends laughing at a café" width="300" />
  • src: where the image file is
  • alt: a description for people who can't see it (and for Google). Describe what matters in the image.

Try it

Use the Playground → HTML / CSS / JS tab to experiment freely. Every change shows instantly in the preview. Then do the practice steps below.

🧪 Practice: 2 steps

0 / 2 done

Step 1 of 2 · A heading hierarchy

Create an <h1> that says My Recipes, an <h2> that says Pancakes, and a <p> underneath with any description that contains a bold word (use <strong>).

Loading editor…

Output appears here. Press Run or Ctrl/⌘ + Enter.

✅ Check your understanding

  1. Why does every image need alt text?

  2. How many h1 headings should a page usually have?

Create a free account to track your progress.