In this article, you will learn how to properly code the copyright symbol in HTML using different methods such as HEX code, HTML entities, and Unicode. We will also explain the use cases and provide relevant examples for your better understanding.
How to Code the Copyright Symbol in HTML?
To display the copyright symbol on a web page, you can use either the HTML entity name or number code. Let’s see how we can do it:
3. Encoding: Using the HTML entity helps avoid encoding issues. When you save your HTML files with a specific encoding like UTF-8, the entities will be properly translated into the correct symbols.
You can also use JavaScript to dynamically insert the copyright symbol into a webpage. This is useful if the year needs to update automatically each time the webpage is loaded.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Copyright</title>
</head>
<body>
<footer>
<p id="copyright"></p>
</footer>
<script>
let year = new Date().getFullYear();
document.getElementById("copyright").innerHTML = `© ${year} Coding Ninjas. All Rights Reserved.`;
</script>
</body>
</html>
Explanation:
JavaScript's new Date().getFullYear() is used to dynamically insert the current year.
The copyright symbol © is inserted using the innerHTML property.
Output (on a webpage loaded in 2024):
5. Using CSS to Style the Copyright Symbol
If you'd like to apply custom styling to the copyright symbol, you can use CSS. Here's an example where the copyright symbol is made larger and given a different color.
In this article, we discussed how to code the copyright symbol in HTML using various methods, such as HEX code, HTML entity, and decimal Unicode. We also discussed the importance of the copyright symbol, how it is used to protect creative works, and how easy it is to implement it in your HTML documents.
Live masterclass
Microsoft SDE Roadmap: Use AI Tools to Succeed
by Pranav Malik
19 May, 2025
01:30 PM
Break into MAANG Data Analyst roles from Non-Tech Profession
by Abhishek Soni
20 May, 2025
01:30 PM
SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls
by Shantanu Shubham
21 May, 2025
01:30 PM
Amazon Data Analyst: Advanced Excel & AI Interview Tips
by Megna Roy
22 May, 2025
01:30 PM
Microsoft SDE Roadmap: Use AI Tools to Succeed
by Pranav Malik
19 May, 2025
01:30 PM
Break into MAANG Data Analyst roles from Non-Tech Profession