Menu
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.
743
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element.
The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
You should use <small> (HTML5 Spec):
Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
38
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
footertypically 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>
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).
figure is a sectioning root element, which means that footer (and header) can apply to it:
The
footerelement 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.)
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.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
