2.2: Text Formatting & Typography

1. Paragraphs and Line Breaks

Paragraphs (<p>)

The <p> element defines a paragraph of text.

<p>This is a paragraph. It represents a block of text separated from adjacent blocks by blank lines and/or first-line indentation.</p>

<p>This is another paragraph. Browsers automatically add space before and after each paragraph element.</p>

Key characteristics:

• Block-level element (takes full width)
• Automatic spacing above and below
• Cannot contain block-level elements (only inline content)

Line Breaks (<br>)

Use <br> for line breaks within text (not between paragraphs).

<p>
  123 Main Street<br>
  Apartment 4B<br>
  New York, NY 10001<br>
  United States
</p>

<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is great,<br>
  And so are you!
</p>

Best practices:

• Use <br> for addresses, poems, lyrics
• Don't use <br> to create spacing between elements (use CSS instead)
• Don't use multiple <br> for vertical spacing

<p>First paragraph</p>
<br><br><br>
<p>Second paragraph</p>

<p style="margin-bottom: 3rem;">First paragraph</p>
<p>Second paragraph</p>

Horizontal Rule (<hr>)

The <hr> element represents a thematic break between content.

<section>
  <h2>Chapter 1</h2>
  <p>Content of chapter one...</p>
</section>

<hr>

<section>
  <h2>Chapter 2</h2>
  <p>Content of chapter two...</p>
</section>

Semantic meaning: Thematic shift, topic change, scene change

2. Text Emphasis and Importance

Emphasis: <em> vs <i>

<em> (Emphasis) - Semantic

Meaning: Stress emphasis, changes meaning

<p>I <em>love</em> programming!</p>

<p>Cats are <em>not</em> dogs.</p>

<p><em>Never</em> share your password.</p>

Screen readers: Will pronounce with vocal emphasis

<i> (Italic) - Presentational/Technical

Use cases: Foreign words, technical terms, ship names, thoughts

<p>The word <i lang="fr">rendezvous</i> is French.</p>

<p>The <i>RMS Titanic</i> sank in 1912.</p>

<p>I thought to myself, <i>This is amazing!</i></p>

<p>The <i>E. coli</i> bacteria is common.</p>

Default rendering: Both are italic, but semantic meaning differs

Strong Importance: <strong> vs <b>

<strong> (Strong Importance) - Semantic

Meaning: Important, serious, urgent

<p><strong>Warning:</strong> This action cannot be undone.</p>

<p><strong>Important:</strong> Meeting rescheduled to 3 PM.</p>

<p>Read the <strong>entire</strong> document before signing.</p>

Screen readers: May announce with emphasis

<b> (Bold) - Presentational

Use cases: Keywords, product names (without emphasis)

<p>The <b>Submit</b> button is at the bottom.</p>

<p><b>Ingredients:</b> flour, sugar, eggs, butter</p>

When to Use Which?

<p>I <em>really</em> want to go.</p>

<p>The <i>Mona Lisa</i> is famous.</p>

<p><strong>Danger:</strong> High voltage!</p>

<p>Click the <b>Next</b> button to continue.</p>

3. Other Text Formatting Elements

Underline: <u>

Use case: Proper names in Chinese, misspelled words, annotations

<p>The document contains a <u class="spelling-error">speling</u> mistake.</p>

<p>See <u>chapter 5</u> for more details.</p>

Warning: Users may confuse underlined text with links. Use sparingly.

Strikethrough: <s> and <del>

<s> (Strikethrough)

Use case: Content no longer accurate or relevant

<p><s>$99.99</s> Now only $49.99!</p>

<p>Meeting at <s>2 PM</s> 3 PM</p>

<del> (Deleted Text)

Use case: Document edits, tracked changes

<p>The capital of France is <del>Lyon</del> <ins>Paris</ins>.</p>

Often used with <ins> (inserted text):

<p>
  Price: <del>$100</del> <ins>$80</ins>
</p>

Mark/Highlight: <mark>

Use case: Highlighted or marked reference (search results, important passages)

<p>Search results for "<mark>HTML tutorial</mark>":</p>

<p>The <mark>most important</mark> thing to remember is...</p>

Default rendering: Yellow background highlight

Small Text: <small>

Use case: Fine print, disclaimers, copyright

<p>
  Save 50% today!
  <small>Terms and conditions apply.</small>
</p>

<footer>
  <small>&copy; 2025 Company Name. All rights reserved.</small>
</footer>

Subscript and Superscript

<sub> (Subscript)

<p>H<sub>2</sub>O is the chemical formula for water.</p>

<p>CO<sub>2</sub> is carbon dioxide.</p>

<sup> (Superscript)

<p>E = mc<sup>2</sup></p>

<p>4<sup>th</sup> of July</p>

<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

<p>Footnote reference<sup><a href="#fn1">1</a></sup></p>

4. Lists

Unordered Lists (<ul>)

Use case: Items with no specific order

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Rendered as:

• HTML
• CSS
• JavaScript

Nested lists:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Node.js</li>
      <li>Ruby</li>
    </ul>
  </li>
</ul>

Ordered Lists (<ol>)

Use case: Items with specific order or sequence

<ol>
  <li>Open VS Code</li>
  <li>Create new file</li>
  <li>Write HTML code</li>
  <li>Save the file</li>
</ol>

Rendered as:

1. Open VS Code
2. Create new file
3. Write HTML code
4. Save the file

Attributes:

<ol start="5">
  <li>Step 5</li>
  <li>Step 6</li>
  <li>Step 7</li>
</ol>

<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

<ol type="A">  
  <li>Section A</li>
  <li>Section B</li>
</ol>

<ol type="a">  
  <li>Item a</li>
  <li>Item b</li>
</ol>

<ol type="I">  
  <li>Chapter I</li>
  <li>Chapter II</li>
</ol>

<ol type="i">  
  <li>Part i</li>
  <li>Part ii</li>
</ol>

Nested ordered lists:

<ol>
  <li>Phase 1: Fundamentals
    <ol type="a">
      <li>HTML Basics</li>
      <li>CSS Basics</li>
      <li>JavaScript Basics</li>
    </ol>
  </li>
  <li>Phase 2: Intermediate
    <ol type="a">
      <li>Responsive Design</li>
      <li>DOM Manipulation</li>
    </ol>
  </li>
</ol>

Description Lists (<dl>)

Use case: Term-definition pairs, metadata, key-value pairs

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the presentation of web pages</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web interactivity</dd>
</dl>

Components:

• <dt> - Term/name (definition term)
• <dd> - Description/value (definition description)

Multiple descriptions per term:

<dl>
  <dt>Firefox</dt>
  <dd>A free, open-source web browser</dd>
  <dd>Developed by Mozilla Foundation</dd>

  <dt>Chrome</dt>
  <dd>A web browser developed by Google</dd>
  <dd>Based on the Chromium project</dd>
</dl>

Practical example (glossary):

<h2>Web Development Glossary</h2>
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface - a way for programs to communicate</dd>

  <dt>DOM</dt>
  <dd>Document Object Model - a programming interface for HTML documents</dd>

  <dt>SEO</dt>
  <dd>Search Engine Optimization - improving visibility in search results</dd>
</dl>

5. Quotes and Citations

Inline Quotes: <q>

Use case: Short quotes within text

<p>Benjamin Franklin said, <q>Tell me and I forget, teach me and I may remember, involve me and I learn.</q></p>

Rendered with quotation marks automatically: Benjamin Franklin said, "Tell me and I forget..."

Block Quotes: <blockquote>

Use case: Long quotes (multiple lines or paragraphs)

Example structure:

<blockquote cite="https://example.com/source">
  <p>Quoted text goes here...</p>
  <footer>— Author Name</footer>
</blockquote>

With citation:

<blockquote>
  <p>Quote text here.</p>
  <cite>Source Title</cite>
</blockquote>

Citations: <cite>

Use case: Title of creative work (book, article, song, movie)

<p>I just finished reading <cite>The Pragmatic Programmer</cite>.</p>

<p>My favorite movie is <cite>The Matrix</cite>.</p>

<p>According to <cite>A List Apart</cite>, responsive design is essential.</p>

Note: <cite> is for titles, not author names

<p>As stated in <cite>Clean Code</cite> by Robert Martin...</p>

<p>As <cite>Robert Martin</cite> states...</p>

6. Code and Technical Content

Inline Code: <code>

Use case: Short code snippets within text

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

<p>The <code>&lt;h1&gt;</code> element represents the main heading.</p>

<p>To declare a variable, use <code>let myVariable = 10;</code></p>

Code Blocks: <pre> + <code>

Use case: Multi-line code with preserved formatting

<pre><code>function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</code></pre>

<pre> preserves:

• Whitespace
• Line breaks
• Indentation

Example with syntax highlighting hint:

<pre><code class="language-javascript">
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]
</code></pre>

Keyboard Input: <kbd>

Use case: Keys users should press

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

<p>Save file with <kbd>Cmd</kbd> + <kbd>S</kbd> (Mac) or <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows).</p>

<p>To open DevTools, press <kbd>F12</kbd>.</p>

Sample Output: <samp>

Use case: Sample output from computer program

<p>If successful, you'll see:</p>
<samp>
Server started on port 3000
Database connected successfully
Ready to accept requests
</samp>

Variables: <var>

Use case: Mathematical or programming variables

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

<p>If <var>x</var> = 5 and <var>y</var> = 3, then <var>x</var> + <var>y</var> = 8</p>

7. Abbreviations and Definitions

Abbreviations: <abbr>

Use case: Abbreviations and acronyms

<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

<p>Use <abbr title="Hypertext Markup Language">HTML</abbr> for structure.</p>

<p>The <abbr title="United States of America">USA</abbr> has 50 states.</p>

Accessibility: Hover shows full expansion, screen readers may announce it

Definitions: <dfn>

Use case: Term being defined

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

<p>A <dfn id="browser">browser</dfn> is software for accessing the web.</p>

<p>
  <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
  is used for styling web pages.
</p>

8. Special Characters & Entities

HTML Entities

Some characters have special meaning in HTML and must be escaped.

Common entities:

Usage Examples

<p>To create a heading, use <h1>Title</h1></p>

<p>To create a heading, use &lt;h1&gt;Title&lt;/h1&gt;</p>

<footer>&copy; 2025 Company Name</footer>

<p>Price: $99&nbsp;USD</p>

<p>Caf&eacute; or Café (both work with UTF-8)</p>

9. Practical Examples

Article with Rich Typography

<article>
  <header>
    <h1>The Art of Web Typography</h1>
    <p class="meta">
      Published on <time datetime="2025-01-05">January 5, 2025</time>
      by <span class="author">Jane Doe</span>
    </p>
  </header>

  <p class="lead">
    <strong>Typography</strong> is the art of arranging type to make written language
    <em>legible</em>, <em>readable</em>, and <em>appealing</em> when displayed.
  </p>

  <p>
    Good typography requires understanding of concepts like
    <dfn>kerning</dfn> (spacing between characters) and
    <dfn>leading</dfn> (spacing between lines).
  </p>

  <blockquote cite="https://example.com">
    <p>Typography is two-dimensional architecture, based on experience and imagination.</p>
    <cite>Hermann Zapf</cite>
  </blockquote>

  <h2>Key Principles</h2>
  <ul>
    <li><strong>Readability</strong> - Text must be easy to read</li>
    <li><strong>Hierarchy</strong> - Important content stands out</li>
    <li><strong>Consistency</strong> - Uniform styling throughout</li>
  </ul>

  <p>
    <small>Based on <cite>The Elements of Typographic Style</cite></small>
  </p>
</article>

Technical Documentation Example

<section>
  <h2>Installation Guide</h2>

  <p>To install <abbr title="Node Package Manager">npm</abbr>, follow these steps:</p>

  <ol>
    <li>Download Node.js from <a href="https://nodejs.org">nodejs.org</a></li>
    <li>Run the installer</li>
    <li>Verify installation: <code>npm --version</code></li>
  </ol>

  <p><strong>Note:</strong> Make sure you have administrator privileges.</p>

  <h3>Common Commands</h3>

  <dl>
    <dt><code>npm install &lt;package&gt;</code></dt>
    <dd>Install a package locally</dd>

    <dt><code>npm install -g &lt;package&gt;</code></dt>
    <dd>Install a package globally</dd>
  </dl>
</section>

10. Practical Exercises

Exercise 2.2.1: Text Formatting Basics

Create an HTML page with:

1. A main heading using <h1>
2. Three paragraphs with different formatting:
   • First paragraph with <em> emphasis
   • Second paragraph with <strong> importance
   • Third paragraph with both <em> and <strong>
3. Use <br> to format an address
4. Add an <hr> between sections

Exercise 2.2.2: Lists Practice

Create:

1. An unordered list of your favorite programming languages
2. An ordered list of steps to make coffee
3. A nested list showing:
   • Web Technologies
     • Frontend (HTML, CSS, JavaScript)
     • Backend (Python, Node.js)
4. A description list of 5 web development terms

Exercise 2.2.3: Quotes and Citations

Create a blog post excerpt with:

1. An inline quote using <q>
2. A block quote using <blockquote>
3. Proper citations using <cite>
4. Include the cite attribute with a URL

Exercise 2.2.4: Code Documentation

Write a tutorial section that includes:

1. Inline code snippets using <code>
2. A multi-line code block using <pre><code>
3. Keyboard shortcuts using <kbd>
4. Sample output using <samp>
5. Abbreviations with <abbr> and title attributes

11. Knowledge Check

Question 1: What's the difference between <em> and <i>?

Question 2: When should you use <strong> vs <b>?

Question 3: What's the purpose of the <abbr> element's title attribute?

Question 4: When should you use a description list (<dl>) instead of an ordered/unordered list?

Question 5: Why must you use < and > instead of < and > in text?

Question 6: What's the difference between <q> and <blockquote>?

12. Common Mistakes to Avoid

Using <br> for Spacing

<p>First paragraph</p>
<br><br><br>
<p>Second paragraph</p>

<p style="margin-bottom: 3rem;">First paragraph</p>
<p>Second paragraph</p>

Nesting Block Elements in <p>

<p>
  <div>This will break HTML structure</div>
</p>

<div>
  <p>Paragraph inside block element</p>
</div>

Using Formatting for Semantics

<b>Section Title</b>
<p>Content...</p>

<h2>Section Title</h2>
<p>Content...</p>

Forgetting to Escape HTML Characters

<p>Use the <div> element</p>

<p>Use the &lt;div&gt; element</p>

13. Key Takeaways

• Use semantic elements (<em>, <strong>) over presentational ones (<i>, <b>) when appropriate
• <em> for emphasis that changes meaning, <i> for technical terms/foreign words
• <strong> for importance, <b> for keywords without importance
• Choose correct list type: <ul> (unordered), <ol> (ordered), <dl> (term-definition)
• <q> for inline quotes, <blockquote> for block quotes
• <code> for inline code, <pre><code> for code blocks
• Use HTML entities for special characters (<, >, ©, etc.)
• <abbr> with title attribute for accessibility
• Don't use <br> for spacing - use CSS instead

14. Further Resources

Official Documentation:

• MDN Text Fundamentals
• HTML Living Standard - Text

Typography:

• Practical Typography
• Google Fonts

HTML Entities:

• HTML Entity Reference
• Complete Entity List

Next Steps

Excellent! You've mastered HTML text formatting and typography.

In Lesson 2.3: Links & Navigation, you'll learn how to create hyperlinks, build navigation menus, and implement effective site navigation patterns.