003: Text and Content Elements

Learning outcomes

By the end of this lesson, you can mark up an article with meaningful headings, paragraphs, emphasis, importance, lists, thematic breaks, and line breaks; explain the limited block/inline mental model; and build a logical heading hierarchy independent of visual size.

Prerequisites and retrieval

Start from 002's valid index.html. Explain the difference between title and h1, then sketch its DOM tree. Remember that HTML describes meaning, not desired font size.

Terminology

Heading: Headings h1–h6 title their sections and communicate hierarchy. — Source: WHATWG: Sections and headings
Hierarchy: The nested parent/child relationship of topics expressed by descending heading ranks. — Source: WHATWG: Sections and headings
Paragraph: “The p element represents a paragraph.” — Source: WHATWG: The p element
Emphasis: “The em element represents stress emphasis of its contents.” — Source: WHATWG: The em element
Strong importance: “The strong element represents strong importance, seriousness, or urgency for its contents.” — Source: WHATWG: The strong element
Ordered list: “The ol element represents a list of items, where the items have been intentionally ordered.” — Source: WHATWG: The ol element
Unordered list: “The ul element represents a list of items, where the order of the items is not important.” — Source: WHATWG: The ul element
Thematic break: “The hr element represents a paragraph-level thematic break.” — Source: WHATWG: The hr element
Phrasing content: Text-level content that forms paragraphs; the category governing what may occur inside p. — Source: WHATWG: Content models
Line break (br): "The br element represents a line break." — Source: WHATWG: The br element
List item (li): "The li element represents a list item." — Source: WHATWG: The li element
Content model: "Content categories (flow, phrasing, heading) define what an element may contain." — Source: WHATWG: Content models
Bold (b) / Italic (i): "b — bring attention to text without extra importance; i — text in an alternate voice." — Source: WHATWG: Text-level semantics and MDN: b element

Mental model: outline first, sentences second

Imagine a textbook table of contents. The book title is level 1, chapters level 2, topics within chapters level 3. Heading levels communicate that organization. They are not “large, medium, and small text” controls; CSS will handle size.

Use one clear h1 for the page's main topic in beginner projects. HTML permits multiple h1 elements, and valid structures can justify them, but browsers and assistive technology do not reliably calculate an automatic outline that fixes careless levels. Choose explicit heading levels that produce a sensible flat outline. Do not select multiple h1s merely to obtain large text.

Under a heading, paragraphs state ideas and lists express relationships. Text-level elements annotate meaning inside that flow.

Elements and intended meaning

h1 through h6 are six heading ranks. Move from h1 to h2 for a subsection and to h3 for its subsection. Returning from h3 to h2 starts a peer section. Avoid skipping from h1 directly to h4; although not a syntax error, it usually signals a broken hierarchy.

p marks a paragraph. Do not use empty paragraphs for spacing; CSS supplies spacing later. A p cannot contain headings, lists, or another paragraph. Browsers may automatically close it when such content starts.

em adds stress emphasis. Compare “I asked you” with “I asked you.” strong indicates importance, seriousness, or urgency: “Applications close today.” They may appear together if both meanings apply. Do not choose them just for default italic or bold appearance; b and i also have legitimate but different semantic uses, outside today's outline.

Use ul when order can change without changing meaning, such as skills. Use ol for steps, rankings, or chronology. Direct children of these lists are li elements. An li may contain paragraphs or nested lists.

br creates a line break where the break is part of the content, such as lines of an address or poem. It is not a spacing tool. hr represents a thematic break between paragraph-level topics; it is not simply a decorative line.

“Block versus inline” is only a starter concept

Browsers usually display headings, paragraphs, and lists on new lines (“block-like”), while em and strong flow inside text (“inline-like”). This is useful for predicting default rendering, but modern HTML does not divide every element into semantic “block” and “inline” categories. HTML has content models, and CSS can change display. Never decide meaning from whether an element begins a new line.

Richer text-level semantics

HTML has more precise text elements than only strong and em. Use them when their meaning matches the content; do not use them merely to obtain a browser's default visual style.

`strong` versus `b`, and `em` versus `i`

html
<p><strong>Deadline:</strong> submit before 5 PM.</p>
<p>The product name is <b>Orbit</b>.</p>
<p>I <em>really</em> need the original file.</p>
<p>The term <i>Homo sapiens</i> is a scientific name.</p>

strong represents strong importance, seriousness, or urgency.
b draws attention without adding that importance, such as a keyword or product name in running prose.
em represents stress emphasis that can change the meaning of a sentence.
i represents text conventionally set apart from surrounding prose, such as an alternate voice, idiomatic phrase, taxonomic designation, or technical term when another semantic element is not more appropriate.

Abbreviations, definitions, quotations, and citations

html
<p><abbr title="HyperText Markup Language">HTML</abbr> structures web documents.</p>
<p><dfn id="semantic-html">Semantic HTML</dfn> uses elements according to their meaning.</p>

<blockquote cite="https://example.com/source">
  <p>Good structure makes content easier to understand.</p>
</blockquote>
<p>— <cite>Example Web Handbook</cite></p>

<p>Rina said, <q>Start with the content, not the colors.</q></p>

abbr marks an abbreviation or acronym. A title can provide its expansion, but do not rely on hover text as the only explanation for an unfamiliar abbreviation.
dfn marks the defining occurrence of a term.
blockquote represents a block quotation from another source; its cite attribute can carry a source URL, but that URL is not displayed automatically.
q represents a short inline quotation. Browsers normally provide quotation marks.
cite represents the title of a cited creative work, not the person's name merely because they are an author.

Editorial and reference text

html
<p>Water boils at 100<sup>°</sup>C at standard pressure.</p>
<p>H<sub>2</sub>O is water.</p>
<p>The launch date changed from <del>12 June</del> to <ins>19 June</ins>.</p>
<p><s>₹999</s> ₹749</p>
<p><mark>Bring photo identification.</mark></p>

sup and sub represent superscript and subscript content where the position is part of the meaning.
del and ins represent deleted and inserted content, useful for editorial changes.
s marks content that is no longer accurate or relevant, such as an old price. It is not a substitute for del when documenting an edit.
mark highlights content because it is relevant in the current context, such as a search match or key passage being discussed.

Technical text, keyboard input, program output, variables, and time

Some text is not ordinary prose. HTML has dedicated elements for technical material so readers, assistive technology, search tools, and future CSS can distinguish the role of each fragment.

`code`

Use code for a fragment of computer code:

html
<p>Use <code>npm run dev</code> to start the local server.</p>
<p>The <code>fetch()</code> function returns a Promise.</p>

code gives semantic meaning, not syntax highlighting. A browser may render it in a monospace font by default, but appearance still belongs to CSS.

For a code block, combine pre and code:

html
<pre><code>const total = price * quantity;
console.log(total);</code></pre>

pre preserves whitespace and line breaks. code identifies the content as code. Using both communicates both facts.

Do not put escaped executable markup directly into prose without thinking about parsing. To display HTML source as text, character references are needed for characters such as < and >:

html
<p>Write <code>&lt;main&gt;</code> for the page's primary content.</p>

`kbd`, `samp`, and `var`

Use kbd for user input, usually keyboard input:

html
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Use samp for sample output from a program or system:

html
<p>The terminal prints <samp>Build completed successfully</samp>.</p>

Use var for a variable or placeholder in a mathematical or programming explanation:

html
<p>The area is <var>width</var> × <var>height</var>.</p>

These elements are especially useful in documentation because they separate what the reader types, what the machine returns, and what the author is naming abstractly.

A compact documentation example:

html
<section aria-labelledby="install-heading">
  <h2 id="install-heading">Install the project</h2>

  <p>
    Run <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>
    to open a terminal, then enter:
  </p>

  <pre><code>npm install
npm run dev</code></pre>

  <p>Expected output:</p>
  <p><samp>Local: http://localhost:5173/</samp></p>
</section>

Do not use kbd, samp, or var merely to obtain a monospace font. Their value is semantic.

`time`

Use time when text represents a machine-readable date, time, duration, or date-time:

html
<p>
  Published
  <time datetime="2026-08-27">27 August 2026</time>.
</p>

The visible text can be human-friendly while datetime provides a standardized value.

html
<p>
  The workshop begins at
  <time datetime="2026-09-02T10:30:00+05:30">10:30 AM IST</time>.
</p>

For a duration:

html
<p>
  Estimated reading time:
  <time datetime="PT18M">18 minutes</time>.
</p>

A useful rule is:

If software may need to understand the date/time value later, make the machine-readable value explicit.

Do not invent a datetime value that differs from the visible content. Metadata must agree with what users are told.

Preformatted and contact information

Use pre when the whitespace and line breaks are part of the content:

html
<pre>Line one
    indented line
Line three</pre>

Do not use pre just to avoid writing CSS. It is appropriate for preformatted text such as code samples, ASCII diagrams, or content where spacing is meaningful.

address represents contact information for the nearest article or for the document as a whole:

html
<address>
  Rina's Kitchen<br>
  18 Baker Street<br>
  <a href="mailto:hello@example.com">hello@example.com</a>
</address>

It is not a general-purpose wrapper for every postal address mentioned in an article.

Description lists

Use dl when the content consists of name/value or term/description groups rather than ordinary bullet points:

html
<dl>
  <dt>HTML</dt>
  <dd>Structures and describes document content.</dd>

  <dt>CSS</dt>
  <dd>Controls presentation.</dd>
</dl>

dt introduces a term or name; one or more following dd elements provide its description or value. Description lists work well for glossaries, metadata, key/value facts, and question/answer-style definitions when that relationship is genuinely present.

Guided example: a learning journal article

Replace 002's body while keeping the document skeleton:

html
<body>
  <article>
    <h1>My first week learning HTML</h1>
    <p>I am learning how structure gives web content meaning.</p>

    <h2>What I learned</h2>
    <p>
      HTML describes content; it does <strong>not</strong> exist merely
      to make text look different.
    </p>
    <ul>
      <li>A browser parses markup into a document tree.</li>
      <li>Headings describe hierarchy.</li>
      <li>Elements must be nested intentionally.</li>
    </ul>

    <h2>My study process</h2>
    <ol>
      <li>Read the lesson objective.</li>
      <li>Type the example without pasting.</li>
      <li>Explain each semantic choice.</li>
      <li>Validate the finished document.</li>
    </ol>

    <h2>Next goal</h2>
    <p>I want to build a site that is <em>understandable</em>, not merely visible.</p>
  </article>
</body>

Trace the outline: the article topic is the h1; three peer sections use h2. The skills have no necessary sequence, so use ul. The process is sequential, so use ol. strong marks the important correction to a misconception; em stresses “understandable.”

article is introduced fully on 006. Here it indicates content that could stand independently as a journal entry. If that concept distracts from today's goal, the article can exist directly in main later; focus now on text structure.

Open the page without CSS. Read only the headings. They should summarize the page. Then read each list out of order: only the unordered list should retain its meaning.

Intermediate example: profile article with nested hierarchy

Expand toward the personal website:

html
<main>
  <article>
    <h1>About Asha Rao</h1>
    <p>I build small web projects while studying frontend development.</p>

    <h2>Current skills</h2>
    <ul>
      <li>
        HTML
        <ul>
          <li>Document structure</li>
          <li>Text semantics</li>
        </ul>
      </li>
      <li>Version control basics</li>
    </ul>

    <h2>Learning journal</h2>
    <h3>Week one</h3>
    <p>I learned to separate meaning from appearance.</p>
    <h3>Week two</h3>
    <p>I will connect several pages with meaningful links.</p>

    <hr>

    <h2>Contact availability</h2>
    <p>
      Monday to Friday<br>
      09:00 to 17:00
    </p>
  </article>
</main>

The nested list sits inside its parent li, not beside it. Week headings are h3 because both belong under the h2 “Learning journal.” The hr signals a thematic shift to availability. The line break is meaningful in a compact schedule; separate paragraphs would also be reasonable if each line were an independent thought.

Notice the heading sequence h1, h2, h2, h3, h3, h2. Numbers need not increase on every heading; they represent nesting depth. Do not add an h3 only because you prefer its default size.

Advanced optional extension: test the outline as data

Create a plain-text outline from the page:

text
About Asha Rao
  Current skills
  Learning journal
    Week one
    Week two
  Contact availability

Now hide all non-heading text using the browser's accessibility tree or a headings extension, if available. Can you predict the page from its headings? Screen reader users often navigate by headings, but headings benefit everyone through scanning and search indexing. This does not mean every visual label must become a heading. A heading starts a section of content; a short field name will later be a label.

Rewrite “Click here to read more” as text whose purpose remains clear when taken out of context; links arrive tomorrow. This demonstrates that good content and good semantics reinforce one another.

Common mistakes and debugging

Heading chosen for size: choose rank from hierarchy, then style later.
Skipping levels: inspect the text outline and correct parent-child depth.
One giant paragraph: split when the topic changes.
br repeated for spacing: use paragraphs and later CSS margins.
hr used as decoration: include it only when a thematic break exists.
Manual bullets (- item): use ul/ol so the relationship and item count are programmatic.
List children that are not li: text and nested lists belong inside an li.
Bold/italic meaning assumed: default visual treatment may change; select strong and em for their meanings.
Paragraph wrapping a list or heading: inspect the DOM; the parser may have closed p earlier than expected.

Accessibility, security, and performance

WCAG requires information and relationships conveyed visually to be programmatically determinable. Real headings and lists achieve this better than enlarged text and typed bullets. A logical order supports keyboard, screen reader, reading-mode, and small-screen users. Do not write instructions relying only on location, such as “see the list on the right.”

Text elements introduce little performance cost. Good HTML can reduce unnecessary wrappers and scripts. Content can still create security or privacy harm: do not publish a personal address, private schedule, or contact details without consent. Treat copied article text as potentially copyrighted and cite sources rather than presenting it as your work.

Tiered exercises

Level 1: classify

Choose elements for a page title, two peer topics, an urgent deadline, a sequence of setup steps, a set of hobbies, and a line break in a postal address. Justify each.

Level 2: build

Create a complete article page with one h1, at least three h2 sections, one h3, two paragraphs, both list types, meaningful strong and em, and a justified hr or br.

Level 3: audit

Turn your headings into a plain-text outline. Explain any level jump, remove spacing-only breaks, and inspect the parsed DOM for an accidentally closed paragraph.

Level 1: h1; two h2s; strong; ol with li; ul with li; br. Use em only where spoken stress changes meaning.

Level 2:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learning Journal | Asha Rao</title>
  </head>
  <body>
    <main>
      <article>
        <h1>Learning journal</h1>
        <p>I record what I build and what I still need to practise.</p>
        <h2>Topics completed</h2>
        <ul><li>Document structure</li><li>Text semantics</li></ul>
        <h2>Practice routine</h2>
        <ol><li>Plan the outline.</li><li>Write HTML.</li><li>Validate it.</li></ol>
        <h3>Most important check</h3>
        <p><strong>Explain every choice.</strong> I want to learn <em>deliberately</em>.</p>
        <hr>
        <h2>Availability</h2>
        <p>Monday-Friday<br>09:00-17:00</p>
      </article>
    </main>
  </body>
</html>

Level 3: expected outline: Learning journal; Topics completed; Practice routine; Most important check nested under Practice routine; Availability. The br is retained because the schedule lines are intentionally broken, and hr marks the transition from study content to availability.

Recap and exit questions

Structure text by meaning: headings create hierarchy, paragraphs group thoughts, lists express item relationships, and text-level semantics express emphasis or importance. Default display is not semantic meaning.

Why should heading rank not be chosen by size?
When is ol better than ul?
How do strong and em differ?
Give one valid and one invalid reason to use br.
Why is “block versus inline” only a starter model?

Try it with your own example

Here is a habit worth building now, while the stakes are low: before you write text markup for your own project, sketch its heading outline on paper first, the way you did for Asha's journal entry above.

Suppose Rina wants an "Our Story" page. She hands you these sentences in a text message, in this order: her grandmother's original recipe; how the shop opened three years ago; the two ovens they now use; the three people who work there. Do not open your editor yet — first write only the outline:

text
Our Story
  A recipe passed down
  Opening the shop
  How we bake today
  The people behind the counter

Only now turn it into markup, choosing strong or em only where Rina's own words carried real emphasis ("we bake every loaf by hand," not decorative bolding):

html
<article>
  <h1>Our Story</h1>
  <h2>A recipe passed down</h2>
  <p>My grandmother taught me this sourdough starter in 1994, and I have kept it alive ever since.</p>
  <h2>Opening the shop</h2>
  <p>Rina's Kitchen opened its doors in 2023, three streets from where she grew up.</p>
  <h2>How we bake today</h2>
  <p>We bake <em>every</em> loaf by hand, in two wood-fired ovens, starting before sunrise.</p>
  <h2>The people behind the counter</h2>
  <ul>
    <li>Rina, head baker</li>
    <li>Marcus, pastry chef</li>
    <li>Dee, front of house</li>
  </ul>
</article>

Notice that the "people" section became a ul, not a fourth paragraph — their order genuinely does not matter, unlike the chronological story above it. That single decision is the entire lesson, applied to a client's real words instead of a textbook example.

Further reading: MDN — Emphasis and importance has more before/after audio examples of how em genuinely changes spoken meaning.