Back to: HTML Tutorials
Entities in HTML with Examples
In this article, I am going to discuss Entities in HTML with Examples. Please read our previous article where we discussed Layout in HTML with Examples. At the end of this article, you will learn everything about HTML Entities with Examples.
HTML Entities
In Html, there are some reserved characters that serve special meaning when used inside an Html document. For example, consider angular brackets (< >) in Html angular brackets are used to enclose Html tags.
<p> <div> <section>
This means that angular brackets are reserved characters in Html if we try to use them like a normal character browser will treat them as a special character used to enclosed tags. To solve this problem HTML entities were introduced with Html entities we can add reserved characters in the Html document.
We can add special characters using entity names or entity numbers. For less-than symbol entity name is < and entity number is <. For greater-than symbol, entity name is > and entity number is >.
HTML Entities Example:
In the example below we have added less than and greater than using Html Entities
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
h1{
color:tomato;
}
h2{
color:slateblue;
}
</style>
<body>
<h1>HTML Entity</h1>
<h2>Less-than sign: <</h2>
<h2>Greater-than sign: ></h2>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Non-Breaking Space in HTML
is the most commonly used Html entity; it is used to add non-breaking space between words. Like we use break which is used to add line breaks in a document is used to add space without breaking into a new line. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
h1{
color:tomato;
}
p{
color:mediumseagreen;
}
</style>
<body>
<p>Below paragraph has non breaking space</p>
<p>Welcome to Dot Net Tutorials</p>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Diacritical Marks in HTML
A diacritical mark is a letter that has a “glyph” attached to it. Diacritical markings can be seen above and below a letter, inside a letter, and in the spaces between two letters. Diacritical markings can be combined with alphanumeric characters to create characters that aren’t in the character set. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
p{
color:tomato;
}
h3{
color:mediumseagreen;
}
</style>
<body>
<p>Below paragraphs have diacritical marks</p>
<h3>a with a grave accent: à</h3>
<h3>a with an acute accent: á</h3>
<h3>a with a circumflex accent: â</h3>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
In this article, I am going to discuss Computer Code Elements in HTML with Examples. Here, in this article, I try to explain Entities in HTML with Examples and I hope you enjoy this HTML Entities with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.