Labs ICT

HTML Formatting

← HTML Paragraphs
HTML Quotations →

HTML provides several elements for formatting text to emphasize, highlight, or style content. These formatting elements help improve readability and convey meaning to your users.

The formatting tags are divided into two groups: physical tags that are used to style the text (visual appearance of the text) and logical or semantic tags that add semantic value to the text parts (Examples: doing searching in search engines which keyword to be rank first, etc.)

Les't deep dive into fomatting tags in details:

The <b> and <strong> Tags

The <b> tag is a physical tag that stands for bold and it bolding a text, while the <strong> tag being a logical tag is used to emphasize the importance of the text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p><b>Bold text</b> - Important text</p>
    <p><strong>Strong text</strong> - Semantically important</p>
  </body>
</html>
Try it Yourself ->

The <i> and <em> Tags

The <i> tag make the target text italic, and it only responsive for vitual appearance of the enclose text without adding any extra importance. While the <em> tag is a logical tag that is used to emphasize the importance of the text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p><i>Italic text</i> - Alternative voice or mood</p>
    <p><em>Emphasized text</em> - Stressed emphasis</p>
  </body>
</html>
Try it Yourself ->

The <u> and <s> Tags

The <u> define to make effect for the encolse text by underlining it, while the <s> tag is to strikes through text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
<body>
  <p><u>Underlined text</u> - Unarticulated annotation</p>
  <p><s>Strikethrough text</s> - No longer relevant</p>
</body>
</html>
Try it Yourself ->

The <ins> and <del> Tags

The <ins> tag is used to define inserted text, and the <del> tag is used to define deleted text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p><ins>Inserted text</ins> - Added content</p>
    <p><del>Deleted text</del> - Removed content</p>
  </body>
</html>
Try it Yourself ->

The <sub> and <sup> Tags

Use <sub> subscript and <sup> superscript for mathematical expressions, chemical formulas, and citations: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>H<sub>2</sub>O is the chemical formula for water</p>
    <p>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup></p>
    <p>The Eiffel Tower is 324<sup>m</sup> tall</p>
    <p>CO<sub>2</sub> is carbon dioxide</p>
  </body>
</html>
Try it Yourself →

The <big> and <small> Tags

The <big> tag makes text bigger, while the <small> tag makes text smaller. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>Normal text <big>Big text</big> normal text</p>
    <p>Normal text <small>Small text</small> normal text</p>
  </body>
</html>
Try it Yourself →

The <mark> Tag

The <mark> tag highlights text for reference or notation. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p><mark>Highlighted text</mark> for reference or notation</p>
    <p>Search results: <mark>matching text</mark> is highlighted</p>
  </body>
</html>
Try it Yourself →

The <code> and <kbd> Tags

The <code> tag is used to define a piece of computer code, while the <kbd> tag is used to define keyboard input. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>Use <code>console.log()</code> for debugging</p>
    <p>The <kbd>Ctrl+C</kbd> shortcut copies text</p>
  </body>
</html>
Try it Yourself →

The <var>, and <samp> Tags

The <var> tag is used to define a variable, while the <samp> tag is used to define sample output from a computer program. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>Variable name: <var>username</var></p>
    <p>Program output: <samp>Hello, World!</samp></p>
  </body>
</html>
Try it Yourself →

The <abbr> and <dfn> Tags

The <abbr> tag defines an abbreviation or acronym, while the <dfn> tag defines a definition term. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <h2>Abbreviations</h2>  
    <p><abbr title="World Wide Web">WWW</abbr> was invented by Tim Berners-Lee</p>
    <p><abbr title="HyperText Markup Language">HTML</abbr> is used for web pages</p>
    <p><abbr title="Application Programming Interface">API</abbr> documentation</p>
   
    <h2>Definitions</h2>
    <dt><dfn>HTML</dfn></dt>
    <dd>HyperText Markup Language - used for creating web pages</dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>Cascading Style Sheets - used for styling web pages</dd>
  </body>
</html>
Try it Yourself →

The <bdo> Tag

The <bdo> tag reverses the text direction. Example: from left to right and right to left. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p><bdo dir="rtl">This text will be displayed right-to-left</bdo></p>
    <p><bdo dir="ltr">This text will be displayed left-to-right</bdo></p>
  </body>
</html>
Try it Yourself →

The <q> and <blockquote> Tags

The <q> tag defines an inline quotation. While the <blockquote> tag defines a long quotation. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <h2>Quotes</h2>
    <p>As Shakespeare said, <q>To be or not to be, that is the question</q>.</p>
    <p>The professor remarked, <q>Knowledge is power</q> during the lecture.</p>
    <h2>Blockquotes</h2>
    <blockquote>
      <p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.</p>
      <cite>Steve Jobs</cite>
    </blockquote>
  </body>
</html>
Try it Yourself →

The <cite> Tag

The <cite> tag defines the title of a work.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>The study was published in <cite>Nature Journal</cite> (Smith et al., 2023).</p>
    <p>According to <cite>The HTML Specification</cite>, this element is used for citations.</p>
  </body>
</html>
Try it Yourself →

The <time> Tag

The <time> element represents a specific time or date: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <p>We open at <time>10:00</time> every day.</p>
    <p>The meeting is scheduled for <time datetime="2024-12-25">Christmas</time>.</p>
    <p>Published on <time datetime="2024-03-15T09:00:00Z">March 15, 2024</time>.</p>
    <p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>
  </body>
</html>
Try it Yourself →

The <address> Tag

Use the <address> element for contact information:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Formating </title>
</head>
  <body>
    <address>
      <p>Author: John Doe</p>
      <p>Email: <a href="mailto:john@example.com">john@example.com</a></p>
      <p>Phone: <a href="tel:+1234567890">+1 234-567-890</a></p>
      <p>Address: 123 Main St, City, State 12345</p>
    </address>
  </body>
</html>
Try it Yourself →

Best Practices

✓ Do:

  • Use semantic elements when meaning matters
  • Use <strong> instead of <b> for important content
  • Use <em> instead of <i> for emphasis
  • Use <mark> for highlighting search results
  • Use <code> for inline code snippets
  • Keep formatting consistent throughout your site

✗ Don't:

  • Overuse formatting elements
  • Use <b> and <i> when semantic alternatives exist
  • Use underlines for non-links (confuses users)
  • Nest formatting elements unnecessarily
  • Use formatting instead of proper CSS styling
  • Forget to close formatting tags properly

🧪 Quick Quiz

Which tag is used to emphasize text?

← HTML Paragraphs
HTML Quotations →