HTML Advanced Topics

ADVERTISEMENT

Now that you’ve got a solid foundation, let’s cover some advanced concepts that will make your HTML cleaner, smarter, and more maintainable.

We’ll also look at what not to use anymore (deprecated tags 🚫).

🧪 1. Conditional Comments (for old IE only)

These are special HTML comments that only Internet Explorer (IE) used to understand.

Example:

<!--[if IE]>
  <p>You are using Internet Explorer.</p>
<![endif]-->

Or target versions:

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

⚠️ Modern browsers don’t support these. Only use if you absolutely must support legacy IE versions.

🧬 2. Global Attributes – Can Be Used on (Almost) Any Tag

These are standard attributes that you can apply to most HTML elements:

AttributeUse
idUnique identifier for an element
classApply styles or group elements
styleInline CSS
titleTooltip text on hover
langDefine the language
tabindexOrder for keyboard focus
hiddenHides the element
contenteditableMakes the content editable
draggableAllow element to be dragged
data-*Custom data storage (see below)

Example:

<p id="intro" class="highlight" lang="en" title="Tooltip here">Hello World!</p>

📦 3. data-* Attributes – Storing Custom Data in HTML

These are non-visible custom attributes used to store data on an element for use in JavaScript.

Syntax:

<div data-user-id="23" data-role="admin">W3Buddy</div>

Access via JS:

const div = document.querySelector('div');
console.log(div.dataset.userId); // "23"
console.log(div.dataset.role);   // "admin"

Use these when you need to attach extra data to an element without cluttering the DOM or using classes/IDs.

🚫 4. Deprecated Tags – What You Should NOT Use

These tags are outdated and should be avoided. They’re not supported or recommended in modern HTML.

Deprecated TagUse Instead
<font>CSS (font-family, color, etc.)
<center>CSS (text-align: center)
<bgsound><audio>
<strike><del> or <s>
<u>CSS text-decoration: underline
<applet>JavaScript or modern embedding
<acronym><abbr>

✅ Stick to semantic HTML and use CSS for presentation.

🧠 Summary – What You Learned

  • 🎯 Conditional comments = IE-only trick
  • 🧬 Global attributes = Universal HTML features like id, class, style, etc.
  • 📦 data- attributes* = Custom, invisible data for JS
  • 🚫 Deprecated tags = Don’t use them, use modern alternatives

These tools give you more flexibility while keeping your HTML clean and modern.

📘 Next Topic: HTML Final Wrap-Up

ADVERTISEMENT