1<article>
  2  <h1>Heading 1</h1>
  3  <h2>Heading 2</h2>
  4  <h3>Heading 3</h3>
  5  <h4>Heading 4</h4>
  6  <h5>Heading 5</h5>
  7  <h6>Heading 6</h6>
  8
  9  <p>
 10    This is a paragraph with random content. Duis ut tempor mollit nisi
 11    exercitation et incididunt occaecat tempor aute ex cupidatat exercitation.
 12    Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis
 13    Lorem sint sunt anim velit esse pariatur laborum.
 14  </p>
 15  <p>
 16    This is another paragraph and this paragraph have a link to a footnote
 17    <a href="#footnote" id="footnote-ref"><sup>1</sup></a>.
 18  </p>
 19  <figure>
 20    <blockquote>
 21      <p>
 22        A blockquote paragraph inside a figure element.
 23      </p>
 24    </blockquote>
 25    <figcaption>
 26      And a figcaption containing the Citation element, like in
 27      <cite>
 28        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">mdn web doc</a>
 29      </cite>.
 30    </figcaption>
 31  </figure>
 32  <blockquote>
 33    This is a blockquote <cite>-- and a citation</cite>
 34  </blockquote>
 35
 36  Some inline html elements:
 37  <a>anchor</a>,
 38  <abbr title="Abbreviation">abbr</abbr>,
 39  <b>bold</b>,
 40  <cite>cite</cite>,
 41  <code>code</code>,
 42  <dfn title="dfn">definition</dfn>,
 43  <em>emphasized</em>,
 44  <i>italic</i>,
 45  <kbd>key</kbd>,
 46  <mark>highlighted</mark>,
 47  <small>small</small>,
 48  <strong>strong</strong>,
 49  <sub>sub</sub> (e.g. the 2 in the chemical formula for water: H<sub>2</sub>O),
 50  <sup>sup</sup> (e.g. the n in power of two: 2<sup>n</sup>),
 51  <u>underlined</u>,
 52  <var>variable<var>.
 53
 54  <ul>
 55    <li>
 56      Item 1
 57      <ul>
 58        <li>Sub item 1</li>
 59        <li>Sub item 2</li>
 60      </ul>
 61    </li>
 62    <li>Item 2</li>
 63    <li>Item 3</li>
 64  </ul>
 65
 66  <ol>
 67    <li>First thing</li>
 68    <li>Second thing</li>
 69    <li>Third thing</li>
 70  </ol>
 71
 72  <figure>
 73    <img src="https://picsum.photos/id/145/4000/2000?grayscale" alt="A 4000x2000 image" />
 74    <figcaption>Large images should fit screen</figcaption>
 75  </figure>
 76  <details>
 77    <summary>Expand</summary>
 78    <p>You can read this content when the section is expanded</p>
 79    <figure>
 80      <img src="https://picsum.photos/id/1/300/200" alt="A 300x200 image" />
 81      <figcaption>Small images should not upscale</figcaption>
 82    </figure>
 83  </details>
 84
 85  <form>
 86    <fieldset>
 87      <legend>Buttons examples:</legend>
 88      <button>Normal Button</button>
 89      <button disabled>Disabled Button</button>
 90      <button type="button">Type Button</button>
 91      <button type="reset">Reset Button</button>
 92      <button type="submit">Submit Button</button>
 93    </fieldset>
 94    <fieldset>
 95      <legend>Select examples:</legend>
 96      <label for="form-select">select:</label>
 97      <select name="form-select" id="form-select">
 98        <option value="volvo">Volvo</option>
 99        <option value="saab">Saab</option>
100        <option value="fiat">Fiat</option>
101        <option value="audi">Audi</option>
102      </select>
103
104      <label for="form-select-selected">select with selected:</label>
105
106      <select name="form-select-selected" id="form-select-selected">
107        <option value="volvo">Volvo</option>
108        <option value="saab">Saab</option>
109        <option value="fiat" selected>Fiat</option>
110        <option value="audi">Audi</option>
111      </select>
112
113      <label for="form-select-size">select with size:</label>
114
115      <select name="form-select-size" id="form-select-size" size="3">
116        <option value="volvo">Volvo</option>
117        <option value="saab">Saab</option>
118        <option value="fiat">Fiat</option>
119        <option value="audi">Audi</option>
120      </select>
121
122      <label for="form-select-multiple">select multiple:</label>
123
124      <select name="form-select-multiple" id="form-select-multiple" multiple>
125        <option value="volvo">Volvo</option>
126        <option value="saab">Saab</option>
127        <option value="fiat">Fiat</option>
128        <option value="audi">Audi</option>
129      </select>
130
131      <label for="form-select-optgroup">select with optgroup:</label>
132
133      <select name="form-select-optgroup" id="form-select-optgroup">
134        <optgroup label="Group 1">
135          <option value="volvo">Volvo</option>
136          <option value="saab">Saab</option>
137        </optgroup>
138        <optgroup label="Group 2">
139          <option value="fiat">Fiat</option>
140          <option value="audi">Audi</option>
141        </optgroup>
142      </select>
143    </fieldset>
144    <fieldset>
145      <legend>Textarea examples:</legend>
146      <textarea name="form-textarea" id="form-textarea" rows="10" cols="30">The cat was playing in the garden.</textarea>
147    </fieldset>
148    <fieldset>
149      <legend>Input type examples:</legend>
150      <label for="form-input-button">button:</label>
151      <input type="button" name="form-input-button" id="form-input-button" value="Button">
152      <label for="form-input-checkbox">checkbox:</label>
153      <input type="checkbox" name="form-input-checkbox" id="form-input-checkbox">
154      <label for="form-input-color">color:</label>
155      <input type="color" name="form-input-color" id="form-input-color">
156      <label for="form-input-datalist">datalist:</label>
157      <input list="form-datalist" name="form-input-datalist" id="form-input-datalist">
158      <datalist id="form-datalist">
159        <option value="Edge">
160        <option value="Firefox">
161        <option value="Chrome">
162        <option value="Opera">
163        <option value="Safari">
164      </datalist>
165      <label for="form-input-date">date:</label>
166      <input type="date" name="form-input-date" id="form-input-date">
167      <label for="form-input-datetime-local">datetime-local:</label>
168      <input type="datetime-local" name="form-input-datetime-local" id="form-input-datetime-local">
169      <label for="form-input-email">email:</label>
170      <input type="email" name="form-input-email" id="form-input-email">
171      <label for="form-input-file">file:</label>
172      <input type="file" name="form-input-file" id="form-input-file">
173      <label for="form-input-image">image:</label>
174      <input type="image" name="form-input-image" id="form-input-image" alt="input type image" src="{{<  resource-relurl "images/sine-die-logo.svg" >}}" style="height: 2em; width: 2em;">
175      <label for="form-input-month">month:</label>
176      <input type="month" name="form-input-month" id="form-input-month">
177      <label for="form-input-number">number:</label>
178      <input type="number" name="form-input-number" id="form-input-number">
179      <label for="form-input-password">password:</label>
180      <input type="password" name="form-input-password" id="form-input-password">
181      <label for="form-input-range">range:</label>
182      <input type="range" name="form-input-range" id="form-input-range">
183      <label for="form-input-reset">reset:</label>
184      <input type="reset" name="form-input-reset" id="form-input-reset">
185      <label for="form-input-search">search:</label>
186      <input type="search" name="form-input-search" id="form-input-search">
187      <label for="form-input-submit">submit:</label>
188      <input type="submit" name="form-input-submit" id="form-input-submit">
189      <label for="form-input-switch">switch:</label>
190      <input type="checkbox" name="form-input-switch" id="form-input-switch" role="switch">
191      <label for="form-input-tel">tel:</label>
192      <input type="tel" name="form-input-tel" id="form-input-tel">
193      <label for="form-input-text">text:</label>
194      <input type="text" name="form-input-text" id="form-input-text">
195      <label for="form-input-time">time:</label>
196      <input type="time" name="form-input-time" id="form-input-time">
197      <label for="form-input-url">url:</label>
198      <input type="url" name="form-input-url" id="form-input-url">
199      <label for="form-input-week">week:</label>
200      <input type="week" name="form-input-week" id="form-input-week">
201      <label for="form-input-placeholder">placeholder:</label>
202      <input name="form-input-placeholder" id="form-input-placeholder" placeholder="this is a placeholder">
203      <label for="form-input-required">required:</label>
204      <input name="form-input-required" id="form-input-required" required>
205    </fieldset>
206    <fieldset>
207      <legend>Radio buttons</legend>
208      <label>
209        <input type="radio" name="form-input-radio" id="form-input-radio-1">
210        radio one
211      </label>
212       <label>
213        <input type="radio" name="form-input-radio" id="form-input-radio-2">
214        radio two
215      </label>
216    </fieldset>
217  </form>
218  <hr />
219  <footer>
220    This is the footer
221    <ol>
222      <li id="footnote">
223        <p>Footnote text links back.<a href="#footnote-ref">↩</a></p>
224      </li>
225    </ol>
226  </footer>
227</article>