📚 Utility Tags Overview

📌 Key Concept

HTML provides several utility tags for specific formatting needs. <br> creates line breaks, <hr> creates thematic breaks (horizontal lines), <abbr> defines abbreviations, and <time> provides semantic date/time information.

💻 Code Examples

📝 Example 1: Line Break (<br>)

Use <br> to force a line break within text (e.g., addresses, poetry).

<p> 123 Main Street<br> New York, NY 10001<br> United States </p>

▶️ Output:

123 Main Street
New York, NY 10001
United States

📝 Example 2: Horizontal Rule (<hr>)

Use <hr> to separate content sections.

<h4>Section 1</h4> <p>Content for section 1...</p> <hr> <h4>Section 2</h4> <p>Content for section 2...</p>

▶️ Output:

Section 1

Content for section 1...


Section 2

Content for section 2...

📝 Example 3: Abbreviation (<abbr>)

Use <abbr> for acronyms and abbreviations. Hover to see the full term.

<p>The <abbr title="World Wide Web">WWW</abbr> was invented by Tim Berners-Lee.</p>

▶️ Output:

The WWW was invented by Tim Berners-Lee.

📝 Example 4: Time (<time>)

Use <time> to mark up dates and times for machine readability.

<p>The concert is on <time datetime="2025-11-15T20:00">November 15 at 8 PM</time>.</p>

▶️ Output:

The concert is on .

📝 Example 5: Data (<data>)

Use <data> to link content with a machine-readable translation.

<p>Product: <data value="SKU-123">Blue T-Shirt</data></p>

▶️ Output:

Product: Blue T-Shirt

🔧 Tag Details

Tag Description Attributes
<br> Line break (void element) None
<hr> Horizontal rule (void element) Global attributes
<abbr> Abbreviation title (full description)
<time> Date/Time datetime (ISO format)
<data> Machine-readable data value

🎓 Key Takeaways

  • Use <br> for line breaks, not for spacing between paragraphs (use CSS margins instead).
  • Use <hr> to separate topics or sections.
  • <abbr> improves accessibility by providing full definitions.
  • <time> helps search engines and calendars understand dates.