https://nairobilug.github.io/pelican-alchemy/2000-01-01T09:00:00+03:00A magical ✨ Pelican theme2000-01-01T09:00:00+03:002000-01-01T09:00:00+03:00@taniarasciatag:nairobilug.github.io,2000-01-01:/pelican-alchemy/posts/html5-element-test.html

<p>A example page containing common HTML5 elements for CSS testing purposes. https://github.com/taniarascia/html5-test/</p>

<p>Common HTML5 elements for CSS testing purposes.</p> <h1>Formatting</h1> <p>This sentence is <b>bold</b>. If you like semantics, you might go with <strong>strong</strong> or <em>emphasized</em> text. If not, <i>italic</i> is still around. <small>Small</small> text is for fine print. Your copy can also be _subscripted and ^{superscripted}, <ins>inserted</ins>, <del>deleted</del>, or <mark>highlighted</mark>. You would use a <a href="#!">hyperlink</a> to go to a new page.</p> <p>If you like to write about there are plenty of semantic tags for you. There's the generic <code>code</code>, as well as <kbd>keyboard input</kbd>, <samp>computer output</samp>, and <var>variables</var>.</p> <p>You might have need of a <cite>citation</cite>, <q>short quotation</q>, <abbr>abbreviation</abbr>, or <dfn>definition</dfn>. It might be <time>10:00pm</time>.</p> <address><p>123 Fake Street<br/> Springfield, USA</p></address> <h2>Blockquote</h2> <blockquote class="blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestiae et assumenda molestias alias ut saepe doloribus, porro, deleniti neque, harum minus, commodi laudantium quod excepturi nam corrupti odit provident. <cite>- Blockquote Citation</cite> </blockquote> <h2>Preformatted Text</h2> <pre>class Voila { public: // Voila static const string VOILA = "Voila"; }</pre> <h2>Horizontal Line</h2> <hr/> <h1>Headings</h1> <h1>First Heading h1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus cupiditate minima, magni possimus commodi, eveniet? Rem, adipisci architecto pariatur libero aliquid culpa sunt accusantium. Ipsa error aliquid et! Animi.</p> <h2>Second Heading h2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia molestias ullam quasi est a nemo, accusamus voluptatum autem. Eius explicabo est assumenda voluptatem id, hic maxime mollitia facere debitis quos.</p> <h3>Third Heading h3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo deleniti, repudiandae rerum nam laborum eligendi aperiam. Autem id, ad necessitatibus accusantium, facilis, quae ullam est, voluptates debitis fugiat quos inventore!</p> <h4>Fourth Heading h4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cum eum eligendi voluptatum quasi nisi doloremque ipsam unde, laboriosam nihil voluptatem consequatur quam non similique vero ratione animi sit veritatis.</p> <h5>Fifth Heading h5</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptatem necessitatibus eos iusto nam deserunt, dicta possimus error qui reiciendis, aut dolore magnam eligendi maiores expedita commodi perferendis non blanditiis.</p> <h1>Lists</h1> <h2>Unordered list</h2> <ul> <li>List item one <ul> <li>Nested list item</li> </ul> </li> <li>List item two</li> <li>List item three</li> </ul> <h2>Ordered list</h2> <ol> <li>List item one <ol> <li>Nested list item</li> </ol> </li> <li>List item two</li> <li>List item three</li> </ol> <h2>Definition List</h2> <dl> <dt>Definition Title One</dt> <dd>First definition description</dd> <dt>Definition Title Two</dt> <dd>Second definition description</dd> </dl> <h1>Tables</h1> <table class="table-striped table-hover table"> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tfoot> <tr> <th>Footer 1</th> <th>Footer 2</th> <th>Footer 3</th> </tr> </tfoot> <tbody> <tr> <td>Description 1</td> <td>Description 2</td> <td>Description 3</td> </tr> <tr> <td>Description 1</td> <td>Description 2</td> <td>Description 3</td> </tr> <tr> <td>Description 1</td> <td>Description 2</td> <td>Description 3</td> </tr> </tbody> </table> <h1>Forms</h1> <form> <label for="text">Text Input</label> <input id="text" placeholder="Text Input" type="text"/> <label for="password">Password</label> <input id="password" placeholder="Password" type="password"/> <label for="url">URL</label> <input id="url" placeholder="http://www.example.com" type="url"/> <label for="email">Email Address</label> <input id="email" placeholder="email@example.com" type="email"/> <label for="phone">Phone Number</label> <input id="phone" placeholder="123-123-1234" type="tel"/> <label for="search">Search</label> <input id="search" placeholder="Search" type="search"/> <label for="number">Number</label> <input id="number" placeholder="Number" type="number"/> <label for="select">Select</label> <select id="select"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </select> <label for="checkbox1"> <input checked="checked" id="checkbox1" name="checkbox" type="checkbox"/> Choice A</label> <label for="checkbox2"> <input id="checkbox2" name="checkbox" type="checkbox"/> Choice B</label> <label for="radio1"> <input checked="checked" class="radio" id="radio1" name="radio" type="radio"/> Option 1</label> <label for="radio2"> <input class="radio" id="radio2" name="radio" type="radio"/> Option 2</label> <label for="textarea">Textarea</label> <textarea cols="30" id="textarea" placeholder="Message" rows="5"></textarea> <input type="button" value="Button"/> <input type="submit" value="Submit"/> <input type="reset" value="Reset"/> <button>Button element</button> </form> <h2>Fieldset and Legend</h2> <form> <fieldset> <legend>Legend</legend> <label for="text">Text Input</label> <input id="text" placeholder="Text Input" type="text"/> <input type="submit" value="Submit"/> </fieldset> </form>