Correct Semantic tag for copyright info - HTML5

html

semantic-markup

accessibility

byAnton Shumikhin·Aug 22, 2024

In your HTML5 structure, incorporate <footer> at the conclusion of a section/article, or within a <div> for the page-level footer to place copyright info:

<footer>
  <small>&copy; 2023 Your Awesome Company. We own it!</small>
</footer>

An organic blend of semantic accuracy and legality garnished with a dash of accessibility. Now, that's gourmet coding!

Why semantics matter?

In HTML5, semantic tags offer contextual cues to both humans and machines about the content they encapsulate. Employ <footer> and <small> to seal off your content with a semantic, legally compliant, and accessible copyright notice.

`<footer>` & `<small>`: The right tag combination

Using <footer> enhances content accessibility, helping with proper content indexing by search engines and better understanding by screen readers. For denoting copyright, <small> steps in, indicating "fine print"—quite literally!

Going the extra mile with licensing links

Incorporating a license link with the rel="license" attribute translates your copyright scope into a machine-readable format. Plus, it adds a layer of clarity for your users.

Keep it legal and crisp

Ensure your copyright notice ticks both boxes—appropriate semantic markup and legal compliance. When in doubt, turn to the official documentation or a legal counsel. Nobody wants a lawsuit, right?

More on semantic footers

The machine-readable factor

Fuse an anchor tag with rel="license" for complex licensing:

<footer>
  <small>
    &copy; 2023 Your Awesome Company. Not just another footer.
    <!-- Because machines like reading licenses, too! -->
    <a href="URL_to_license" rel="license">Know our rules</a>
  </small>
</footer>

Catering for global users

© serves as the universally recognized copyright symbol, unifying the disparity in laws. Fact: Consistency = Better UX.

Besides the copyright info, savvy footers might house contact details, social media handles, and legal notes. Why should headers have all the fun?

<footer>
  <small>
    &copy; 2023 Your Awesome Company. Home for all tiny details.
    <!-- Vsauce for bots ;)
    <a href="URL_to_license" rel="license">License</a>
    --> 
  </small>
  <!-- Because users love stalking companies -->
  <a href="your_social_link">Our Insta</a>
  <!-- Laying down the law, link by link -->
  <a href="your_privacy_policy_link">Privacy Policy</a>
</footer>