Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add copyright symbol to your HTML document?
The copyright symbol (©) is an important legal marker used to indicate ownership of copyrighted content. Since this symbol is not directly available on standard keyboards, HTML provides several methods to display it on web pages using special codes and entities.
Syntax
There are three main ways to add the copyright symbol in HTML
<!-- Using HTML entity name --> © <!-- Using HTML entity number --> © <!-- Using hexadecimal code --> ©
Using HTML Entity Name
The most common and readable method is using the HTML entity name ©. This method is widely supported across all browsers and is easy to remember.
Example
<!DOCTYPE html>
<html>
<head>
<title>Copyright Symbol - HTML Entity</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using HTML Entity Name</h2>
<p>Copyright Symbol: ©</p>
<p>© 2024 TutorialsPoint. All rights reserved.</p>
<footer>
<p>© Company Name. Made with HTML5.</p>
</footer>
</body>
</html>
The output displays the copyright symbol in various contexts
Using HTML Entity Name Copyright Symbol: © © 2024 TutorialsPoint. All rights reserved. © Company Name. Made with HTML5.
Using HTML Entity Number
The numeric HTML entity © represents the copyright symbol using its Unicode decimal value. This method works identically to the named entity but uses a number instead.
Example
<!DOCTYPE html>
<html>
<head>
<title>Copyright Symbol - Numeric Entity</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using Numeric HTML Entity</h2>
<p>Copyright Symbol: ©</p>
<p>© 2024 Website Name. All content protected.</p>
<div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
<small>© Legal notice and terms of service.</small>
</div>
</body>
</html>
The numeric entity produces the same copyright symbol
Using Numeric HTML Entity Copyright Symbol: © © 2024 Website Name. All content protected. © Legal notice and terms of service.
Using Hexadecimal Code
The hexadecimal entity © uses the hexadecimal representation of the Unicode value for the copyright symbol. This method is less commonly used but equally valid.
Example
<!DOCTYPE html>
<html>
<head>
<title>Copyright Symbol - Hexadecimal</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using Hexadecimal Code</h2>
<p>Copyright Symbol: ©</p>
<p>© 2024 Educational Content. Creative Commons License.</p>
<blockquote style="border-left: 3px solid #007bff; padding-left: 15px; margin-left: 0;">
<p>"Knowledge is power" © Francis Bacon</p>
</blockquote>
</body>
</html>
The hexadecimal code also renders the copyright symbol correctly
Using Hexadecimal Code Copyright Symbol: © © 2024 Educational Content. Creative Commons License. "Knowledge is power" © Francis Bacon
Comparison of Methods
All three methods produce identical results, but they differ in readability and use cases
| Method | Code | Readability | Use Case |
|---|---|---|---|
| HTML Entity Name | © |
High | Most common, easy to remember |
| Numeric Entity | © |
Medium | When entity names are not supported |
| Hexadecimal Code | © |
Low | Programming contexts, technical documentation |
Practical Usage Example
Following example shows how to create a typical website footer with copyright information
<!DOCTYPE html>
<html>
<head>
<title>Website Footer with Copyright</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column;">
<header style="background-color: #f8f9fa; padding: 20px; text-align: center;">
<h1>My Website</h1>
</header>
<main style="flex: 1; padding: 20px;">
<h2>Welcome to Our Website</h2>
<p>This is the main content area of the webpage.</p>
</main>
<footer style="background-color: #343a40; color: white; text-align: center; padding: 15px;">
<p>© 2024 TutorialsPoint. All rights reserved.</p>
<p><small>Designed with HTML5 © Modern Web Technologies</small>.</p>
</footer>
</body>
</html>
This creates a complete webpage with proper copyright notices in the footer
My Website (header with light background) Welcome to Our Website This is the main content area of the webpage. © 2024 TutorialsPoint. All rights reserved. (footer with dark background) Designed with HTML5 © Modern Web Technologies
Best Practices
When using copyright symbols in your HTML documents, consider these best practices
-
Use © for most cases as it is the most readable and widely recognized.
-
Include the year and entity name in copyright notices (e.g., "© 2024 Company Name").
-
Place copyright notices typically in footers, sidebars, or at the end of content.
-
Combine with proper legal text such as "All rights reserved" when appropriate.
Conclusion
HTML provides three reliable methods to display the copyright symbol: © (entity name), © (numeric entity), and © (hexadecimal). The entity name method © is recommended for its simplicity and readability. All methods produce identical results and work across all modern browsers.
1K+ Views
