How to Add Symbols in HTML? - Coding

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:

Table of Content

Add Symbols using HTML Entities
Add Symbols using CSS Content Property

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>&amp; (ampersand)</li>
        <li>&lt; (less than)</li>
        <li>&gt; (greater than)</li>
        <li>&copy; (copyright)</li>
        <li>&euro; (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:

Reffered: https://www.geeksforgeeks.org

HTML

Related
How to Upload Files in JavaScript?
How to Play Video in Reverse in HTML5 ?
How to Create Alert Button in HTML?
How to Add Icons in HTML?
How to Add Autoplay Video in HTML?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17