mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-01-17 04:58:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add picture element; Revise other image examples

Browse Source
This commit is contained in:
Chris Bracco 2021-04-03 15:53:12 -04:00
parent 328c708a5e
commit d882dfcb48
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -323,15 +323,23 @@
<article id="embedded__images">
<header><h2>Images</h2></header>
<div>
<h3>No <code>&lt;figure&gt;</code> element</h3>
<p><img src="https://placekitten.com/480/480" alt="Image alt text"></p>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
<figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
<h3>Plain <code>&lt;img&gt;</code> element</h3>
<p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
<h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
<figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
<h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and <code>&lt;figcaption&gt;</code> elements</h3>
<figure>
<img src="https://placekitten.com/420/420" alt="Image alt text">
<img src="https://placekitten.com/420/420" alt="Photo of a kitten">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
<h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> element</h3>
<figure>
<picture>
<source srcset="https://placekitten.com/800/800"
media="(min-width: 800px)">
<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
</picture>
</figure>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>