How to Use the Copyright Symbol in HTML: A Beginner’s Guide

The copyright symbol (©) is a legal marker used to assert ownership over content, indicating that it is protected under copyright law. In web development, adding this symbol helps demonstrate professionalism and reinforces that your content is not freely available for reuse.

Overview

In HTML, there are multiple ways to represent the copyright symbol. This article explains its meaning, shows how to implement it using HTML, and includes styling examples using CSS. Additionally, it demonstrates how to dynamically update the year using JavaScript.

What is the Copyright Symbol?

The copyright symbol is a special character (©) used to indicate that the work it accompanies (such as text, images, or code) is protected by copyright law. Its use signals that an individual or organization owns the content and cannot be reused without permission.

For more detailed information, refer to the World Intellectual Property Organization (WIPO).

Adding the Copyright Symbol in HTML

There are three standard methods to insert the copyright symbol in an HTML document:

1. Using HTML Entity Name

&copy;

2. Using HTML Entity Number

&#169;

3. Direct Unicode Character

©

Note: © is the most human-readable and widely supported option across all browsers and screen readers.

Example: Footer with Copyright Symbol

A common usage of the copyright symbol is in the website’s footer. Here’s a basic implementation:

<footer>
  <p>&copy; 2025 Codeuptoday. All rights reserved.</p>
</footer>

To make the text visually less prominent, you can use the <small> element:

<footer>
  <small>&copy; 2025 Codeuptoday. All rights reserved.</small>
</footer>

Styling Copyright Footer with CSS

You can enhance the appearance of your footer using CSS. Here’s an example:

<style>
  footer {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
    font-size: 14px;
    color: #555;
  }
</style>

<footer>
  <p>&copy; 2025 Codeuptoday. All rights reserved.</p>
</footer>

Dynamically Updating the Year Using JavaScript

It’s a best practice to automatically update the year in your copyright notice:

<footer>
  <p>&copy; <span id="year"></span> Codeuptoday. All rights reserved.</p>
</footer>

<script>
  document.getElementById("year").textContent = new Date().getFullYear();
</script>

For more information, see the Date object on MDN.

Best Practices

Update the year regularly or automate it using JavaScript.
Place the copyright text in the footer of each webpage.
Include your brand or organization name alongside the symbol.
Use accessible markup for consistency across screen readers and browsers.

Conclusion

The copyright symbol is a small but important part of website development. It communicates ownership and helps protect your intellectual property. By using HTML entities like ©, applying basic styling with CSS, and optionally automating the year with JavaScript, you can ensure your site appears professional and up-to-date.

HTML Boilerplate: A Complete Guide for Beginners

CSS Selector Cheat Sheet: Comprehensive Guide