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

Add picture element
v0.9.5
2025-08-21 13:21:56 +02:00 · 2021-04-03 15:54:44 -04:00 · 2021-04-03 15:54:12 -04:00 · 2021-04-03 15:53:12 -04:00 · 2021-04-03 15:45:24 -04:00 · 2020-04-05 08:46:46 +02:00
3 changed files with 20 additions and 8 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.9.5 (April 3, 2021)
+
+- Add <picture> element (thanks @AurelioDeRosa!).
+
 # 0.9.4 (April 3, 2021)

 - Remove unnecessary role attributes. Update headings (thanks @gipsi!).
--- a/index.html
+++ b/index.html
@@ -295,7 +295,7 @@
              <p><s>This text has a strikethrough</s>.</p>
              <p>Superscript<sup>®</sup>.</p>
              <p>Subscript for things like H<sub>2</sub>O.</p>
-              <p><small>This small text is small for for fine print, etc.</small></p>
+              <p><small>This small text is small for fine print, etc.</small></p>
              <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
              <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
              <p><cite>This is a citation.</cite></p>
@@ -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>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "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.",
  "main": "index.html",
  "scripts": {
Author	SHA1	Message	Date
Chris Bracco	931b8637d5	Merge pull request #39 from cbracco/issue/13-picture-element Add picture element	2021-04-03 15:54:44 -04:00
Chris Bracco	a0c969b93e	v0.9.5	2021-04-03 15:54:12 -04:00
Chris Bracco	d882dfcb48	Add picture element; Revise other image examples	2021-04-03 15:53:12 -04:00
Chris Bracco	e191677997	Merge pull request #27 from TomasHubelbauer/patch-1 Remove duped word	2021-04-03 15:45:24 -04:00
Tomáš Hübelbauer	f3ee1b3575	Remove duped word	2020-04-05 08:46:46 +02:00