Skip to main content

๐ŸŽจ HTML Text Formatting ๐Ÿš€

Master text appearance and structure in HTML using these tags and best practices.

๐Ÿ›๏ธ Core Formatting Tagsโ€‹

Bold: <b> & <strong> ๐Ÿ’ชโ€‹

  • <b>: Bold, style only
    <b>Attention!</b> โ†’ Attention!

  • <strong>: Important, for meaning & accessibility
    <strong>Warning!</strong> โ†’ Warning!

Italics: <i> & <em> โœ๏ธโ€‹

  • <i>: Italicizes (terms, names)
    <i>Book Title</i> โ†’ Book Title
  • <em>: Emphasizes (adds vocal stress)
    <em>Really important!</em> โ†’ Really important!

Underline: <u> โš ๏ธโ€‹

  • Use sparingly โ€” often confused with links
    <u>Caution</u> โ†’ Caution

โœจ Enhanced Formattingโ€‹

Highlight: <mark> ๐Ÿ–๏ธโ€‹

  • Highlights text
    <mark>Found match</mark> โ†’ Found match

Small Text: <small> ๐Ÿ”โ€‹

  • Deemphasized, fine print
    <small>Terms apply</small> โ†’ Terms apply

Strikethrough & Deleted: <s>, <del> ๐Ÿ—‘๏ธโ€‹

  • <del>: Show deleted from document
    <del>Outdated info</del> โ†’ Outdated info
  • <s>: Show no longer correct
    <s>Incorrect price</s> โ†’ Incorrect price

Inserted: <ins> โž•โ€‹

  • Underlined, show additions
    <ins>Updated info</ins> โ†’ Updated info

Subscript & Superscript: <sub>, <sup> ๐Ÿงชโ€‹

  • <sub>: Lowered text
    H<sub>2</sub>O โ†’ Hโ‚‚O
  • <sup>: Raised text
    x<sup>2</sup>, July 26<sup>th</sup> โ†’ xยฒ , July 26แต—สฐ

Quotation & Citation: <blockquote>, <q>, <cite> ๐Ÿ“โ€‹

  • <blockquote>: For long quotations (adds indentation) 
    <blockquote>
        "HTML formatting powers web content."
    </blockquote>
  • <q>: For short, inline quotes
    <q>Best practices matter.</q> โ†’ "Best practices matter."
  • <cite>: Reference sources
    <cite>MDN Web Docs</cite> โ†’ MDN Web Docs

Abbreviation & Definition: <abbr>, <dfn> ๐Ÿง โ€‹

  • <abbr>: Show abbreviations with tooltip <abbr title="HyperText Markup Language">HTML</abbr> โ†’ HTML (with tooltip)
  • <dfn>: Define a term
    <dfn>HTML</dfn> means Hypertext Markup Language

Code & Preformatted: <code>, <pre>, <kbd>, <samp>, <var> ๐Ÿ’ปโ€‹

  • <code>: Code snippet
    <code>console.log('Hi!')</code> โ†’ console.log('Hi!')

  • <pre>: Preformatted (respects whitespace/line breaks)

    <pre>
      This is
      preformatted text
    </pre>

  • <kbd>: Keyboard input
    <kbd>Ctrl + S</kbd> โ†’ Ctrl + S

  • <samp>: Sample output
    <samp>Success!</samp> โ†’ Success!

  • <var>: Variables in code/math
    <var>username</var> โ†’ username

๐ŸŒ Additional Semantic Elementsโ€‹

Address & Contact: <address> ๐Ÿ“โ€‹

  • Contact information for article/page author 
    <address>
      Written by <a href="mailto:john@example.com">John Doe</a><br>
      Visit us at: 123 Main St, City
    </address>

Time & Dates: <time> โฐโ€‹

  • Machine-readable dates and times 
    <time datetime="2024-01-15">January 15, 2024</time>
    <time datetime="2024-01-15T14:30">2:30 PM today</time>

Ruby Annotations: <ruby>, <rt>, <rp> ๐Ÿˆณโ€‹

  • For East Asian typography (pronunciation guides) 
    <ruby>
      ๆผขๅญ— <rp>(</rp><rt>Kanji</rt><rp>)</rp>
    </ruby>

Bidirectional Text: <bdi>, <bdo> ๐Ÿ”„โ€‹

  • <bdi>: Isolate text with different direction
  • <bdo>: Override text direction 
    <bdo dir="rtl">This text goes right to left</bdo>

Generic Containers: <span>, <div> ๐Ÿ“ฆโ€‹

  • <span>: Inline generic container
  • <div>: Block-level generic container 
    <p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>

๐Ÿ† Best Practicesโ€‹

HTML = Structure & Meaning
CSS = Style & Appearance

<strong class="highlight">Alert: Action required now!</strong>
.highlight { background: yellow; color: black; font-style: italic; }

๐ŸŽฏ Key Guidelinesโ€‹

  • Use semantic tags for accessibility & SEO
  • Separate content from presentation - keep styling with CSS
  • Choose tags by meaning, not appearance
  • Test with screen readers for accessibility
  • Validate your HTML for browser compatibility

๐ŸŒŸ Complete Reference Tableโ€‹

TagPurposeExampleOutput
<b>Bold (style)<b>Bold</b>Bold
<strong>Bold (importance)<strong>Important</strong>Important
<i>Italic (style)<i>Italic</i>Italic
<em>Italic (emphasis)<em>Emphasis</em>Emphasis
<u>Underline<u>Underline</u>Underline
<mark>Highlight<mark>Highlight</mark>Highlight
<small>Small text<small>Footnote</small>Footnote
<del>Deleted (strike)<del>Deleted</del>Deleted
<s>Strikethrough<s>Wrong</s>Wrong
<ins>Inserted<ins>Added</ins>Added
<sub>SubscriptH<sub>2</sub>OHโ‚‚O
<sup>Superscriptx<sup>2</sup>xยฒ
<blockquote>Long quote<blockquote>Quote</blockquote>Indented quote
<q>Short quote (inline)<q>Short quote</q>"Short quote"
<cite>Citation<cite>Source</cite>Source
<abbr>Abbreviation<abbr title="World Wide Web">WWW</abbr>WWW (tooltip)
<dfn>Definition<dfn>Word</dfn>Word
<code>Code<code>alert()</code>alert()
<pre>Preformat<pre>text</pre>Preformatted
<kbd>Keyboard input<kbd>Ctrl+C</kbd>Ctrl+C
<samp>Sample output<samp>Output</samp>Output
<var>Variable<var>variable</var>variable
<time>Date/time<time>2024-01-15</time>2024-01-15
<address>Contact info<address>Contact</address>Contact info

Let's Have a quick recapโ€‹

1. What does HTML stand for?

2. Which tag is used to define the main visible content of an HTML document?

3. What does the `alt` attribute in the <img> tag do?

4. Which of the following elements is a block-level element?

5. Which of these tags is used to create a hyperlink in HTML?

6. What will happen if you place a <div> tag inside a <strong> tag?

7. Which tag is used to insert a line break in HTML?

8. Which HTML attribute opens a link in a new browser tab?

9. What is the purpose of semantic tags like <header>, <article>, and <footer>?

10. Which display behavior is true for inline elements?

๐Ÿ”— Additional Resourcesโ€‹

Happy Coding! ๐Ÿ‘จโ€๐Ÿ’ปโœจโ€‹