Headings, Paragraphs, Links and Images That Mean Something

Use h1 to h6, paragraphs, links and images so the page makes sense to readers and to search engines. After this, your text has structure instead of one long block.

5 min HTML and CSS Web Development Testing and Debugging Beginner

Skip ahead: If you already use one h1, real paragraphs, links with clear hrefs and images with useful alt text, skip to "Common mistakes", then continue.

Text on a page needs structure. Headings outline the page. Paragraphs hold the prose. Links take people somewhere. Images need a text alternative. Get these four right and most beginner pages suddenly look intentional.

Headings are an outline, not a font size

Use <h1> to <h6> for rank, then style them with CSS if you want a different size.

<h1>Warehouse picking guide</h1>
<h2>Before you start</h2>
<p>Charge the scanner and check the tote labels.</p>
<h2>While you pick</h2>
<p>Scan every unit. Do not skip damaged stock.</p>

Rules:

One <h1> per page for the main title in normal content pages.
Don't skip levels just to get a look (h1 then h4). Use the next level down, then CSS.
Don't use headings only because they are bold. Use <p> plus CSS for styled body text.

Paragraphs and line breaks

<p>Orders over ₱1,000 ship free inside Metro Manila.</p>
<p>Provincial orders use the rates on the shipping page.</p>

Use <br> for a deliberate line break inside the same thought (a postal address), not to separate paragraphs. Empty paragraphs for spacing are a CSS job (margin), not extra <p></p> tags.

Links that go where you meant

<a href="shipping.html">Shipping rates</a>
<a href="https://xtensyon.com/contact">Contact Xtensyon</a>
<a href="mailto:support@example.com">Email support</a>

Relative links (shipping.html, ../index.html) stay inside your site folder structure.
Absolute links (https://...) point at a full URL.
target="_blank" opens a new tab. If you use it, add rel="noopener noreferrer" so the new page cannot touch your window.

<a href="https://example.com/policy" target="_blank" rel="noopener noreferrer">Policy (opens in a new tab)</a>

Link text should make sense alone. "Click here" fails that test. "Shipping rates" passes.

Images with alt that helps

<img src="images/tote-label.png" alt="Yellow tote label showing aisle B and bin 14" width="640" height="400">

src is the path to the file.
alt describes the image for people who cannot see it, and for when the file fails to load.
Decorative images that add no information use alt="".
Width and height (or CSS) reserve space so the layout does not jump when the image loads.

⚠ Warning: Don't write alt like "image" or "picture of product". Say what a person would need to know if the picture were gone. If the image is a screenshot of an error, put the important words of that error in the alt.

Putting them together

<h1>Store opening</h1>
<p>We open the new branch on Monday.</p>
<p><a href="map.html">See the map and parking notes</a>.</p>
<img src="images/storefront.jpg" alt="Storefront on Rizal Avenue with the opening banner" width="800" height="450">

Common mistakes

Using an image of text instead of real text for a heading. Search engines and screen readers get less, and you cannot select the words.
Broken relative paths. src="photo.jpg" looks in the same folder as the HTML file. If the photo is in images/, write src="images/photo.jpg".
Huge uncompressed photos. A 5 MB phone photo will make a simple page feel broken on slow connections. Resize before you publish.

💡 Tip: After you add an image, temporarily rename the file and reload. Confirm the alt text appears (or the broken-image icon with alt). Then rename it back.

What happens if you skip this

A page of plain text with no headings is hard to scan. A page of headings with no paragraphs is hard to trust. Links and images without care become the first things users blame when they get lost.

Take your first page. Add an h2, a second paragraph, one link to # for now, and one image (any local PNG). Does the outline still make sense if you read only the headings?

About