How to Add Symbols in HTML?
Last Updated :
05 Jul, 2024
Symbols in HTML are important for conveying special characters, such as copyright, currency symbols, and arrows, which enhance content clarity and visual appeal. We will explore two different approaches to adding symbols in HTML.
Below are the possible approaches:
Add Symbols 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Symbols using HTML Entities</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Add Symbols using HTML Entities</h3>
<p>Here are some symbols:</p>
<ul>
<li>& (ampersand)</li>
<li>< (less than)</li>
<li>> (greater than)</li>
<li>© (copyright)</li>
<li>€ (euro)</li>
</ul>
</body>
</html>
Output:
Add Symbols 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Add Symbols using CSS content Property
</title>
<style>
.ampersand:before {
content: "&";
}
.less-than:before {
content: "<";
}
.greater-than:before {
content: ">";
}
.copyright:before {
content: "\00A9";
}
.euro:before {
content: "\20AC";
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Add Symbols using CSS content Property</h3>
<p>Here are some symbols:</p>
<ul>
<li class="ampersand"> (ampersand)</li>
<li class="less-than"> (less than)</li>
<li class="greater-than"> (greater than)</li>
<li class="copyright"> (copyright)</li>
<li class="euro"> (euro)</li>
</ul>
</body>
</html>
Output:
Similar Reads
How to Add Icons in HTML? Icons in HTML are small images that show actions or items on a website, like a "home" button or a "search" symbol. They help people find things easily. To add icons in HTML, you can use an icon library like Font Awesome, Bootstrap Icons, Google Icons, and Image Icons. Icons1. Using Font Awesome Icon
2 min read
How to Add Bullet Points in HTML? Bullet points in HTML make content easier to read and organize by creating lists. These lists help structure information clearly, with HTML providing tags for both ordered and unordered lists.There are several ways to create bullet points in the HTML:Table of ContentUsing Unordered ListsUsing Ordere
2 min read
How to Add Button in HTML? Buttons in HTML are interactive elements that users can click to trigger certain actions, such as submitting forms, navigating to different pages, or executing JavaScript functions. We can use either the <button> tag or <input type="button"> tag to create a button.1. Using <button>
1 min read
How to Add a Copyright Symbol to Your HTML? When building websites, you may want to display a copyright symbol to indicate ownership or rights over content. This symbol can easily be added to your HTML document using several methods, including Hex Code, HTML Entities, or Decimal Unicode. Methods to Add Copyright Symbols to Your HTML DocumentH
2 min read
How to Insert an Image in HTML? To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method
1 min read