Text, Links, and Images

Table of Contents

1. Headings
2. Paragraphs and Line Breaks
3. Emphasis: strong and em
4. Lists
5. Links
6. Images
7. Block and Inline Elements
8. Khmer and Other Languages
9. Try It Yourself

1. Headings

HTML has six heading levels, <h1> to <h6>. They are not a font size menu — they're a document outline, like the headings in a textbook. Screen readers let users jump from heading to heading, and search engines use them to understand what a page is about.

<h1>Dara Sok</h1>
<h2>About me</h2>
<h2>Projects</h2>
<h3>Recipe finder</h3>
<h3>Study timer</h3>

Rules of thumb:

• One <h1> per page, naming what the page is about.
• Go down one level at a time: h1 → h2 → h3. Don't jump from h2 to h5 because you like how it looks.
• If a heading is too big or too small, fix it with CSS. Never choose a heading level for its size.

2. Paragraphs and Line Breaks

Text goes in <p> elements. Each paragraph starts on a new line with space around it:

<p>I'm a junior web developer from Phnom Penh.</p>
<p>I'm learning HTML, CSS, and JavaScript.</p>

Remember from the last chapter that extra spaces and line breaks in your source collapse into one. To force a line break inside a paragraph, such as in an address or a poem, use <br>:

<p>
  Dara Sok<br>
  Phnom Penh, Cambodia
</p>

Don't use <br> to add space between paragraphs — that's what CSS margins are for. And <hr> draws a horizontal rule, used to mark a topic change.

3. Emphasis: strong and em

Two elements add meaning to words:

<p><strong>Warning:</strong> this step <em>cannot</em> be undone.</p>

You may know <b> and <i>. They still exist for text that's only styled differently (a product name, a foreign term) with no added meaning. When in doubt, ask: "does this change the meaning of the sentence?" If yes, strong or em. If it's only looks, use CSS.

A few other inline elements are worth knowing: <code> for code, <kbd> for keys, <mark> for highlighted text, <abbr title="…"> for abbreviations, and <time datetime="2026-10-02"> for dates.

4. Lists

HTML has three kinds of list. Each item is an <li>, and the wrapper decides what kind of list it is.

Unordered — a bulleted list where order doesn't matter:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered — a numbered list where order matters, like steps:

<ol>
  <li>Open the folder</li>
  <li>Edit index.html</li>
  <li>Save and refresh</li>
</ol>

Description list — terms and their definitions:

<dl>
  <dt>HTML</dt>
  <dd>The structure of a page</dd>
  <dt>CSS</dt>
  <dd>The look of a page</dd>
</dl>

Lists can be nested: put a whole <ul> inside an <li>, not between two of them. Lists get used for much more than bullets — a navigation menu is, semantically, a list of links, which we'll use in the next chapter.

5. Links

The link is what makes HTML hypertext. The <a> ("anchor") element turns its content into something clickable, and href says where it goes:

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

The href can be any of the URL types from URLs, Piece by Piece:

To try a relative link, create a second file, about.html, with its own skeleton, and link between the two pages:

<!-- in index.html -->
<a href="about.html">About</a>

<!-- in about.html -->
<a href="index.html">Home</a>

Two more things to know:

• Link text should make sense on its own. "Read my CV" is good; "click here" is not. Screen-reader users often browse a list of all links on a page, so "click here, click here, click here" is useless.
• target="_blank" opens a link in a new tab. Use it sparingly, and pair it with rel="noopener" for external sites. Let people decide for themselves where a link opens.

6. Images

The <img> element is void (no closing tag) and needs two attributes:

<img src="images/dara.jpg" alt="Dara Sok smiling at a laptop">

• src is the file's URL — relative or absolute. Put photos in an images/ folder to keep things tidy.
• alt is a text description. It's read aloud by screen readers, shown when the image fails to load, and used by search engines. Write what the image shows or means, not "image of…". If an image is purely decoration, use an empty alt="" so assistive tools skip it. Never omit the attribute.

Two more attributes are worth adding to real images:

<img src="images/dara.jpg" alt="Dara Sok smiling at a laptop"
     width="800" height="600" loading="lazy">

width and height (in pixels, matching the file's real size) let the browser reserve space before the image loads, so the page doesn't jump around. loading="lazy" delays images that are off-screen until the user scrolls near them — but leave it off the first image visible on screen.

Before adding photos, make them web-sized. A phone photo can be 5 MB, which is slow to download for nothing. Aim for about 1600 px wide and under 300 KB, in JPEG for photos and PNG, SVG, or WebP for graphics.

7. Block and Inline Elements

You've now met two behaviors:

• Block elements (<h1>, <p>, <ul>, <li>) start on a new line and take the full width available.
• Inline elements (<a>, <strong>, <em>, <img>) sit inside a line of text and are only as wide as their content.

<p>This paragraph is a block. It contains an <a href="#">inline link</a>
and some <strong>inline bold text</strong>.</p>

The rule for nesting: inline elements go inside block elements, not the other way around. Chapter 7 explains the CSS behind this, and how to change an element from one kind to the other.

8. Khmer and Other Languages

Everything in this chapter works the same in Khmer. Save the file as UTF-8 (the VS Code default), keep <meta charset="utf-8"> in the head, and type:

<html lang="km">
  <head>
    <meta charset="utf-8">
    <title>ដារ៉ា សុខ</title>
  </head>
  <body>
    <h1>សួស្តី ខ្ញុំជា ដារ៉ា</h1>
    <p>ខ្ញុំកំពុងរៀនសរសេរគេហទំព័រ។</p>
  </body>
</html>

If a page mixes English and Khmer, set lang on the <html> for the main language and on individual elements for the other one. This helps screen readers and gets the right fonts picked. Chapter 8 returns to Khmer fonts.

9. Try It Yourself

Build out your profile page:

1. Write the content. In index.html, add an <h1> with your name, a short paragraph, an <h2>Skills</h2> with a <ul>, and an <h2>How I got here</h2> with an <ol> of three steps.
2. Add a second page. Create about.html, copy the skeleton from chapter 2, and link the two pages to each other.
3. Add a photo. Put a resized image in images/, add it to the page with good alt text and width/height. Try breaking the src on purpose — what do you see, and what does the alt do?
4. Check the outline. Use a browser extension such as HeadingsMap, or in DevTools search the Elements panel for h2. Does your heading order go down one level at a time?
5. Fragment link. Give your "Skills" heading id="skills" and add a link <a href="#skills">Jump to skills</a> at the top. Click it and watch the address bar.

Commit your work. Next, we'll give the page a proper skeleton with semantic elements, and look at why meaning in HTML matters for accessibility.