Skip to content
UNWIND Code Lab Co-funded by the European Union
Special Text and Lists
Log In

Special Text and Lists

  • 5 min reading
  • 7 min activity
0 of 5 tasks doneup to 110 XP
  1. Tag gallery10 XPTo do
  2. Which tag?15 XPTo do
  3. Slide bug: the crossed price30 XPTo do
  4. Creating a list30 XPTo do
  5. Recipe card25 XPOptional

Mission 1 continues. Today you mark special kinds of text and build lists. In the next lesson, two lists hold your skills and your learning journey.

In this lesson
  • Mark quotes, code, small print, highlights, changes, raised and lowered text, and comments.
  • Build unordered, ordered and description lists.
Remember

What is the difference between <br> and <p>? Think first, then open the answer.

Show the answer

<br> breaks a line inside one paragraph. <p> starts a new paragraph, with space before and after it.

Quotes

<blockquote> holds a longer quote from another source. Browsers show it indented. The cite attribute can hold the address of the exact source. For a short quote inside a sentence, use <q>: the browser adds the quote marks.

<p>One of William Shakespeare's most famous lines is:</p>
<blockquote cite="https://example.com/hamlet/act-3">
  <p>To be, or not to be, that is the question.</p>
</blockquote>
<p>My mentor says <q>Small steps are still steps</q>.</p>

Code and spaces

Browsers join extra spaces and line breaks into one space. <pre> keeps every space and line break, in a font where all letters have the same width. <code> marks a piece of code. To show a tag as text, write &lt; for < and &gt; for >. These codes are called character references.

<p>To add a main heading, use the <code>&lt;h1&gt;</code> tag.</p>

Small, highlighted and changed text

  • <small>: small print, like a footnote or a copyright line.
  • <mark>: a highlight, like a marker pen.
  • <del> and <ins>: text that was removed (crossed out) and text that was added (underlined).
  • <s>: text that is no longer right, like an old price.
  • <sup> and <sub>: raised text, as in x², and lowered text, as in H₂O.

The degree sign in 200 °C is its own character, so you do not need <sup> for it. The course slides show an old price with <del>. That works, but for a price that is no longer valid the HTML standard suggests <s>.

Concept cards

Tag gallery

Required 10 XP

Eight tags for special text. Tap each card to see what it means.

Matching

Which tag?

Required 15 XP

Match each kind of text with its tag.

Comments

A comment is a note in your code: <!-- my skills -->. Visitors do not see it on the page, but anyone can read it with View page source. Never write passwords or private information in a comment.

Slide bug: the crossed price

Bug Hunter: this code comes from two course slides, and it has two small bugs. Run it first, then tap the lines and fix them.

Practice

Slide bug: the crossed price

Required 30 XP

This code comes from two course slides. It has two small bugs. Press Run and check first, then tap a line with a bug and choose the fix.

Lists

Worked example

The three kinds of lists from the course slide "Creating a list".

  1. Unordered list

    <ul> shows bullets. Use it when the order does not matter. Each item is an <li>.

  2. Ordered list

    <ol> shows numbers. Use it for steps. Without CSS, the type attribute changes the numbering: "a" or "A" for letters, "i" or "I" for Roman numbers. start="5" starts at 5, reversed counts down.

  3. Description list

    <dl>, also called a definition list, pairs a term (<dt>) with its description (<dd>).

<ul>
  <li>Apple</li>
  <li>Pear</li>
  <li>Banana</li>
</ul>
<ol>
  <li>Introduction</li>
  <li>Main part</li>
  <li>Conclusion</li>
</ol>
<dl>
  <dt>HTML</dt>
  <dd>A markup language</dd>
  <dt>CSS</dt>
  <dd>A style language</dd>
</dl>

Old pages also use type on <ul> to change the bullets. That is out of date: today CSS does it, and you learn how in Unit 3.

Practice

Creating a list

Required 30 XP

Three headings with empty lists, like the course slide. Fill them: at least 3 things in the bulleted list, the 5 steps from lesson 1.1 in the numbered list, and HTML and CSS with a short description in the description list.

Bonus: recipe card

Optional, for a mission star: one recipe, three kinds of special text and two lists.

Practice

Recipe card

25 XP

Bonus exercise. The two comments tell you which lists to build. Then highlight the oven temperature with <mark> and make the tip small print with <small>.

Quote
Words from another person or text: <blockquote> or <q>.
Character reference
A code for a sign that HTML would read as code, like &lt; for <.
Comment
A note in the code that the page does not show.
List item
One entry in a list: <li>.
Description list
Terms and their descriptions: <dl>, <dt>, <dd>.

In short

  • Choose text tags by meaning: quote, code, small print, highlight, change.
  • <ul> for bullets, <ol> for numbered steps, <dl> for terms and descriptions.
  • Comments are hidden on the page, but anyone can read them in the source.
Next time

Project step 1: you build your own page in HTML.

Sources

  1. MDN Web Docs (2026). <blockquote> and <q>.
  2. MDN Web Docs (2026). <pre> and <code>.
  3. MDN Web Docs (2026). Character reference.
  4. MDN Web Docs (2026). Advanced text features.
  5. MDN Web Docs (2026). <del>, <ins> and <s>.
  6. MDN Web Docs (2026). <sup> and <sub>.
  7. MDN Web Docs (2026). HTML comments.
  8. MDN Web Docs (2026). Lists, <ol> and <dl>.
  9. WHATWG (2026). HTML Living Standard: Text-level semantics.

End of the lesson

This lesson: 0 of 120 XP

Code Cards in this lesson: 14

  • <blockquote>
  • <q>
  • <pre>
  • <code>
  • < >
  • <small>
  • <mark>
  • <del>
  • <sup>
  • <!-- -->
  • <ul>
  • <ol>
  • <li>
  • <dl>
Next: Project Step 1: Your Page in HTML