How To Create The Copyright Symbol In HTML - Career Karma

The © or © symbols represent the HTML copyright sign. These symbols let you embed a copyright sign on a web page. The copyright sign does not appear on most keyboards so you need to use the HTML symbol code.

HTML has symbols and entities that may not necessarily be found on a keyboard easily, if they appear at all. This is because there are hundreds of possible symbols you may want to use on a computer. Your keyboard would have hundreds of keys to represent all the symbols.

Find your bootcamp match Select Your Interest Software Engineering Design Data Science Data Analytics Digital Marketing Cyber Security IT Support Specialist Your experience Beginner Intermediate Advanced Time to start Now 1 Months 3 Months 6 Months+ GET MATCHED By completing and submitting this form, you agree that Career Karma, LLC may deliver or cause to be delivered information, advertisements, and telemarketing messages regarding their services by email, call, text, recording, and message using a telephone system, dialer, automated technology or system, artificial or prerecorded voice or message device to your email and/or telephone number(s) (and not any other person’s email or telephone number) that you entered. Consent is not a condition of receiving information, receiving Career Karma services, or using the website, and you may obtain information by emailing info@careerkarma.com. Message & Data rates may apply. Message frequency may vary. Text STOP to unsubscribe. Terms of Service and Privacy Policy govern the processing and handling of your data. X

Find your bootcamp match

First Name Last Name Your e-mail Your phone number GET MATCHED By completing and submitting this form, you agree that Career Karma, LLC may deliver or cause to be delivered information, advertisements, and telemarketing messages regarding their services by email, call, text, recording, and message using a telephone system, dialer, automated technology or system, artificial or prerecorded voice or message device to your email and/or telephone number(s) (and not any other person’s email or telephone number) that you entered. Consent is not a condition of receiving information, receiving Career Karma services, or using the website, and you may obtain information by emailing info@careerkarma.com. Message & Data rates may apply. Message frequency may vary. Text STOP to unsubscribe. Terms of Service and Privacy Policy govern the processing and handling of your data.

This article explains how to create the copyright symbol in HTML using various shortcuts.

HTML Copyright Symbol

You can create an HTML copyright symbol using the © or © symbol codes. These are often enclosed within a paragraph. The ampersand denotes that want to embed a special character onto the web page.

The syntax for the copyright symbol is:

<p>© 2020 Career Karma</p>

This displays the following text:

© 2020 Career Karma

We could also use the © to achieve the same goal. The ampersand and semi-colon must be specified. Otherwise, the copyright symbol will not embed onto your web page. This is because © and © are special HTML characters.

When creating a web page, it’s often a good idea to claim ownership of what you create. This will give you some legal protection of your work. To claim ownership, use a copyright notice in your footer to protect your or your client’s material. You may want to use a copyright symbol to make your claim of ownership explicit.

Copyright HTML Reference

The following table illustrates the different ways you can create an HTML copyright symbol in your code:

On a Windows or a Mac machine, there are special shortcuts you can use just to create the actual character itself. Alt + 0169 will get the copyright character (©) on Windows, while it is option + G on Mac.

Use the HTML Entity Name or Number to create the special character. Wrap &copy; or &#169; in a set of <span> tags and get the same result.

Copyright Symbol HTML Example

A common place to use a copyright symbol is in a footer. Let’s write a copyright notice that appears in a footer:

<footer> <p>Created by Career Karma. © 2020</p> </footer>

The HTML <footer> tag tells our code that we are creating a footer for our web page. Within that footer we have specified an HTML <p> tag. The <p> tag contains some text and a copyright symbol. Our code displays:

Created by Career Karma. © 2020

We have successfully created a copyright symbol.

Using HTML Copyright Symbol In Your Code

Let’s take a look at a full example of the HTML copyright symbol.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style> body { font-family: Arial } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } table, footer { margin: 20px auto; text-align: center; } tr:nth-child(even) { background-color: #dddddd; } span { color: blue; } </style> <script> function todayDate(){ var d = new Date(); var n = d.getFullYear() + " "; return document.getElementById("date").innerHTML = n; } </script> </head> <body onload=todayDate()> <table bordered> <tr> <th>Option</th> <th>shortcut or syntax</th> </tr> <tr> <td>Windows</td> <td>Alt + 0169</td> </tr> <tr> <td>Mac</td> <td>option + G</td> </tr> <tr> <td>HTML Entity Name</td> <td><span>&lt;span></span>&amp;copy;<span>&lt;span></span></td> </tr> <tr> <td>HTML Entity Number</td> <td><span>&lt;span></span>&amp;#169;<span>&lt;span></span></td> </tr> </table> <footer> &copy; <em id="date"></em>Career Karma </footer> </body> </html>

We use the copyright symbol the fourth to last line in the footer HTML code. Switch out the ways to get them all to work for you.

Conclusion

The HTML copyright symbol is represented by &copy; or &#169;. You can use this code to embed the copyright symbol onto a web page if this character is not represented on your keyboard.

Do you want to learn more about HTML and how to become a web developer? Check out our complete How to Learn HTML guide. In this guide, you’ll find expert advice on learning HTML and a list of top online learning resources.