Uppercase HTML vs CSS

Question

I’d like to know the difference between using text-transform: uppercase in CSS and use uppercase letters directly in HTML.

• Is there any difference between the two?
• Which is the most recommended?

Answer 1

There is a basic difference. CSS only changes the visual appearance.

If you have a input with text-transform: uppercase, when you do the submit of this form, the text within the input goes with the original text, that is, if the user writes in low box, and the CSS put in high box, the text will be sent in lower case, even on the user screen the text appearing in high box.

input {
    text-transform: uppercase
}

Esse input sempre vai mostrar a letra em UPPERCASE, mas se o usuário escrever em minúsculo, na hora do submit vai ser enviado em minúsiculo, mesmo na interfaçe o texto aparecendo em caixa alta<br>
<input type="text" name="" id="">
    

---

On the Semantics

On semantics you have to keep in mind that CSS only changes style, and the screen reader doesn’t know if the text is red or black, or if it’s in Arial or Times. Ideally you use semantic HTML tags as <em>, <strong>, <cite>, <q>, , etc in the correct way to add some value to the text that is between the tags. This will help the screen reader to interpret the text. Even the display:none used by CSS sometimes is not enough to hide an element of Screen Reader (read about it here), so HTML has the attribute hidden, so that the reader ignores the element that has this attribute. I think it’s unlikely that screen readers would consider CSS semantically. Even the text content in content of a pseudo-element is ignored in the DOM and you cannot access it.

---

About SEO

I have no data or experience to prove anything at this point, and how Google will index INSS or <span style="text-transform:uppercase">inss</span>. The search engine is obscure, and the point is you make a Teste A/B to see how he treats it. already if you put <strong style="text-transform:uppercase">inss</strong> Yes you will give a semantic value that can influence the search result. But like I said, only testing to know, and yet Google keeps changing these rules... But on the other hand, we know that Google recognizes CSS, and even takes it into account to qualify your site, and that’s one more reason the subject is obscure...

Answer 2

There are differences, they are very important and it is recommended to use what makes sense for their purpose; they are not equivalent.

Something You Need at all times has in mind: CSS applies styles. Do you need to keep the text in a high box because it should be high box or is it merely visual? If it is part of the meaning of the text, it should be in high box already in HTML; if it is merely visual, apply the style with CSS.

When writing an acronym, for example, you should put it in high box directly in HTML, because by convention, every acronym should be in high box - it’s part of the sense of the text to be like this. However, if you just want, for reasons of style, to keep the text in high box, perhaps to improve readability, you should do this with CSS - being in high box is not part of the sense of the text.

Example of acronyms

<p>Você não deve utilizar <mark>CSS</mark> para deixar siglas, como <mark>HTML</mark>, em caixa alta</p>

Example of High Readability Text

li.title {
  text-transform: uppercase;
}

<ul>
  <li class="title">Menu</li>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
</ul>

Answer 3

By directly using uppercase letters in HTML, you would certainly save on the browser’s task of having to render the CSS rule. But I think this difference in render time is very irrelevant.

Another point is if the text you will apply the rule text-transform: uppercase will need to be changed - maybe by some script - and in this case it makes sense to use the text-transform, because it is easier to change only one CSS rule instead of having to change all the text.

Answer 4

CSS in this case will only change what the user is seeing.

The difference will be the day the collected data need to be sent in UPPERCASE.

Since CSS will only change what the user is viewing and not what is being sent, there may be errors.

In the second case the most correct would be using javascript or jquery to generate UPPERCASE, so the data sent will actually be in UPPERCASE.