HTML case sensitivity depends on the HTML version and the document parser that you used to process the file.
For HTML5, the HTML tags and attribute names are case-insensitive, which means that you can mix the cases.
Modern browsers like Google Chrome and Mozilla Firefox will automatically parse all your HTML tags and attribute names to lowercase.
The following examples will be parsed correctly by modern browsers:
<body>
<h1>Hello World</h1>
</body>
When you mix the case as in the following example, the browser will parse all HTML tags and convert them into lowercase:
<Body>
<H1 id="header">Hello World</H1>
<IMG SRC="image.png" />
</Body>
While HTML tags and attribute names are case-insensitive, the attribute value you assign to a tag is case-sensitive.
This means that id="header" and id="HeaDer" will create two different ids for your HTML tags:
<body>
<h1 id="header">Hello World</h1>
<h2 id="HeaDer">Subtitle</h2>
</body>
The naming conventions for HTML id and class values are flexible, but the one that’s most adopted universally are as follows:
- HTML
idvalues should usecamelCasefollowing JavaScript standards - HTML
classvalues should usekebab-casefollowing CSS standards
This is because HTML ids are generally used for JavaScript manipulation, while classes are used to style the elements using CSS.
Here’s an example of the recommended id and class values:
<body>
<h1 id="documentHeader" class="text-center bg-blue-50">Hello World</h1>
</body>
In short, HTML documents are case-insensitive except for the attribute values, but the accepted standard for HTML is to use lowercase letters because they are easier to write and read.
Modern browsers will convert your HTML tags and attribute names to lowercase during the parsing process anyway, so please use lowercase letters.
Otherwise, your developer friends might talk to you less 😉