Are HTML 5 Tags Case Sensitive?

Best practices for writing HTML 5 elements

HTML code for building a web form
HTML code for building a web form. Image courtesy Gary Conner / Photolibrary / Getty Images

One question that many new web design have is whether or not HTML 5 tags are case sensitive? The short answer is - "No".  HTML5 tags are not case sensitive, but that doesn't mean you shouldn't be strict in how you write your HTML markup! 

Back to XHTML

Before HTML5 came into the industry, web professionals would use a flavor of markup language called XHTML to build their webpages. 

When you write XHTML, you must write all standard tags in lowercase because XHTML is case sensitive.

This means that the tag <HTML> is a different tag than <html> in XHTML. You had to be very specific in how you coded an XHTML webpage and only use lowercase characters. This strict adherance was actually a benefit to many new web developers. Instead of being able to write markup with a mix of lowercase and uppercase, they knew that there was a strict format that must be followed. For anyone who cut their teeth in web design when XHTML was popular, the very idea that markup could be a mix of upper and lowercase letters seems alien and just plain wrong.

HTML5 Gets Loose

The versions of HTML prior to XHTML were not case-sensitive. HTML5 followed in that tradition and went away from the strict formatting requirements of XHTML.

So HTML 5, unlike XHTML, is not case-sensitive. This means that <HTML> and <html> and <HtMl> are all the same tag in HTML 5. If this looks like chaos to you, I feel your pain.

 

The idea behind HTML5 not being case-sensitive was to make it easier for new web professionals to learn the language, but as someone who teaches web design to new students, I can absolutely attest to the fact that this is not the case at all.

Being able to give students new to web design a definitive set of rules, such as "always write your HTML as lowercase", helps them as they try to learn all that they need to learn to be a web designer.

Giving them rules that are too flexible actually confuses meany learners instead of making it easier for them. 

I love the fact that the authors of the HTML5 spec were trying to help make it easier to learn by making it more flexible, but in this instance, I think they made a misstep.

Convention in HTML 5 is to Use Lowercase

While it is valid to write tags using any case you prefer when writing HTML 5, the convention is to use all lowercase for tags and attributes. This is in part because many more seasoned web developers who lived through the days of strict XHTML have carried over those best practices to HTML5 (and beyond). Those web professionals don't care that a mix of uppercase and lowercase letters are valid in HTML5 today, they will stick with what they know, which is all lowercase letters.

So much of web design knowledge is learning from others, especially from those who are more experienced in the industry. This means that new web developers will review the code of seasoned professionals and see all lowercase markup. If they emulate this code, that means that they too will write HTML5 in all lowercase.  This is what seems to be happening today.

Best Practices for Lettercasing

In my own experience, I find it best to always use lowercase letters for HTML code as well as for file names.

Because certain servers are case-sensitive when it comes to filenames (for example, "logo.jpg" will be seen differently than "logo.JPG"), if you have a workflow where you always use lowercase letters, you never need to question where casing could be the issue if you are experiencing problems like missing images. If you always use lowercase letters, you can discount that as being a problem as you debug site issues. This is the workflow that I teach to my students and which I use in my own web design work.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 12/2/16