tag:forum.selfhtml.org,2005:/self HTML-Markup für image credits – SELFHTML-Forum 2021-07-17T09:59:04Z https://forum.selfhtml.org/self/2021/jul/17/html-markup-fur-image-credits/1790281?srt=yes#m1790281 Matthias Scharwies mscharwies@selfhtml.org 2021-07-17T05:13:23Z 2021-07-17T09:14:17Z HTML-Markup für image credits <p>Servus!</p> <p>Ich suche das perfekte HTML-Markup für image credits.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1280px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1280w, https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1024px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1024w, https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 640w, https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/320px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 320w<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caption<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> Foto: Ansgar Koreng, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://creativecommons.org/licenses/by-sa/3.0/de/deed.de<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CC BY-SA 3.0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caption<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Berlin-Mitte: Blick von der Hugo-Preuß-Brücke in Richtung Regierungs<span class="token entity named-entity" title="&shy;">&shy;</span>viertel während der blauen Stunde<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> hat in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Schreib-_und_Leserichtung#Anwendungsbeispiele" rel="nofollow noopener noreferrer">diesem Beispiel</a> einen footer verwendet. Sollte man evtl sogar noch ein aria-label oder eine <code>role=doc-credits</code> verwenden?</p> <p>Weitere Komplikation: Es handelt sich teilweise um Hintergundbilder.</p> <p>Vielen Dank im Voraus!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/jul/17/html-markup-fur-image-credits/1790282?srt=yes#m1790282 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-07-17T09:50:16Z 2021-07-17T10:02:58Z HTML-Markup für image credits <p>@@Matthias Scharwies</p> <p>Ich hab dein Posting in einen neuen Thread verschoben; das schien mir mit dem ursprünglichen nichts zu tun zu haben.</p> <blockquote> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> hat in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Schreib-_und_Leserichtung#Anwendungsbeispiele" rel="nofollow noopener noreferrer">diesem Beispiel</a> einen footer verwendet.</p> </blockquote> <p>Scheint mir das geeignete Element dafür zu sein: <em lang="en">“A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”</em> [<a href="https://html.spec.whatwg.org/multipage/sections.html#the-footer-element" rel="nofollow noopener noreferrer">Spec</a>]</p> <p>Die Wahl des Elementtyps hat übrigens nichts mit der Position auf der Seite/in der Komponente zu tun. Ein <code>footer</code> muss nicht immer unten sein; er kann auch <a href="https://noti.st/gunnarbittersmann/ZveV31/nuqjatlh-chadich-what-does-it-mean-too-sekunde-mal-wat-solln-dit-heissen#sd3qUgC" rel="nofollow noopener noreferrer">oben stehen</a>.</p> <blockquote> <p>Sollte man evtl sogar noch ein aria-label oder eine <code>role=doc-credits</code> verwenden?</p> </blockquote> <p>Ich weiß nicht, ob dieses EPUB-ARIA (von dem ich hier zugegebenermaßen zum ersten Mal höre) auf Webseiten zu irgendwas gut ist, also ob das von Browser/Screenreader-Kombinationen ausgewertet wird.</p> <p><a href="http://kb.daisy.org/publishing/docs/html/dpub-aria/doc-credits.html" rel="nofollow noopener noreferrer"><code class="bad">role="doc-credits"</code></a> scheint mir jedenfalls falsch zu sein. Wenn, dann <a href="http://kb.daisy.org/publishing/docs/html/dpub-aria/doc-credit.html" rel="nofollow noopener noreferrer"><code>role="doc-credit"</code></a>.</p> <p>Aber ob überhaupt, müsste ich auch erstmal nachfragen.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> Foto: Ansgar Koreng, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://creativecommons.org/licenses/by-sa/3.0/de/deed.de<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CC BY-SA 3.0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das <code>a</code>-Element könnte man noch mit <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes" rel="nofollow noopener noreferrer"><code>rel="license"</code></a> anreichern. (Die Beschreibung <em lang="en">“Indicates that the main content of the current document is covered by the copyright license described by the referenced document”</em> bezieht sich wohl auf die Verwendung am <code>link</code>-Element, nicht an <code>a</code>-Elementen?)</p> <p><code class="bad">target="_blank"</code> kann da weg. Das setze ich nur in Codepens, da dort die Links sonst im Iframe öffnen, was irgendwie noch blöder ist.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Man darf die Klimakrise doch echt jetzt nicht überbewerten.<br> Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“</em><br> — @HalleVerkehrt </div> https://forum.selfhtml.org/self/2021/jul/17/html-markup-fur-image-credits/1790283?srt=yes#m1790283 Matthias Scharwies mscharwies@selfhtml.org 2021-07-17T09:59:04Z 2021-07-17T10:02:42Z HTML-Markup für image credits <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <p>Ich hab dein Posting in einen neuen Thread verschoben; das schien mir mit dem ursprünglichen nichts zu tun zu haben.</p> <blockquote> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> hat in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Schreib-_und_Leserichtung#Anwendungsbeispiele" rel="nofollow noopener noreferrer">diesem Beispiel</a> einen footer verwendet.</p> </blockquote> <p>Scheint mir das geeignete Element dafür zu sein: <em lang="en">“A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”</em> [<a href="https://html.spec.whatwg.org/multipage/sections.html#the-footer-element" rel="nofollow noopener noreferrer">Spec</a>]</p> <p>Die Wahl des Elementtyps hat übrigens nichts mit der Position auf der Seite/in der Komponente zu tun. Ein <code>footer</code> muss nicht immer unten sein; er kann auch <a href="https://noti.st/gunnarbittersmann/ZveV31/nuqjatlh-chadich-what-does-it-mean-too-sekunde-mal-wat-solln-dit-heissen#sd3qUgC" rel="nofollow noopener noreferrer">oben stehen</a>.</p> <blockquote> <p>Sollte man evtl sogar noch ein aria-label oder eine <code>role=doc-credits</code> verwenden?</p> </blockquote> <p>Ich weiß nicht, ob dieses EPUB-ARIA (von dem ich hier zugegebenermaßen zum ersten Mal höre) auf Webseiten zu irgendwas gut ist, also ob das von Browser/Screenreader-Kombinationen ausgewertet wird.</p> <p><a href="http://kb.daisy.org/publishing/docs/html/dpub-aria/doc-credits.html" rel="nofollow noopener noreferrer"><code class="bad">role="doc-credits"</code></a> scheint mir jedenfalls falsch zu sein. Wenn, dann <a href="http://kb.daisy.org/publishing/docs/html/dpub-aria/doc-credit.html" rel="nofollow noopener noreferrer"><code>role="doc-credit"</code></a>.</p> <p>Aber ob überhaupt, müsste ich auch erstmal nachfragen.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> Foto: Ansgar Koreng, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://creativecommons.org/licenses/by-sa/3.0/de/deed.de<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CC BY-SA 3.0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das <code>a</code>-Element könnte man noch mit <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes" rel="nofollow noopener noreferrer"><code>rel="license"</code></a> anreichern. (Die Beschreibung <em lang="en">“Indicates that the main content of the current document is covered by the copyright license described by the referenced document”</em> bezieht sich wohl auf die Verwendung am <code>link</code>-Element, nicht an <code>a</code>-Elementen?)</p> </blockquote> <p>Ah, danke, bis zum Link bin ich (gedanklich) noch gar nicht gekommen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>