mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-08-02 12:21:07 +02: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
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"> <article id="embedded__images">
<header><h2>Images</h2></header> <header><h2>Images</h2></header>
<div> <div>
<h3>No <code>&lt;figure&gt;</code> element</h3> <h3>Plain <code>&lt;img&gt;</code> element</h3>
<p><img src="https://placekitten.com/480/480" alt="Image alt text"></p> <p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3> <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
<figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure> <figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3> <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and <code>&lt;figcaption&gt;</code> elements</h3>
<figure> <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> <figcaption>Here is a caption for this image.</figcaption>
</figure> </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> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>