HTML Working with Text

Working with Text in HTML

HTML contains several elements for defining text with special meaning. You can format and organize text using different tags to create emphasis, structure, and presentation styles.

HTML Formatting Elements

Formatting elements are designed to display special types of text:

• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked or highlighted text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

Bold and Strong Elements

The <b> element defines bold text, while the <strong> element represents strong importance.

<b>This text is bold</b>
<strong>This text is important</strong>
            

Italic and Emphasized Elements

The <i> element represents italicized text, often used to indicate technical terms or thoughts. The <em> element adds emphasis, often causing the text to be read differently by screen readers.

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

Marked and Small Text

The <mark> element highlights or marks text. The <small> element renders smaller text.

<mark>This text is highlighted</mark>
<small>This is smaller text</small>
            

Deleted and Inserted Text

Use the <del> tag for deleted text, often displayed as struck-through, and <ins> for inserted text, typically underlined.

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

Subscript and Superscript

The <sub> element is used to display subscript text (e.g., H₂O), and the <sup> element is used to display superscript text (e.g., E = mc²).

<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
            

Organizing Text in HTML

HTML Paragraphs

The <p> tag defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space before and after a paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
            

HTML Display

HTML does not preserve extra spaces or lines in the code. The browser automatically removes any extra spaces when displaying content.

<p>
  This paragraph contains    a lot of spaces,
  but the browser ignores it.
</p>
            

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, most often displayed as a horizontal line.

<h1>Heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>Heading 2</h2>
<p>This is some more text.</p>
            

HTML Line Breaks

The <br> tag is used for line breaks without starting a new paragraph.

<p>This is<br>a paragraph<br>with line breaks.</p>
            

Preformatted Text

The <pre> tag defines preformatted text. The text inside a <pre> element preserves both spaces and line breaks.

<pre>
  This is preformatted text.
  It preserves spacing.
</pre>