Lesson 2: Text Elements - Formatting and Semantic HTML

What You'll Learn

How to format text (bold, italic, underline)
The difference between visual and semantic HTML
How to add special characters
How to structure content meaningfully
Text formatting best practices

Why This Matters

Text is the primary way we communicate on the web. Learning how to format and structure text properly makes your content more readable, accessible, and meaningful to both users and search engines.

Part 1: Basic Text Formatting

Bold Text

There are two ways to make text bold:

<p>This is <strong>very important</strong> text.</p>
<p>This is <b>bold</b> text.</p>

The difference:

 = Semantic (means "important")
 = Visual (just looks bold)

Use  when the content is actually important.

Italic Text

<p>This is <em>emphasized</em> text.</p>
<p>This is <i>italic</i> text.</p>

The difference:

 = Semantic (means "emphasis")
 = Visual (just looks italic)

Use  for emphasis,  for technical terms or foreign words.

Example Usage

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting</title>
</head>
<body>
    <h1>Welcome to My Blog</h1>
    
    <p>This is <strong>very important</strong> information!</p>
    <p>I <em>really</em> enjoyed this book.</p>
    <p>The term <i>HTML</i> stands for HyperText Markup Language.</p>
</body>
</html>

Part 2: More Text Formatting Elements

Underline

<p>This text is <u>underlined</u>.</p>

Note: Avoid underlining unless necessary - users expect underlined text to be links!

Strikethrough (Deleted Text)

<p>The price was <del>$50</del> now only $30!</p>
<p>You can also use <s>strikethrough</s> for this.</p>

<del> = Content was deleted
<s> = Content is no longer accurate

Inserted Text

<p>My favorite color is <del>blue</del> <ins>green</ins>.</p>

Shows text that was added/inserted.

Small Text

<p>Copyright 2024 <small>All rights reserved</small></p>

Used for fine print, legal text, or side comments.

Marked/Highlighted Text

<p>The answer is <mark>42</mark>.</p>

Highlights text like a yellow highlighter marker.

Part 3: Semantic Text Elements

Semantic elements give meaning to content, not just appearance.

Quotations

Block Quote (Long Quotes):

<blockquote>
    <p>To be or not to be, that is the question.</p>
</blockquote>

Displays as an indented block - used for long quotes.

Inline Quote (Short Quotes):

<p>Shakespeare wrote <q>To be or not to be</q> in Hamlet.</p>

Automatically adds quotation marks.

Cite (Source/Title):

<p>My favorite book is <cite>The Great Gatsby</cite>.</p>

Used for titles of books, movies, articles, etc.

Abbreviations

<p>I work for <abbr title="National Aeronautics and Space Administration">NASA</abbr>.</p>

Shows the full text on hover. Very helpful for accessibility!

Code and Technical Text

Inline Code:

<p>Use the <code>console.log()</code> function to print output.</p>

Keyboard Input:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Sample Output:

<p>The computer responded: <samp>404 Not Found</samp></p>

Variable:

<p>The formula is <var>E</var> = <var>mc</var><sup>2</sup></p>

Part 4: Subscript and Superscript

Superscript

<p>The area is 10m<sup>2</sup>.</p>
<p>E = mc<sup>2</sup></p>

Text raised above the baseline (exponents, footnotes).

Subscript

<p>The formula for water is H<sub>2</sub>O.</p>
<p>Chemical formula: CO<sub>2</sub></p>

Text lowered below the baseline (chemical formulas, footnotes).

Part 5: Special Characters (HTML Entities)

Some characters are reserved or special in HTML. Use entities to display them:

Common HTML Entities

| < | < | < | Less than |

| > | > | > | Greater than |

| & | & | & | Ampersand |

| " | " | " | Quote |

| ' | ' | ' | Apostrophe |

| © | © | © | Copyright |

| ® | ® | ® | Registered |

| ™ | ™ | ™ | Trademark |

| € | € | € | Euro |

| £ | £ | £ | Pound |

| ¥ | ¥ | ¥ | Yen |

| |   |   | Non-breaking space |

Using Entities

<p>5 &lt; 10</p>
<!-- Displays: 5 < 10 -->

<p>Tom &amp; Jerry</p>
<!-- Displays: Tom & Jerry -->

<p>&copy; 2024 My Company</p>
<!-- Displays: © 2024 My Company -->

Why needed:

<p>Use the <code> tag</p>  <!-- WRONG! Browser thinks it's a real tag -->
<p>Use the &lt;code&gt; tag</p>  <!-- CORRECT! Shows: <code> -->

Part 6: Line Breaks and Whitespace

How HTML Handles Whitespace

This HTML:

<p>This    has    many    spaces
and
multiple
lines.</p>

Displays as:

This has many spaces and multiple lines.

HTML collapses multiple spaces and line breaks into a single space!

Forcing Line Breaks

<p>First line<br>Second line<br>Third line</p>

Preserving Whitespace

Use <pre> (preformatted text):

<pre>
This    keeps    all
    the spacing
        and line breaks
            exactly as written
</pre>

Often used for:

Code blocks
ASCII art
Poetry
Anything where exact spacing matters

Part 7: Combining Formatting Elements

You can nest formatting tags:

<p>This is <strong><em>very important and emphasized</em></strong> text.</p>
<p>The answer is <mark><strong>42</strong></mark>!</p>
<p>H<sub>2</sub>O is <strong>water</strong>.</p>

Remember: Close tags in reverse order of opening!

Part 8: Complete Example

Create a new file: lesson-02/article.html

<!DOCTYPE html>
<html>
<head>
    <title>Article Example</title>
</head>
<body>
    <h1>The History of the Internet</h1>
    
    <p>
        The internet, as we know it today, has a <strong>fascinating history</strong> 
        that spans several decades.
    </p>
    
    <h2>Early Beginnings</h2>
    <p>
        In 1969, <abbr title="Advanced Research Projects Agency Network">ARPANET</abbr> 
        was created. It was the <em>first</em> network to implement the 
        <abbr title="Transmission Control Protocol/Internet Protocol">TCP/IP</abbr> 
        protocol suite.
    </p>
    
    <h2>The World Wide Web</h2>
    <p>
        Tim Berners-Lee created the <strong>World Wide Web</strong> in 1989. 
        As he famously said:
    </p>
    
    <blockquote>
        <p>The Web is more a social creation than a technical one.</p>
    </blockquote>
    
    <p>
        The first website went live on August 6<sup>th</sup>, 1991.
    </p>
    
    <h2>Technical Details</h2>
    <p>
        Web pages are written in <abbr title="HyperText Markup Language">HTML</abbr>.
        A simple HTML element looks like this: <code>&lt;p&gt;Hello&lt;/p&gt;</code>
    </p>
    
    <h2>Modern Internet</h2>
    <p>
        Today, <mark>over 5 billion people</mark> use the internet worldwide.
        The price of internet access has gone from <del>$50/month</del> to 
        much more affordable rates.
    </p>
    
    <hr>
    
    <p><small>&copy; 2024 Internet History Project. All rights reserved.</small></p>
</body>
</html>

This example demonstrates:

Proper heading hierarchy
Multiple formatting elements
Abbreviations with tooltips
Block quotes
Superscript for dates
Code formatting
Marked (highlighted) text
Strikethrough for pricing
Copyright symbol
Small print

Practice Exercises

Exercise 1: Recipe Page

Create a file called recipe.html with:

A recipe title (h1)
Ingredients section (h2)
Instructions section (h2)
Use  for important warnings (e.g., "Do not overbake!")
Use  for optional ingredients
Use superscript for measurements (like 2^nd cup)

Exercise 2: Book Review

Create a file called book-review.html with:

Book title in <cite>
Your rating with stars (use HTML entities or just text)
A quote from the book in <blockquote>
Highlighted key points with 
Author name in

Exercise 3: Technical Documentation

Create a file called tech-doc.html with:

At least 3 abbreviations with <abbr>
At least 2 code examples with <code>
Keyboard shortcuts with <kbd>
A mathematical or chemical formula with  or

Common Mistakes

Mistake 1: Using `
` for Spacing

<p>Paragraph one</p>
<br><br><br>
<p>Paragraph two</p>

Better: Use CSS for spacing (we'll learn this later)

Mistake 2: Using `` and `` When Meaning Matters

<p>This is <b>important</b>!</p>  <!-- Not semantic -->

Better:

<p>This is <strong>important</strong>!</p>  <!-- Semantic -->

Mistake 3: Forgetting to Close Nested Tags

<p><strong><em>Text</strong></em></p>  <!-- WRONG order! -->

Correct:

<p><strong><em>Text</em></strong></p>  <!-- Close in reverse order -->

Mistake 4: Using Formatting for Structure

<b>Section Heading</b>  <!-- WRONG! -->