From 66a77835cc63dd57a1e777bae75525ebc52d0742 Mon Sep 17 00:00:00 2001
From: Chris Bracco <chris@cbracco.me>
Date: Sat, 3 Apr 2021 14:49:23 -0400
Subject: [PATCH] Remove <keygen>; Re-organize additions

---
 index.html | 91 ++++++++++++++++++++++++++----------------------------
 1 file changed, 43 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index 5022254..c6b07b0 100644
--- a/index.html
+++ b/index.html
@@ -18,12 +18,12 @@
             <ul>
               <li><a href="#text__headings">Headings</a></li>
               <li><a href="#text__paragraphs">Paragraphs</a></li>
-              <li><a href="#text__blockquotes">Blockquotes</a></li>
               <li><a href="#text__lists">Lists</a></li>
+              <li><a href="#text__blockquotes">Blockquotes</a></li>
+              <li><a href="#text__details">Details / Summary</a></li>
+              <li><a href="#text__address">Address</a></li>
               <li><a href="#text__hr">Horizontal rules</a></li>
               <li><a href="#text__tables">Tabular data</a></li>
-              <li><a href="#text__address">Address</a></li>
-              <li><a href="#text__details">The details element</a></li>
               <li><a href="#text__code">Code</a></li>
               <li><a href="#text__inline">Inline elements</a></li>
               <li><a href="#text__comments">HTML Comments</a></li>
@@ -82,17 +82,6 @@
             </div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
-          <article id="text__blockquotes">
-            <header><h1>Blockquotes</h1></header>
-            <div>
-              <blockquote>
-                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
-                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
-                <cite><a href="#!">Said no one, ever.</a></cite>
-              </blockquote>
-            </div>
-            <footer><p><a href="#top">[Top]</a></p></footer>
-          </article>
           <article id="text__lists">
             <header><h1>Lists</h1></header>
             <div>
@@ -116,6 +105,36 @@
             </div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
+          <article id="text__blockquotes">
+            <header><h1>Blockquotes</h1></header>
+            <div>
+              <blockquote>
+                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
+                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
+                <cite><a href="#!">Said no one, ever.</a></cite>
+              </blockquote>
+            </div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="text__details">
+            <header><h1>Details / Summary</h1></header>
+            <details>
+              <summary>Expand for details</summary>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
+            </details>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="text__address">
+            <header><h1>Address</h1></header>
+            <address>
+              Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
+              Visit us at:<br>
+              Example.com<br>
+              Box 564, Disneyland<br>
+              USA
+            </address>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
           <article id="text__hr">
             <header><h1>Horizontal rules</h1></header>
             <div>
@@ -178,26 +197,6 @@
             </table>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
-          <article id="text__address">
-						<header><h1>Address</h1></header>
-						<address>
-							Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
-							Visit us at:<br>
-							Example.com<br>
-							Box 564, Disneyland<br>
-							USA
-						</address>
-						<footer><p><a href="#top">[Top]</a></p></footer>
-					</article>
-					<article id="text__details">
-						<header><h1>The details element</h1></header>
-						<details>
-							<summary>Details summary</summary>
-							<p>More details come here.<br>
-							Another sentence.</p>
-						</details>
-						<footer><p><a href="#top">[Top]</a></p></footer>
-					</article>
           <article id="text__code">
             <header><h1>Code</h1></header>
             <div>
@@ -305,12 +304,12 @@
           </article>
           <article id="embedded__embed">
             <header><h2>Embed</h2></header>
-            <div><embed></div>
+            <div><embed src="index.html" height="300"></div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
           <article id="embedded__object">
             <header><h2>Object</h2></header>
-            <div><object></object></div>
+            <div><object data="index.html" height="300"></object></div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
         </section>
@@ -436,18 +435,14 @@
                 <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
               </p>
               <p>
-								<label for="idatal">Datalist</label>
-								<input type="text" id="idatal" list="example-list">
-								<datalist id="example-list">
-									<option value="Example #1">
-									<option value="Example #2">
-									<option value="Example #3">
-								</datalist>
-							</p>
-							<p>
-								<label for="ikeygen">Keygen</label>
-								<keygen id="ikeygen">
-							</p>
+                <label for="idl">Datalist</label>
+                <input type="text" id="idl" list="example-list">
+                <datalist id="example-list">
+                  <option value="Example #1">
+                  <option value="Example #2">
+                  <option value="Example #3">
+                </datalist>
+              </p>
             </fieldset>
             <p><a href="#top">[Top]</a></p>
             <fieldset id="forms__action">