Is It Bad to Use Uppercase Letters for HTML Tags

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.

Should HTML meta charset be lowercase or uppercase?

The value for charset is case-insensitive.

From spec.whatwg.org

The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8".

Link to full document: https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-charset

uppercase HTML tags within CSS selectors

1. Are uppercase HTML tags used for CSS selectors acceptable for use today or is this style/habit deprecated?

   It's still acceptable in HTML in the sense that it's neither disallowed nor deprecated, but it does give off a rather nasty 90s vibe to anyone who might read your source code. In reality, though, it makes no difference. Note that I say "in HTML"; XHTML is a different story altogether.

   And the reason I say 90s is because...

2. What HTML and/or CSS version(s) was this used?

   The uppercase convention dates back to SGML, on which previous versions of HTML were based. The only reason the same convention exists in CSS is simply that CSS goes hand in hand with HTML — CSS was introduced not very long after HTML 2.0 — so the norm of uppercase tag names simply carried over because hey, tag names.

   For whatever reason, though, this convention persisted in CSS long after XHTML, in which tag names are always lowercase, became the in thing (although ultimately it didn't matter because people were actually authoring HTML, not XHTML, despite what their DOCTYPEs would suggest), and you only really stopped seeing uppercase type selectors in stylesheets in the mid-00s.

3. Is there anything else you can tell me about this styling technique?

   Most selectors are normally case-insensitive, so however you case your HTML tag names and CSS type selectors makes no difference since HTML itself doesn't place any restrictions.

   The only exception is when the document language is case-sensitive and therefore does place restrictions on selectors. This is where XHTML (and any XML-based language) becomes relevant — if the case of your selectors don't match the case of your XML tag names, the selectors won't match. But even this is more pertinent for something like SVG, than for XHTML, since XHTML is practically a thing of the past now. The de facto standard is, and has always been, HTML.

   Still, the modern-day convention since Y2K has been to just use lowercase for tag names in HTML and type selectors in CSS for HTML. Many say that this is for compatibility with XHTML; whether XHTML actually had significant influence in this modern-day convention is debatable and frankly irrelevant.

True or not: We should always use proper capitalization and never put whole sentences in all-uppercase

I'm not talking about HTML TAG i'm talking about text content? I head Screen reader spell letter by letter if we use UPPERCASE.

my question was "Should we always use lowercase text in web page's content?" and use css text-transform for other cases if we need.

Just use natural text, as you did in your SO question. Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym (it'll likely vary from reader to reader - some handle things more intelligently than others, and may be able to figure out that a whole sentence isn't likely to be an acronym).

You don't have to lowercase every letter, though - a screen reader shouldn't have any problem with "This Is A Sentence."

UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase;.

Is there a reason to use uppercase letters for hexadecimal CSS color values?

I am not aware of any differences other than personal preference. Personally, I prefer lowercase since it's quicker to read, although in very short strings such as CSS color values, the benefit is probably negligible. Really, I think it's just because I think lowercase looks better.

Hexadecimal, however, is traditionally written in uppercase, so maybe I'm - strictly speaking - in the 'wrong'.

Uppercase or lowercase doctype?

In HTML, the DOCTYPE is case insensitive. The following DOCTYPEs are all valid:

<!doctype html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!DoCtYpE hTmL>

In XML serializations (i.e. XHTML) the DOCTYPE is not required, but if you use it, DOCTYPE should be uppercase:

<!DOCTYPE html>

See The XML serialization of HTML5, aka ‘XHTML5’:

Note that if you don’t uppercase DOCTYPE in an XHTML document, the XML parser will return a syntax error.

The second part can be written in lowercase (html), uppercase (HTML) or even mixed case (hTmL) — it will still work. However, to conform to the Polyglot Markup Guidelines for HTML-Compatible XHTML Documents, it should be written in lowercase.

html input attribute values in uppercase

What values are acceptable for a given attribute depend on the specific attribute.

Name and Id attributes can both include upper and lower case characters, and both are case sensitive.

What is the difference between P and p in HTML?

There is no difference.

In HTML, elements are case-insensitive.

However, in XHTML, you must use lowercase.

JavaScript and why capital letters sometimes work and sometimes don't

Javascript is ALWAYS case-sensitive, html is not.

It sounds as thought you are talking about whether html attributes (e.g. onclick) are or are not case-sensitive. The answer is that the attributes are not case sensitive, but the way that we access them through the DOM is.
So, you can do this:

<div id='divYo' onClick="alert('yo!');">Say Yo</div> // Upper-case 'C'

or:

<div id='divYo' onclick="alert('yo!');">Say Yo</div> // Lower-case 'C'

but through the DOM you must use the correct case. So this works:

getElementById('divYo').onclick = function() { alert('yo!'); }; // Lower-case 'C'

but you cannot do this:

getElementById('divYo').onClick = function() { alert('yo!'); }; // Upper-case 'C'

EDIT: CMS makes a great point that most DOM methods and properties are in camelCase. The one exception that comes to mind are event handler properties and these are generally accepted to be the wrong way to attach to events anyway. Prefer using addEventListener as in:

document.getElementById('divYo').addEventListener('click', modifyText, false);

---

Related Topics