Module 3: Text Content & Formatting

1. Text Elements

These elements create the foundational blocks of text content on a webpage.

Headings (<h1> to <h6>)

HTML has six levels of headings. <h1> is the most important (usually the main title), and <h6> is the least important.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Paragraphs (<p>)

The <p> element defines a block of text. Browsers automatically add some space (margin) before and after a paragraph.

<p>This is a simple paragraph of text.</p>

Line Break (<br>)

If you want a line break without starting a new paragraph, use the <br> tag. It is an empty tag, meaning it does not have a closing tag.

<p>This text is on the first line.<br>This text is on the second line.</p>

Horizontal Rule (<hr>)

The <hr> tag creates a thematic break or a horizontal line to separate content.

<p>First section of content.</p>
<hr>
<p>Second section of content.</p>

Preformatted Text (<pre>)

Normally, browsers ignore extra spaces and line breaks in HTML. The <pre> tag preserves both spaces and line breaks exactly as they are typed in the code.

<pre>
  Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.
</pre>

Blockquote (<blockquote>)

Used to define a section that is quoted from another source. Browsers typically indent blockquotes.

<blockquote>
  "The web is more a social creation than a technical one." 
  - Tim Berners-Lee
</blockquote>

Code (<code>) and Keyboard (<kbd>)

The <code> tag defines a fragment of computer code. The <kbd> tag defines keyboard input.

<p>Use the <code>console.log()</code> function to print messages.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

2. Text Formatting

HTML contains several elements for defining text with a special meaning.

Bold and Important (<b> and <strong>)

• <b>: Makes text bold for visual emphasis without implying extra importance.
• <strong>: Makes text bold and indicates that the text is semantically important (read differently by screen readers).

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

Italic and Emphasized (<i> and <em>)

• <i>: Makes text italicized (often used for technical terms, names of ships, foreign words).
• <em>: Emphasizes text semantically (screen readers use verbal stress).

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

Underline (<u>)

The <u> tag underlines text. It is generally recommended to avoid underlining non-link text on the web, as users expect underlined text to be clickable.

Mark / Highlight (<mark>)

The <mark> element defines text that should be marked or highlighted for reference purposes.

<p>Do not forget to buy <mark>milk</mark> today.</p>

Small Text (<small>)

Defines smaller text, often used for copyright notices or fine print.

Deleted and Inserted Text (<del> and <ins>)

Often used together to show edits or updates to a document.

• <del>: Displays a strike-through line to indicate deleted text.
• <ins>: Displays an underline to indicate inserted text.

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

Subscript and Superscript (<sub> and <sup>)

• <sub>: Lowers the text (e.g., H₂O).
• <sup>: Raises the text (e.g., X²).

<p>Water is H<sub>2</sub>O and Einstein said E = mc<sup>2</sup>.</p>