HTML Address and Editorial Tags
HTML provides tags not just for structure, but also for representing meaning—like marking deleted text, small print, or even giving contact information.
Let’s go through these handy semantic and editorial tags.
📬 1. <address>
– Contact Info
Use this to indicate contact details for the page or content owner. It’s usually displayed in italic and rendered as a block.
✅ Syntax:
<address>
Written by <a href="mailto:info@w3buddy.com">W3Buddy</a><br>
Visit us at: <br>
W3Buddy, New Delhi, India
</address>
- Should not be used for arbitrary physical addresses.
- Best used in footer or near author details.
✏️ 2. <del>
and <ins>
– Deletions and Insertions
These tags are useful when editing content or showing changes.
✅ Syntax:
<p>Price: <del>₹999</del> <ins>₹799</ins></p>
<del>
shows text that was removed<ins>
shows text that was added
📌 Browsers usually style <del>
with a strikethrough and <ins>
with an underline
❌ 3. <s>
– Strikethrough (No Longer Relevant)
Unlike <del>
, which indicates removed content, <s>
is used for things that are no longer accurate or relevant, like outdated prices or names.
✅ Syntax:
<p><s>Old Product Name</s> New Product Name</p>
📝 4. <small>
– Fine Print or Legal Text
Used for disclaimers, fine print, or side comments. Displays in a smaller font.
✅ Syntax:
<p><small>Terms and conditions apply.</small></p>
🔊 5. <strong>
and <em>
– Emphasis and Importance
These tags are semantic alternatives to <b>
and <i>
:
<strong>
= Strong importance (rendered bold)<em>
= Emphasis (rendered italic)
✅ Syntax:
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p><em>Note:</em> Back up your data before proceeding.</p>
💡 Great for accessibility—screen readers often change tone for these.
🧪 Try This in Your HTML
<address>
Contact us at <a href="mailto:info@example.com">info@example.com</a><br>
123 Web Lane, Internet City, Webland
</address>
<p>Price: <del>$50</del> <ins>$40</ins></p>
<p><s>iPhone 12</s> iPhone 15 Pro</p>
<p><small>*Limited time offer only</small></p>
<p><strong>Important:</strong> Keep your receipt.</p>
<p><em>Tip:</em> Refresh the page to see updates.</p>
💡 Quick Recap
Tag | Purpose |
---|---|
<address> | Author or contact info |
<del> | Content that was removed |
<ins> | Content that was added |
<s> | No longer relevant (but not deleted) |
<small> | Fine print or side notes |
<strong> | Strong importance (bold) |
<em> | Emphasized content (italic) |
👉 Coming Up Next:
Let’s now dive into HTML Entities—how to display reserved characters like <
, >
, &
, non-breaking spaces, and more.
📚 Next: HTML Entities