Is it bad to use uppercase letters for html tags?
The lower-case "requirement" is a legacy of xHTML, which explicitly required it.
Plain old HTML on the other hand does not follow the rigid struct requirements of XML, and does not therefore have the fixed requirement for use of case.
However developers have tended to stick with lower case as a convention anyway, mainly on the grounds that it's a lot easier to read when you're working on it, and easier to type. But it is only a convention; there's nothing forcing it. If you have existing code with upper case tags, they will work, and there's nothing stopping you continuing to write your tags that way.
One other thing to be aware of though: In all browsers, when the browser loads the HTML document and parses it, it converts it into a DOM (Document object model). If you then use the browser's built-in developer tools to inspect the site, when you view the DOM, all elements in the DOM will be shown as lower case, regardless of how they were written in the actual source code.
For this reason, if you stick with lower case, you'll find it easier to work with the developer tools, because the code you see in the DOM view will be more consistent with the source code you've written.
The only relevant parts of specifications say:
- HTML tag and attribute names are case insensitive.
- XHTML tag and attribute names are case sensitive and must be lower case
Stuff that isn't mentioned in any standard:
- Lower case is generally considered easier to read
- Lower case is most common (and what people are used to working with)
- Holding down the shift key or toggling CAPS LOCK all the time is a pain
Probably very minor, and I have no evidence to back it up, but I bet using lowercase tags would very marginally improve gzip/deflate compressibility of the page, since most text is also likely to be lowercase.
Front-end frameworks may rely on the lowercase convention
The other answers are correct, but another reason to write lowercase HTML (possibly more important than "stick to conventions") is that some front-end frameworks will rely on this convention to distinguish between HTML and user-defined components or templates (that typically start with a capital letter). React, Svelte, and Astro are some examples of this, as seen below.
This means that if you are working with a front-end framework it may be impossible to write your HTML tags with uppercase letters. If you are not working with a front-end framework, it may be much harder to use a one in the future.
Examples:
React
When an element type starts with a lowercase letter, it refers to a built-in component like
<div>
or<span>
and results in a string'div'
or'span'
passed toReact.createElement
. Types that start with a capital letter like<Foo />
compile toReact.createElement(Foo)
and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
Svelte
A lowercase tag, like , denotes a regular HTML element. A capitalised tag, such as
<Widget>
or<Namespace.Widget>
, indicates a component.
Astro
Note that an Astro component MUST begin with an uppercase letter. Astro will use this to distinguish between native HTML elements (
form
,input
, etc.) and your custom Astro components.