Working with Text & Lists

Duration: 60–90 minutes

🎯 What You’ll Learn

• How to format text using common HTML tags like <strong>, <em>, and <span>.[web:147][web:142]
• How and when to use line breaks and horizontal rules.
• How to create unordered, ordered, and description lists to organize content.[web:137][web:141]
• Best practices for writing clean, readable text content in HTML.[web:106]

📺 Lesson Video

Watch this W3Schools-based HTML tutorial which covers text, formatting, and lists. Follow along and pause to practice:

[web:113]

2.1 Basic Text Formatting Tags

HTML provides several tags to format and emphasize text. Some are purely visual, while others also have semantic meaning (they tell search engines and screen readers that the text is important).[web:147][web:142]

• <strong> – Important text (usually bold).[web:147][web:149]
• <em> – Emphasized text (usually italic).[web:147][web:145]
• <b> – Bold text (visual only, no extra meaning).[web:147][web:145]
• <i> – Italic text (visual only).[web:147][web:145]
• <mark> – Highlighted / marked text.[web:147][web:142]
• <small> – Smaller text.[web:147]

Example:

<p>
  This is a <strong>very important</strong> message with 
  <em>emphasis</em> and <mark>highlighted</mark> text.
</p>

Use <strong> and <em> when the meaning of the text is important, and use CSS later to control the visual style.[web:145]

2.2 Line Breaks and Horizontal Rules

Sometimes, you need a manual line break without starting a new paragraph, or a horizontal separator line between sections.[web:106]

• <br /> – Inserts a line break.
• <hr /> – Inserts a thematic break (horizontal rule) between sections.

<p>Address:<br />
Street Name 123<br />
City, Country</p>

<hr />

<p>This text appears after a horizontal rule.</p>

Tip: Do not overuse <br /> for layout. Use it only when you really need a manual break (like addresses or poems). Layout will be done later with CSS.

2.3 Spans and Inline Formatting

The <span> element is an inline container used to group small pieces of text so you can style them with CSS or apply classes/IDs.[web:106]

<p>
  Welcome to the 
  <span class="brand-name">Frontend Beginner</span> course!
</p>

Right now, <span> looks like normal text. Later, with CSS, you can change colors, fonts, etc., only for text inside that span.

2.4 Unordered Lists (Bulleted)

Unordered lists are used when the order of items does not matter, like a list of features or tools.[web:137][web:141]

• Surrounded by <ul> ... </ul>.
• Each item is wrapped in <li> ... </li>.

<h3>Frontend Tools You’ll Use</h3>
<ul>
  <li>Visual Studio Code</li>
  <li>Google Chrome</li>
  <li>Git & GitHub</li>
</ul>

2.5 Ordered Lists (Numbered)

Ordered lists are used when the order of items does matter, like step‑by‑step instructions.[web:137][web:146]

• Surrounded by <ol> ... </ol>.
• Each item is still <li> ... </li>.

<h3>Steps to Create an HTML File</h3>
<ol>
  <li>Open your code editor.</li>
  <li>Create a new file named index.html.</li>
  <li>Add the basic HTML structure.</li>
  <li>Save the file and open it in a browser.</li>
</ol>

You can change the numbering style using the type attribute (for example, type="A", type="i"), but usually the default numbers are fine.[web:146][web:141]

2.6 Description Lists

Description lists are used for pairs of terms and descriptions, like glossaries or FAQs.[web:141][web:148]

• <dl> – Description list wrapper.
• <dt> – Term (title).
• <dd> – Description (definition).

<h3>Key HTML Terms</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used to structure web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used to style and layout web pages.</dd>

  <dt>JavaScript</dt>
  <dd>Programming language used to add interactivity to websites.</dd>
</dl>

2.7 Nested Lists

You can put one list inside another list item to represent sub‑items.

<h3>Course Outline (Simplified)</h3>
<ul>
  <li>Section 1: Fundamentals</li>
  <li>Section 2: HTML Basics
    <ul>
      <li>Fundamentals & Tags</li>
      <li>Text & Lists</li>
      <li>Links & Images</li>
      <li>Forms & Inputs</li>
    </ul>
  </li>
  <li>Section 3: CSS Basics</li>
</ul>

🧪 Practice Task

1. Open your about.html or create a new file profile.html.
2. Add:
   • A short introduction paragraph that uses <strong>, <em>, and <mark>.
   • An unordered list of your hobbies or interests.
   • An ordered list of 3 goals you have as a frontend developer.
   • A small description list explaining at least 2 technical terms you learned so far.

✅ Lesson Summary

• You can format text semantically with <strong> and <em>, and visually with tags like <b> and <i> (though CSS is preferred for styling).[web:147][web:145]
• <br /> adds a manual line break, <hr /> adds a horizontal separator.[web:106]
• Unordered lists (<ul>) are for bullet points; ordered lists (<ol>) are for numbered steps; description lists (<dl>) pair terms and definitions.[web:137][web:141]
• Using lists properly makes your content easier to read and more accessible.[web:144][web:148]