Clever Geek Handbook

Superscript in HTML tag instead of CSS text transform

Is there a difference between writing uppercase text directly in an HTML tag like this:

<h3> MY TEXT HERE </h3>

or has no direct uppercase and transform it with CSS like this:

<h3> MY TEXT HERE </h3>

CSS

h3 { text-transform: uppercase;} ;

What will load faster in the browser? And why?

+6


source to share


4 answers


It is not a question of which will load faster, even if uppercase is "loaded faster" than loading extra bytes from css.

In my opinion, there is an issue of accessibility in this issue.



You must write the text as it must be written for the vocal reader to read it (for the blind).

Morevover, I would personally write it using a text transformation as it is easy to change if you have a lot of h3s in your website and you don't want to write them again if you change the way you view h3s.

+10


source


There is a difference in the content of the document "MY TEXT HERE" compared to "My text here" (only in the style that will appear in all capital letters). This matters in non-CSS situations, scripting and other automated processing. It seems that most search engines do not process the text well, but this is not guaranteed and may change, at least in some situations. When text is copied and pasted from an HTML document, all styles are often lost, so you get content.



Any difference in loading speed is likely inconsequential, but obviously a version that has the desired spelling in the content is faster than one that requires a stylesheet rule to load and apply.

+3


source


Logically speaking, by writing it in uppercase directly into the original HTML, it would save the browser the trouble of displaying the style rule and applying the transform to the text.

But the difference in page load speed would be irrelevant and would not notice ...

+3


source


Be aware of accessibility issues with all caps. text-transform: uppercase

better for accessibility than putting all caps in your HTML markup. However, according to WebAIM , all caps can be an accessibility issue in general, regardless of whether they are used in your HTML or CSS.

Here are some problems with capital letters:

  1. "Long segments with capital letters are harder to read."
  2. "Screen readers do not usually read text differently when it is written in capital letters, so listeners will not know that the author is focusing on the text."
  3. "In some cases, a screen reader may interpret TOTAL CAPITAL text as an abbreviation and may read it as letters, not words."
0


source






More articles:


All Articles