Geek Answers Handbook

How to mark copyright in an image in html?

this is basically a semantic question. I want to post copyright images on a website. I know the figure and figcaption element, but figcaption does not seem to be the best tag for this. It is rather a headline, which I also need. If I have an image like this:

<figure> <img src="img/content/preview.jpg" alt="Alttext für das Bild" /> <figcaption>Caption goes here</figcaption> </figure>

Where can I post copyright?

EDIT: Copyright text should be visible.

+9
html html5 semantics semantic-markup
source share
3 answers

Generally

The copyright notice must be contained in a small element :

[...] Usually contains disclaimers, disclaimers, legal restrictions or copyrights .

If the copyright notice applies to the content of the sectioning content element (for example, article ), include the small element in the footer element that belongs to this sectioning element:

footer usually contains information about its section, for example, about who wrote it, links to relevant documents, copyright information and the like.

If this applies to the entire page, you can include a small element in the footer that belongs to the body (that is, that is not nested in the 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 contains a link to the license (or to a page explaining the terms in more detail), use the type of link to the license , for example:

 <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 apply (only) to all the main content of the page (indicated by the main element ).

In your case

figure is the root element of the partition , which means that footer (and header ) can be applied to it:

The footer element represents the footer for its closest ancestor, sectioning content, or root sectioning element .

Thus, you can include the footer element (containing the small element) on 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 will apply to the entire content of the figure element. (It is also possible to include a footer in figcaption .)

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

Leaving Simple HTML: Structured Data

Using structured data (e.g. RDFa, Microdata), you can be more specific. This will allow you to specify different licenses for each element of the web page. An example in this Webmasters SE answer.

+12
source share

I have seen using <small>Your copyright text</small> for this purpose.

From the HTML specification on <small>

A small element is a side comment, such as a small print.

A small print usually contains disclaimers, disclaimers, legal restrictions or copyrights . Small prints are also sometimes used for attribution or to satisfy licensing requirements.

Previously, the <small> element was used to display specific text with a smaller font, but now all styles should be done using CSS, and your HTML should act only as the name suggests - markup.

The default stylesheet for browsers may display the contents of the <small> element with a smaller font size, so you may have to override it using your own CSS.

+2
source share

You should use <small> ( HTML5 Spec ):

A small print usually contains disclaimers, disclaimers, legal restrictions or copyrights. Small prints are also sometimes used for attribution or to satisfy licensing requirements.

+1
source share

More articles:


All Articles