Entities in HTML

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 &lt and entity number is &#60. For greater-than symbol, entity name is &gt and entity number is &#62.

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: &lt;</h2>
<h2>Greater-than sign: &gt;</h2>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Entities in HTML with Examples

Non-Breaking Space in HTML

&nbsp; 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 &nbsp; 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&nbsp;Net&nbsp;Tutorials</p>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Non-Breaking Space in HTML

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: a&#768;</h3>
<h3>a with an acute accent: a&#769;</h3>
<h3>a with a circumflex accent: a&#770;</h3>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Diacritical Marks in HTML

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.

Leave a Reply

Your email address will not be published.