All About Web Co. logo
All About Web Co.

Copyright Footer - Examples, HTML, Symbol, Format and More

Author: Serhiy Manuilo, Publication Date: Mar 29, 2024, Last Updated: Jun 15, 2024
by Serhiy Manuilo, Jun 15, 2024
The article image: "Copyright Footer - Examples, HTML, Symbol, Format and More"

At first glance, a copyright notice is a pretty simple component of any website. However, it might not be that straight, when you need to add the copyright symbol, choose the right format, and update the copyright year automatically. Let’s address all these questions and do our best to improve every corner of our websites.

A website copyright is a legal protection granted to the website content under copyright law. It covers the original text, images, videos, graphics, design elements, and any other creative works published on the website.

Don’t hesitate to read What is Copyright? by Google Legal Support.

Is Website Content Automatically Copyrighted?

Website owners automatically hold the copyright to the original content they create, and they have the exclusive right to reproduce, distribute, display, and perform their work. This protection exists regardless of whether the content is registered with a copyright office or bears a copyright notice.

There are two ways to type a copyright symbol: as plain text and as HTML code.

Plain text©
MacOS shortcutOption + G
Windows shortcutAlt + 0169
HTML entity name©
HTML decimal code©
HTML hex code©

This is the copyright notice formula:

[Copyright (Optional)] © [Year of Publication (YYYY) or Date Range (YYYY-YYYY)] [Copyright Owner’s Name] [Rights Statement (Optional)]

It’s worth mentioning, that there is no universally mandated format for a copyright notice, but it typically includes the combination of the following components:

  1. The “Copyright” word (Optional)

    In many jurisdictions, it’s not strictly required to use the word “Copyright” at the beginning of a copyright notice for the notice to be legally effective. However, including the word “Copyright” can provide additional clarity and emphasis to the notice, making it clear to readers that the content is protected by copyright.

  2. Copyright Symbol (©)

    The copyright symbol is represented by the © character and indicates that the work is copyrighted. It’s typically placed at the beginning of the notice.

  3. Year of Publication or Date Range

    The year of publication indicates when the work was first published or made available to the public. It helps establish the timeline of the copyright protection. In cases of ongoing publications or updates, it’s advisable to update the year to reflect the most recent publication.

    Instead of a single year of publication, a date range encompasses the span of years during which the work was published or made available to the public. This range helps clarify the duration of copyright protection.

  4. Copyright Owner’s Name

    The name of the copyright owner follows the date range and identifies the individual or entity that holds the copyright to the work.

  5. Rights Statement (Optional)

    All Rights Reserved: This statement reinforces the copyright holder’s assertion of their exclusive rights to the work.

    Some Rights Reserved: This statement, often associated with Creative Commons licenses, indicates that the copyright owner is permitting certain uses of the work while reserving other rights. Creative Commons licenses provide a standardized way for creators to grant permissions to others to use their work under specific terms and conditions.

    No Rights Reserved: This statement, “No rights reserved,” essentially places the work into the public domain. By stating that no rights are reserved, the creator is relinquishing all rights they may have had under copyright law, effectively allowing anyone to use, modify, and distribute the work without restriction.

Since we already know the copyright notice formula we can come up with some examples, and here they are:

It’s not a complete list of all existing variations of the copyright notice, but you can get the overall picture and pick the right format for your particular case.

Any HTML document consists of DOCTYPE (1) and html tags (2) at the root level. The last is a parent for head (2.1) and body (2.2) tags.

You can use either p or span HTML tags (4) to define a copyright notice. It’s normally located within the footer tag (3), which is a child of the body element.

Let’s take a look at the code.

<!-- 1 -->
<!DOCTYPE html>
<!-- 2 -->
<html lang="en">
    <!-- 2.1 -->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* Other CSS styles */
            /* ... */
            /* Copyright styles */
            .copyright {
                font-size: 12px;
                color: grey;
                line-height: 1.6;
                margin: 30px 20px;
            }
        </style>
    </head>
    <!-- 2.2 -->
    <body>
        <!-- Main content -->`
        <!-- ... -->
        <!-- 3 -->
        <footer>
            <!-- Footer content -->
            <!-- ... -->
            <!-- 4. Copyright HTML element -->
            <p id="copyright" class="copyright">
                Copyright &copy; 2024 allaboutweb.co
            </p>
        </footer>
    </body>
</html>

The code above is pure HTML, nowadays it is rarely used. Developers use different kinds of frameworks (e.g. React, Angular, Vue) or website constructors (e.g. WordPress, Wix, Squarespace, Shopify).

So, the way you code a copyright notice depends on the context. In the case of site builders, normally it can be done with UI, you don’t even need to touch the code, except rare cases like automatically update copyright year.

I’ve been using Astro framework for this website, and here’s my code:

---
---

<footer class="footer-container">
    <ul class="footer-links">
        <li class="footer-link-item"><a href="/about/">About</a></li>
        <li class="footer-link-item"><a href="/contact/">Contact</a></li>
        <li class="footer-link-item"><a href="/privacy-policy/">Privacy Policy</a></li>
        <li class="footer-link-item"><a href="/sitemap/">Sitemap</a></li>
    </ul>
    <div class="copyright">
        Copyright &copy; {new Date().getFullYear()} allaboutweb.co
    </div>
</footer>

<style lang="scss">
    ...    
</style>

As you can see, both code snippets are quite simple and the copyright HTML take only a few lines of code. You also might notice a minor difference in copyright texts:

Let’s see how we can improve our pure HTML code to make the year update automatically.

Now you know how to change the copyright year in the AstroJs framework dynamically. So, the question is - does it help you anyhow? Most likely no, it’s not a widely used framework.

In fact, there are many ways to build a website nowadays. In that regard, it makes sense to find a universal solution and then make an attempt to apply it to your specific case.

In our case, the universal solution is pure HTML + JavaScript, because it’s the foundation of any website on the Internet.

You can read the “How to Automatically Update Copyright Year. Complete Guide” article to get more insights on this subject or read guides for more specific cases of WordPress, Wix, Squarespace, Webflow, Weebly, and Blogger site builders.

But for now, let’s take a look at the script that can automatically update the copyright year for our universal solution:

<script>
  window.addEventListener('load', onLoad);

  function onLoad () {
    const copyrightEl = document.getElementById('copyright');

    if (copyrightEl) {
      const currentYear = new Date().getFullYear();
      const copyrightText = `Copyright &copy; ${currentYear} allaboutweb.co`;

      copyrightEl.innerHTML = copyrightText;
    }
  }
</script>

Short recap on how it works: we set a listener to run the onLoad function as soon as the page loads. Then we get the copyright element by the copyright ID. If the element exists we calculate the current year value with new Date().getFullYear() and then build the copyright string and inject the current year into it. After, that we override our initial copyright text with the one we just created.

So, the next question is where to put the script on the HTML document?

We have three options available (the 3rd one considered as best practice):

  1. Inside the <head /> tag

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.addEventListener('load', onLoad);

    function onLoad () {
      const copyrightEl = document.getElementById('copyright');

      if (copyrightEl) {
        const currentYear = new Date().getFullYear();
        const copyrightText = `Copyright &copy; ${currentYear} allaboutweb.co`;

        copyrightEl.innerHTML = copyrightText;
      }
    }
  </script>
</head>

  2. Right before the closing </body> tag

    <body>
  <footer>
    <p id="copyright" class="copyright">
      Copyright &copy; 2024 allaboutweb.co
    </p>
  </footer>
  <script>
    window.addEventListener('load', onLoad);

    function onLoad () {
      const copyrightEl = document.getElementById('copyright');

      if (copyrightEl) {
        const currentYear = new Date().getFullYear();
        const copyrightText = `Copyright &copy; ${currentYear} allaboutweb.co`;

        copyrightEl.innerHTML = copyrightText;
      }
    }
    </script>
  </body>

  3. Link it as a separate JS file.

    JS file name: copyright-year-auto-update.js

    JS file location <root>/js/copyright-year-auto-update.js

      window.addEventListener('load', onLoad);

  function onLoad () {
    const copyrightEl = document.getElementById('copyright');

    if (copyrightEl) {
      const currentYear = new Date().getFullYear();
      const copyrightText = `Copyright &copy; ${currentYear} allaboutweb.co`;

       copyrightEl.innerHTML = copyrightText;
    }
  }

    HTML index file name: index.html

    HTML index location: <root>/index.html

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/js/copyright-year-auto-update.js" type="text/javascript"></script>
</head>

Summary

Let’s wrap up everything we just learned.

So, do you need a copyright notice on your site? It’s not mandatory, but it is still worth having it to state your ownership explicitly. That should simplify your life if you need to ban some content pirate.

How to get the copyright symbol? Use OS shortcuts (or copy this ”©” symbol) for text, and the &copy; entity for HTML.

What is the copyright notice format? The bare minimum is © + YYYY + Copyright Holder, e.g. ”© 2024 allaboutweb.co”. This can be extended with the “Copyright” word at the beginning and the rights statement at the end, e.g. “Copyright © 2024 allaboutweb.co. All Rights Reserved”. You can also use the date range if you like it more.

How to automatically update the copyright year? Use the code snipped above or look for guides for your site builder or framework. ChatGPT can point you in the right direction and provide some code that might work for you.