Is it bad to use uppercase letters for html tags?
HtmlUppercaseLowercaseHtml Problem Overview
What is the best practice?
<HTML> or <html>
And why we should stick with one particular case?
However all browsers seems to interpret both cases and returns the expected output.
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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
Solution 3 - Html
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.
Solution 4 - Html
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 to React.createElement. Types that start with a
> capital letter like <Foo /> compile to React.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
<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.
Solution 5 - Html
It is important to use one particular case, to prevent confusion. But using upper or lower case does not change a thing.
Solution 6 - Html
I prefer lowercase, because that is what is used by the HTML 5.2 specification: https://www.w3.org/TR/html52/introduction.html#a-quick-introduction-to-html
The HTML 4.0 specification shows HTML tags in uppercase, but the specification itself uses lowercase tags in its HTML code: https://www.w3.org/TR/html40/struct/global.html
Java's javax.swing.text.html.Html.Tag class uses lowercase (even though the Java constants are in uppercase, as is consistent with Java's naming conventions).
Go's godoc tool uses lowercase.
Solution 7 - Html
Basically HTML is case insensitive. you can use lower case or upper case when entering HTML tags or HTML tag attributes but with XHTML lower case is required. In preparation for future upgrades, use lower case HTML tags and HTML tag attributes