Guias HTML para text-transform
Aprenda como identificar e corrigir erros comuns de validação HTML sinalizados pelo W3C Validator — para que as suas páginas cumpram os padrões e sejam renderizadas corretamente em todos os navegadores. Consulte também o nosso Guias de acessibilidade.
The text-transform CSS property controls the capitalization of text within an element. It’s commonly used to enforce consistent text casing — for example, making headings appear in all uppercase or ensuring navigation links are lowercase — without changing the actual content in the HTML. When the validator encounters a value it doesn’t recognize for this property, it flags it as invalid.
This error can occur for several reasons:
- Typos — writing upppercase instead of uppercase, or Capitalize instead of capitalize (CSS values are case-sensitive in validation contexts).
- Incorrect values — using values from other properties, like bold, italic, or center, which don’t apply to text-transform.
- Non-standard values — using browser-specific or experimental values that aren’t part of the CSS specification.
- Wrong property — confusing text-transform with text-decoration, text-align, or font-variant, and using their values here instead.
Fixing this matters because invalid CSS can lead to unpredictable rendering across browsers. While most browsers will simply ignore an invalid declaration, your intended styling won’t be applied, potentially breaking your design. Keeping your CSS valid also improves maintainability and ensures forward compatibility.
Valid values for text-transform
| Value | Effect |
|---|---|
| none | No capitalization change (default) |
| capitalize | First letter of each word is uppercased |
| uppercase | All characters are converted to uppercase |
| lowercase | All characters are converted to lowercase |
| full-width | Forces characters into a full-width form (useful for CJK typography) |
| full-size-kana | Converts small kana characters to full-size equivalents |
Examples
Incorrect — invalid value
In this example, bold is not a valid text-transform value. It likely belongs on the font-weight property instead.
<p style="text-transform: bold;">Welcome to our site</p>Similarly, a simple typo will trigger this error:
<p style="text-transform: uppercse;">Welcome to our site</p>Correct — using valid values
<p style="text-transform: uppercase;">Welcome to our site</p><p style="text-transform: capitalize;">Welcome to our site</p>Correct — separating concerns with the right properties
If you intended to make text bold and uppercase, use the appropriate property for each effect:
<p style="font-weight: bold; text-transform: uppercase;">Welcome to our site</p>Correct — using text-transform in a stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Transform Example</title>
<style>
.heading {
text-transform: uppercase;
}
.name {
text-transform: capitalize;
}
.code-snippet {
text-transform: none;
}
</style>
</head>
<body>
<h1 class="heading">site navigation</h1>
<p class="name">john doe</p>
<code class="code-snippet">myVariable</code>
</body>
</html>If you’re unsure which value you need, uppercase and capitalize are the most commonly used. Use none when you need to override a text-transform rule inherited from a parent element.
Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.