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" 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
class values are flexible, but the one that’s most adopted universally are as follows:
idvalues should use
classvalues should use
kebab-casefollowing CSS standards
Here’s an example of the recommended
<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 😉