Headings and paragraphs — Blank to Browser

1. Principle

HTML has six heading levels: <h1> through <h6>. Plus <p> for paragraphs. Together they are 90% of the text on most websites.

The crucial rule: headings communicate hierarchy, not size.

<h1> is the page's main topic. There should be exactly one per page.
<h2> is a top-level section.
<h3> is a subsection inside an <h2>.
<h4> … is a sub-sub-section. Rarely needed.

If you use <h1> because you want big text, or <h3> because you want medium text, you are wrong. Use the level that matches the meaning, then make it any size with CSS later.

2. Do (you try)

Replace the <body> of your index.html with this:

htmlindex.html — body only

<body>
<h1>Your Name</h1>
<p>One sentence about who you are.</p>

<h2>About</h2>
<p>A short paragraph (2–3 sentences) introducing yourself.</p>

<h2>Projects</h2>
<p>This section will hold your projects. We'll fill it in unit 1.5.</p>

<h2>Contact</h2>
<p>How people can reach you.</p>
</body>

Replace the placeholder text with your real words. Don't worry about quality — you can edit them later.

Save and refresh.

3. Verify (how you know)

Visual check: Your page should now show a clear visual hierarchy — your name biggest, "About", "Projects", "Contact" smaller-but-bold, and paragraphs in normal size.

Outline check: Right-click anywhere on the page → Inspect. The DevTools panel opens. In the Elements tab, find the <body> and click the arrow to expand it. You should see:

<body>
  <h1>...</h1>
  <p>...</p>
  <h2>About</h2>
  <p>...</p>
  <h2>Projects</h2>
  <p>...</p>
  <h2>Contact</h2>
  <p>...</p>
</body>

Outline test: Read just the headings. They should be Your Name → About → Projects → Contact. That's a sensible outline for a portfolio. ✓

4. Reference

Locked. Try it yourself first.