How to mark the copyright of an image in html?

html, semantic-markup, semantics

Solution

In general

The copyright notice should be contained in a `small` element:

[…] typically features disclaimers, caveats, legal restrictions, or copyrights.

If the copyright notice applies to the content of a sectioning content element (e.g., `article`), include the `small` element in a `footer` element that belongs to this sectioning element:

A `footer` typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

If it applies to the whole page, you might include the `small` element in a `footer` that belongs to the `body` (i.e. that is not nested in a sectioning element).

<body>

 <article>
    <footer>
      <small><!-- if the license applies to the content of this article --></small>
    </footer>
  </article>

  <footer>
    <small><!-- if the license applies to the content of the whole page --></small>
  </footer>

</body>

When it contains a link to the license

If the copyright notice includes a link to a license (or to a page explaining the terms in more detail), use the `license` link type, e.g.:

<a rel="license" href="/license.html">Usage rights</a>

<a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>

But note: this license will then apply (only) to the whole main content of the page (indicated by the `main` element).

In your case

`figure` is a sectioning root element, which means that `footer` (and `header`) can apply to it:

The `footer` element represents a footer for its nearest ancestor sectioning content or sectioning root element.

So you could include a `footer` element (containing a `small` element) in the `figure`:

<figure>
  <img src="img/content/preview.jpg" alt="Alttext für das Bild" />
  <footer><small><!-- copyright noice --></small></footer>
  <figcaption>Caption goes here</figcaption>
</figure>

Structurally, this copyright notice would apply to the whole content of the `figure` element. (It’s also possible to include the `footer` in the `figcaption`.)

(And if you have a link to the license, only use the `license` link type if this `figure` is the main content and there is no other main content that should not be licensed under the same license.)

Leaving plain HTML: structured data

By using structured data (e.g., RDFa, Microdata), you can be more specific. This would allow to specify a different license for each piece of the webpage. Example in this Webmasters SE answer.

Problem

this is a mostly semantic question. I want to put images with copyrights on the website. I know the figure and figcaption element, but figcaption doesn't seem the best tag for that. It's rather a caption which I also need. If I've got an image like that: ``` <figure> <img src="img/content/preview.jpg" alt="Alttext für das Bild" /> <figcaption>Caption goes here</figcaption> </figure> ``` Where do I put the copyright? EDIT: The copyright text must be visible.

Original source