HTML tag names are not case-sensitive, but the full answer requires understanding HTML vs XHTML, attributes, event handlers, and best practices. Here is the complete explanation.
✅ 1. Are HTML tags case-sensitive?
✔️ In HTML (HTML5)
No. HTML tags are NOT case-sensitive.
All of the following are treated exactly the same by the browser:
<p>hello</p>
<P>hello</P>
<p>HELLO</P>
The HTML parser converts tag names internally into lowercase, so the browser sees them identically.
✔️ HTML attributes are also NOT case-sensitive
These are all equivalent:
<input TYPE="text">
<input type="TEXT">
<input type="text">
✔️ HTML attribute values may or may not be case-sensitive
Depending on the attribute:
- Some values are case-sensitive (e.g., class names, IDs, file paths).
- Some values are not (e.g.,
type="text", boolean attributes).
(Details explained below.)
❗ 2. Exception: XHTML IS case-sensitive
XHTML is HTML written as XML.
XML is case-sensitive, so:
<P></P>
is not valid XHTML, and:
<p></P>
is a mismatched tag error.
XHTML rules:
- Tags must be lowercase
- Attributes must be lowercase
- All tags must be closed
- Attribute values must be quoted
XHTML is strict, while HTML5 is lenient.
🟦 3. Case sensitivity in attributes (important details)
✔️ Attribute names are NOT case-sensitive
These are identical:
<input disabled>
<input DISABLED>
<input Disabled>
❗ 4. Attribute values may be case-sensitive
A. Some values ARE case-sensitive
These must be lower/upper exactly as intended:
✔️ Class names (case-sensitive)
<span class="Button">...</span>
<span class="button">...</span>
→ Different classes.
✔️ ID values (case-sensitive in JavaScript and CSS)
<div id="Menu"></div>
document.getElementById("menu") // not found
✔️ File paths (case-sensitive on Linux servers)
<img src="Logo.png"> // correct?
<img src="logo.png"> // may fail
B. Some values are NOT case-sensitive
Examples:
<input type="TEXT">
<input type="text">
Both refer to the same control type.
Boolean attributes:
checked, CHECKED, Checked
All behave the same.
🟩 5. Case sensitivity in JavaScript & CSS inside HTML
✔️ JavaScript IS case-sensitive
document.getElementById("name");
document.getElementById("Name"); // different
✔️ CSS selectors are case-sensitive for:
- class names
- IDs
- custom attributes
But HTML tag selectors are generally case-insensitive on HTML documents.
🟧 6. Email in HTML forms
Email addresses before the @ symbol may be case-sensitive, depending on mail server configuration.
HTML does not change this behavior.
🧠 7. Best Practice
Even though HTML is not case-sensitive, the industry standard is:
✔️ Use lowercase for:
- Tags
- Attributes
- Attribute values (unless needed otherwise)
Example:
<input type="text" id="username" class="form-field">
This improves:
- readability
- maintainability
- compatibility with XHTML-style tools
- reduces developer mistakes
🏁 Summary Table
| HTML Component | Case-Sensitive? | Notes |
|---|---|---|
| Tag names | ❌ No | <DIV> = <div> |
| Attribute names | ❌ No | CLASS = class |
| Attribute values | ⚠️ Sometimes | IDs & classes are case-sensitive |
| CSS class names | ✔️ Yes | .Menu ≠ .menu |
| IDs | ✔️ Yes | #Header ≠ #header |
| File paths | ✔️ Yes (on Linux) | May break on servers |
| JavaScript | ✔️ Yes | Variable names differ |
| XHTML tags | ✔️ Yes | Must be lowercase |
Other Courses:
