mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-08-06 06:07:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #39 from cbracco/issue/13-picture-element

Browse Source 
Add picture element
This commit is contained in:
Chris Bracco
2021-04-03 15:54:44 -04:00
committed by GitHub
parent e191677997 a0c969b93e
commit 931b8637d5
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -1,3 +1,7 @@
# 0.9.5 (April 3, 2021)
- Add <picture> element (thanks @AurelioDeRosa!).
# 0.9.4 (April 3, 2021) # 0.9.4 (April 3, 2021)
- Remove unnecessary role attributes. Update headings (thanks @gipsi!). - Remove unnecessary role attributes. Update headings (thanks @gipsi!).

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>

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "html5-test-page", "name": "html5-test-page",
"version": "0.9.4", "version": "0.9.5",
"description": "A page filled with common HTML elements to be used for testing purposes.", "description": "A page filled with common HTML elements to be used for testing purposes.",
"main": "index.html", "main": "index.html",
"scripts": { "scripts": {