How to Add Symbols in HTML?
Symbols in HTML are important for conveying special characters, such as copyright, currency symbols, and arrows, which enhance content clarity and visual appeal. In this article, we will explore two different approaches to adding symbols in HTML.
Below are the possible approaches:
Table of Content
- Using HTML Entities
- Using CSS Content Property
Using HTML Entities
In this approach, we are using HTML entities to add symbols in HTML. Each entity begins with an ampersand (&) and ends with a semicolon (;), representing reserved characters such as ampersand (&), less than (<), greater than (>), copyright (©), and euro (€). These entities make proper rendering of symbols in web browsers, allowing us to display special characters accurately within HTML documents.
Example: The below example uses HTML entities to Add Symbols in HTML.
<!DOCTYPE html>
<head>
<title>Example 1</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Approach 1: Using HTML Entities</h3>
<p>Here are some symbols:</p>
<ul>
<li>& for & (ampersand)</li>
<li>< for < (less than)</li>
<li>> for > (greater than)</li>
<li>© for © (copyright)</li>
<li>€ for € (euro)</li>
</ul>
</body>
</html>
Output:
Using CSS Content Property
In this example, we are using the CSS content property with the :before pseudo-element to insert symbols into the HTML content. Each symbol is represented by its Unicode code point preceded by a backslash (\). This technique allows us to add symbols like & (ampersand), < (less than), > (greater than), © (copyright), and € (euro) directly through CSS styling
Example: The below example uses CSS Content Property to Add Symbols in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 2</title>
<style>
h1 {
color: green;
}
.ampersand:before {
content: "&";
}
.less-than:before {
content: "<";
}
.greater-than:before {
content: ">";
}
.copyright:before {
content: "\00A9";
}
.euro:before {
content: "\20AC";
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Approach 2: Using CSS content property</h3>
<p>Here are some symbols:</p>
<ul>
<li class="ampersand"></li>
<li class="less-than"></li>
<li class="greater-than"></li>
<li class="copyright"></li>
<li class="euro"></li>
</ul>
</body>
</html>
Output:
Contact Us