CODEWITHSUNDEEP
htmlcss
Florin Pop
Florin Pop

Reputation: 5135

Uppercase within HTML tag vs CSS text-transform

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

<h3> MY TEXT HERE </h3>

or not having directly uppercase and transform it with CSS like this:

<h3> My text here </h3>

CSS:

h3 { text-transform: uppercase;} ;

Which would load faster in the browser? And why?

Upvotes: 6

Views: 46120

Answers (4)

mfluehr
mfluehr

Reputation: 3178

Be aware of the accessibility issues with all-caps. text-transform: uppercase is better for accessibility than typing all-caps into your HTML markup. That said, according to WebAIM, all-caps can be an accessibility problem in general, whether used in your HTML or using CSS.

Here are some of the problems with all-caps:

  1. "Lengthy segments of capitalized content are more difficult to read."
  2. "Screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is giving emphasis to the text."
  3. "In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words."

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16821

Logically speaking, writing it uppercase directly in the HTML source would save the browser the trouble of rendering the style rule and applying a transform to the text.

But the difference of the page load speed would be irrelevant, and not noticed...

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

There is a difference in document content, “MY TEXT HERE” versus “My text here” (just styled to be rendered in all uppercase). This matters in non-CSS rendering situations, in scripting, and other automated processing. Most search engines seem to dealt with texts in a case-insignificant manner, but this is not guaranteed and may change, at least in some situations. When text is copied and pasted from an HTML document, all styling is often lost so that you only get the content.

Any difference in speed on loading is most probably immaterial, but obviously the version that has the desired spelling in the content is faster than one that needs a style sheet rule to be loaded and applied.

Upvotes: 3

Simon Paquet
Simon Paquet

Reputation: 625

It's not a question of which would load faster even though the upper case would "load faster" than loading the extra bytes from the css.

In my opinion, there is a question of accessibility involved in that matter.

You should write the text as it is supposed to be written for a vocal reader to read it (for blind people).

Morevover, I would personnaly write it with the text-transform as it's easy to change if you have a lot of h3 in your website and you don't want to write them all over again if you change the way your h3s look.

Upvotes: 14

Related Questions