Lesson 2: Text Formatting & Lists

Goal: Emphasize text, add line breaks, and build lists.

1. Bold and Italic Text: <strong> and <em>

<strong>: bold with meaning

html

<p>Warning: <strong>do not touch the wires</strong>.</p>

• Makes text bold
• Tells browsers and screen readers the text is "important"
• (<b> also exists and only makes text bold, with no special meaning. The modern preferred choice is <strong>)

<em>: italic for emphasis

html

<p>I <em>really</em> love HTML.</p>

• Makes text italic
• Means "stress this word," like emphasizing a word when speaking
• (<i> is for purely visual italics)

Key point: <strong> and <em> are preferred over <b> and <i> because they carry meaning, not just style. This matters for accessibility and SEO.

2. Line Breaks vs. Paragraphs

<p>: paragraph

html

<p>This is paragraph one.</p>

<p>This is paragraph two.</p>

• Creates a new block with space above and below automatically
• Use for separate chunks of text

<br>: line break

html

<p>123 Main Street<br>Jeddah, Saudi Arabia<br>Postal Code: 12345</p>

• Starts a new line inside the same block (no extra spacing)
• Has no closing tag (don't write </br>)
• Use sparingly, e.g. for addresses or poetry

Common mistake: Beginners write <br><br><br> to create space between sections. That's bad practice. Use <p> or, later, CSS.

3. Lists

Unordered list <ul> (bullet points)

html

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

Result:

• HTML
• CSS
• JavaScript

Ordered list <ol> (numbered)

html

<ol>

    <li>Open your code editor</li>

    <li>Write your HTML</li>

    <li>Save the file</li>

</ol>

Result:

1.   Open your code editor

2.   Write your HTML

3.   Save the file

Rule: Every <li> must be inside a <ul> or <ol>. It can't stand alone.

4. Comments in HTML

html

<!-- This is a comment; it won't show on the page -->

<p>This text will show.</p>

• Used to leave notes for yourself or other developers
• Doesn't appear on the webpage
• Handy for temporarily switching off code without deleting it

5. Intro to Semantic Tags (light touch, detail later)

html

<header>

    <h1>My Website</h1>

</header>

<footer>

    <p>&copy; 2026 My Website</p>

</footer>

• <header> = the top section of a page (usually logo, menu, or title)
• <footer> = the bottom section (usually copyright or contact info)
• For now, just teach the idea: HTML has tags that describe a section's role, not just its appearance.

Summary Table

Practice: "About Me" Page

Build a page with:

1.   Your name in an <h1>

2.   A short bio paragraph, with one word in <strong> and one in <em>

3.   An unordered list of 3 skills

4.   An ordered list of 3 hobbies (ranked by favorite)

Example for students:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>About Me</title>

</head>

<body>

    <h1>About Ahmed</h1>

    <p>I am a <strong>web design</strong> student who is <em>really</em> excited to learn HTML.</p>

    <h2>My Skills</h2>

    <ul>

        <li>Time management</li>

        <li>Problem solving</li>

        <li>Teamwork</li>

    </ul>

    <h2>My Favorite Hobbies</h2>

    <ol>

        <li>Photography</li>

        <li>Reading</li>

        <li>Gaming</li>

    </ol>

</body>

</html>

💡 Note for Urdu or Arabic pages: Use <html lang="ur" dir="rtl">. lang="ur" sets the language and dir="rtl" displays text right to left. This is a good bonus point to teach.