An HTML entity refers to a text snippet (or "string") that commences with an ampersand (&) and concludes with a semicolon (;). These entities are extensively utilized to display invisible characters like non-breaking spaces and reserved characters that might be misinterpreted as HTML code. Furthermore, they can be swapped for characters that are difficult to type using a standard keyboard.
Reserved Characters
Special characters in HTML need to be encoded to avoid them being interpreted as code by the browser. One example is the less-than symbol (<) sign as a tag.
Replace these characters with their respective character entities as indicated in the following table to display them as text.
| Symbol | Description | Entity Name | Number Code |
|---|---|---|---|
| " | Quotation mark | " | " |
| ' | Apostrophe | ' or ' | ' |
& |
Ampersand | & | & |
< |
Less-than | < | < |
> |
Greater-than | > | > |
Implementing an Entity
In HTML content, it is possible to reference an entity using either its name or a numeric character reference. Each entity is denoted by an ampersand (&) at the start and a semicolon (;) at the end.
Syntax
&entity_name;
OR
&#entity_number;
Enter either '<' or '<' to represent a less than symbol (<).
- A benefit of utilising entity names is that they are simple to recall.
- A drawback of utilizing an entity name is that not all entity names may be supported by browsers, whereas entity numbers often are.
The following table lists the five special characters that HTML processors must support.
Example
We must provide the following code if you wish to write "div id = <"character">) in a code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Entities in HTML</title>
</head>
<body>
<div id = "character">
</body>
</html>
Output:
<div id = "character">
| Character | Entities |
|---|---|
| ≥ | ≥ |
| © | © |
| € | € |
ⱻ |
∃ |
| ™ | ™ |
| ® | ® |
Example:
This illustration showcases the utilization of special characters that cannot be directly input using the keyboard.
Example
<!DOCTYPE html>
<html>
<head>
<title>Examples of HTML Entities</title>
</head>
<body>
<p>euro €</p>
<p>Copyright ©</p>
<p>GreaterEqual ≥</p>
<p>trade ™</p>
</body>
</html>
Output:
Pros and Cons of HTML Entity
Benefits
Remembering the names of entities can be straightforward.
Challenges
- Web browsers might provide backing for utilizing entity numbers instead of all entity names, but this support is not assured.
What is Non-breaking Space?
A non-breaking space is employed to prevent the browser from causing a line break within the text. It is represented in HTML by and serves the purpose of keeping two words or characters together on the same line without initiating a line break.
The non-breaking space serves to prevent browsers from cutting off spaces in HTML files. Similarly, the non-breaking hyphen, represented by the character ‑, ensures that a line will not break at the hyphen symbol.
Example
2:00 PM
300 km/h
When inserting 10 spaces into our text, the browser will remove 9 of them. To include visible spaces in our text, we can utilize character entities.
Adding Diacritical Marks
A diacritical mark, known as a "glyph" when added to a letter, can include accents like the grave ( ' ) and acute ( ` ) symbols. These marks can be placed above, below, within, or between alphabet letters. They are commonly used with alphanumeric characters to create characters not available in the current character set (encoding) on the page. Below is a list of diacritical marks:
| Symbols | Character | Construct | Final Result |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
Example
<!DOCTYPE html>
<html>
<head>
<title>Diacritical Marks Example</title>
</head>
<body>
<p>à = à (a with grave accent)</p>
<p>á = á (a with acute accent)</p>
<p>â = â (a with circumflex)</p>
<p>ã = ã (a with tilde)</p>
<p>Ó = Ó (capital O with acute accent)</p>
</body>
</html>
Output:
à = à (a with grave accent)
á = á (a with acute accent)
â = â (a with circumflex)
ã = ã (a with tilde)
Ó = Ó (capital O with acute accent)
Adding HTML Entities with CSS Content
HTML offers a solution for showcasing reserved characters, which are characters exclusive to HTML or not available on standard keyboards.
In HTML, certain characters like "." are reserved, causing potential uncertainty in coding when these characters need to be displayed on a webpage. Additionally, special characters such as £, ¥, €, © are not commonly found on standard keyboards. HTML provides Entity names and Entity numbers as a solution to use these symbols. Understanding and utilizing entity numbers in HTML is straightforward.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
h1:before {
content: '<';
color: Blue;
}
h1:after {
content: '>';
color: Blue;
}
h1 {
color:Blue;
}
</style>
</head>
<body>
<h1>Welcome to the page</h1>
</body>
</html>
Output:
Emoji Entities in HTML
Within HTML, a diverse range of Unicode characters, including emojis, are supported. While emojis may not be readily available on all keyboards, they can still be included using numeric character references when necessary.
Example
<p>Smile: 😀</p>
<p>Thumbs Up: 👍</p>
<p>Heart: ❤️</p>
Output:
Smile: 😀
Thumbs Up: 👍
Heart: ❤️
By utilizing internal images, developers can establish uniformity rather than relying on external resources.
Conclusion
HTML entities are essential in displaying special characters, reserved symbols, and uncommon glyphs on web pages. These entities offer precise control over text presentation by substituting characters like < and & with diacritical marks, emojis, and non-breaking spaces. Familiarity with and correct implementation of HTML entities can aid in creating web content that is easily accessible, compliant with standards, and visually accurate.