Tag names and attribute names are case-insensitive in HTML. Attribute values, on the other hand, are case-sensitive.
All tag names and attribute names in HTML documents are converted to ASCII lowercase—so it doesn’t matter if you use uppercase letters, lowercase letters, or any combination of the two.
With that said, the HTML specification uses only lowercase letters in its HTML element definitions. So you could say that, in one way or another, the use of all lowercase letters is assumed if not encouraged by the documentation.
An Example With the Doctype Declaration
To understand how this works, let’s take a look at one of the most hotly debated tags in HTML5, the doctype declaration.
If there’s one tag that led you and most readers of this post here, it’s the doctype declaration! Because even in the HTML references like MDN Docs, it’s specified with capital letters.
You can declare the doctype of your HTML document with all uppercase letters:
<!DOCTYPE HTML>But you can also declare your HTML document’s doctype with all lowercase letters, as is the case with the most popular starter HTML5 template HTML5 Boilerplate:
<!doctype html>You can even declare it with a combination of uppercase and lowercase letters:
<!DOCTYPE html>Run these options through the W3C CSS validator, and you will see that they are considered valid CSS3 code.
Should You Use Uppercase or Lowercase Letters?
I write my HTML markup with all lowercase letters, and so does every web developer I know. But, as we already established, that doesn’t mean that you should, too.
The most important thing about your HTML markup (and your source code as a whole, for that matter) is to keep it consistent. This makes it evolvable and maintainable for you and anyone else who touches your code.
Whichever option you prefer, make sure you discuss and agree on it with the rest of your team, then document it in your coding convention/style guide and adhere to it religiously.
Why This Is Important
Another thing to consider is that the languages that need to interact with HTML—namely, Cascading Style Sheets and JavaScript—are case-sensitive.
For example, if you have the following paragraph:
<p id="Test">Paragraph</p>And you tried to target it with a CSS rule with a lowercase selector:
#test {
color: red;
}It wouldn’t work because the class name and id selectors on CSS are case-sensitive.
So, to make your CSS rule work, you would have to refactor its selector to respect the capitalization of the #id attribute’s value in the HTML markup:
#Test {
color: red;
}The same applies to your JavaScript code. JavaScript is a case-sensitive language, and a number of methods in JavaScript use CSS selectors, also case-sensitive, to query for HTML elements.
So the more standard you keep your HTML markup, the better. Yet another reason to keep to all-lowercase letters for your tag and attribute names.
