Web Development - HTML Formatting
HTML Text Formatting
HTML provides several elements for formatting text, such as making it bold, italic, highlighted, or smaller. Formatting tags help you emphasize parts of your content.
Bold and Strong Text
In HTML, to make text bold, you can use either <b> or <strong>.
<b>- makes text bold (visual only)<strong>- indicates important text (semantic)
Example
Bold and strong text:
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
Try it Yourself »
Italic and Emphasized Text
To make text italic, you can use either <i> or <em>.
<i>- italic text (visual only)<em>- emphasizes text (semantic meaning)
Example
Italic and emphasized text:
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
Try it Yourself »
Tip: Use <em> and <strong> for meaning, not just appearance. Screen readers give them emphasis for accessibility.
Marked, Small, Deleted, and Inserted Text
HTML includes tags for special text effects like highlighting, reducing size, showing deletions, and insertions:
Example
Various text formats:
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>smaller</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
Try it Yourself »
<mark>- highlights text (like a marker)<small>- makes text smaller<del>- shows deleted text (usually with a line through it)<ins>- shows inserted text (usually underlined)
Subscript and Superscript
The <sub> and <sup> elements are used for subscript and superscript text:
Example
Subscript and superscript text:
<p>Water formula: H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>
Try it Yourself »
Combining Formatting
You can combine multiple formatting tags to style and emphasize text in different ways:
Example
Combining tags:
<p>This is <b><i>bold and italic</i></b> text.</p>
<p>This is <em><mark>important and highlighted</mark></em> text.</p>
Try it Yourself »
Tip: Be careful not to overuse formatting - too many styles can make text harder to read.
Summary
<b>and<strong>- bold or important text<i>and<em>- italic or emphasized text<mark>- highlighted text<small>- smaller text<del>and<ins>- deleted and inserted text<sub>and<sup>- subscript and superscript
Now that you know the basic HTML elements, let's put them together in a small hands-on example. In the next section, you will build a simple profile page using only the tags you've learned so far.
Next » HTML Project: Simple Page
