In this article, we will discuss the overview of case sensitivity in HTML5. We will see the example related to it for more understanding. All the HTML elements/tags are case-insensitive. Case-insensitive means the tags/elements which are used in the code are understandable by the browser irrespective of the letters being the upper case or lower case classes.
Note: It is recommended to use all tags in lowercase or uppercase for best practice and better understanding.
Example 1: This example contains all the tags in lowercase.
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<p>Geeks for Geeks</p>
<p>The code has lowercase body tags</p>
</body>
</html>
Output:
Example 2: This example contains some tags with both uppercase and lowercase alphabets. This example has <boDY> tag which has a combination of both upper and lowercase alphabets, but still, it does not affect the output.
<!DOCTYPE html>
<html>
<boDy>
<h2>Welcome To GFG</h2>
<p>Geeks for Geeks</p>
<p>The code has both upper and lowercase tags.</p>
</boDy>
</html>
Output:
Note: You can see that both the above code snippets generate the same output.
Example 3: We used multiple tags in mixed case but we have still reached to the desired output. Tags used in mixed case in the below example are <HEAd>, </TitLe>, </heAd>, <BoDy>, <StrONg>, </STroNG>, <P>, </p>, </bR> and </HTmL>.
<!DOCTYPE html>
<HTML>
<HEAd>
<Title>Welcome to GFG</TitLe>
</heAd>
<BoDy>
<StrONg>Hello World!</STroNg>
<p>
This is an example of Case-insensitivity
in HTML </bR>Observe the output
</p>
</body>
</HTmL>
Output:
