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

Add picture element

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!).

index.html

@@ -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>

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": {