You can use uppercase letters directly inside your HTML text content without using any tricks as shown below:
<p>HELLO WORLD! THESE ARE UPPERCASE LETTERS</p>
Since HTML itself is case-insensitive, you can even write your HTML tags using uppercase letters:
<div>THIS IS PERFECTLY VALID HTML</div>
But uppercase letters are bad for readability, and there’s a non-spoken agreement between web developers to always use lowercase for HTML tags and content.
This is why if you want to use uppercase letters – and keep your friends from YELLING at you – I’d recommend that you use the CSS
text-transform style property.
text-transform property, you can style your text content as all
capitalize only the first letter of each word.
The following example:
<body> <div style="text-transform:uppercase;">hello world (upper)</div> <div style="text-transform:lowercase;">happy friday (lower)</div> <div style="text-transform:capitalize;"> it's a nice day to code (capitalize) </div> </body>
Will produce the following output:
When you need to uppercase only a certain word inside a
<div> or a
<p> element, you need to wrap the word using the
<span> tag and apply the
text-transform:uppercase style to that
<body> <p> you can <span style="text-transform:uppercase;">uppercase</span> a word </p> <p> Up to <span style="text-transform:uppercase;">as many words</span> as you want </p> </body>
You can include as many words as you need to uppercase inside the
Uppercase for input elements
You can also render the value inside an
<input> element using uppercase letters with the
text-transform property as shown below:
<body> <form method="GET"> <label for="username">Username:</label> <input type="text" id="username" name="username" style="text-transform:uppercase;" /> <input type="submit" /> </form> </body>
But using the
text-transform style does not actually change the input values to uppercase. When you submit the form, the input value will still use the case as the text was typed by the user.
Using the above example, you can see that the
?username value will use the letter case that you typed into the
To guard your
<input> element against accepting lowercase letters, you can add the following
<body> <form method="GET"> <label for="username">Username:</label> <input type="text" id="username" name="username" pattern="[A-Z]*" title="Only uppercase letters" /> <input type="submit" /> </form> </body>
title attribute above will be used as the validation message when you click on the submit button as shown below:
Although you can force the user to use only uppercase letters, it’s recommended to re-validate the form inputs in your backend server because the HTML markup can be accessed from the browser HTML inspector.
A sophisticated Internet user can access your HTML code from the inspector and change the attributes, which allows that user to submit lowercase letters.
let username = "nathan"; let newUsername = username.toUpperCase(); console.log(newUsername); // "NATHAN"
Another language like PHP has the
strtoupper() method and Python has the
You need to find the right method to transform the string to uppercase using your backend language.