Text
Headings
H1 heading small text
H2 heading small text
H3 heading small text
H4 heading small text
H5 heading small text
H6 heading small text
<h1>H1 heading <small>small text</small></h1> <h2>H2 heading <small>small text</small></h2> <h3>H3 heading <small>small text</small></h3> <h4>H4 heading <small>small text</small></h4> <h5>H5 heading <small>small text</small></h5> <h6>H6 heading <small>small text</small></h6>
Paragraphs and text tags
This is an ADRESS tag inside a paragraph, This is an ABBR tag, This is a b tag inside a paragraph,
Edit this with contentEditable attribute
This is a BLOCKQUOTE tag -Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.This is a CITE tag
This is a PRE tag -Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.
<p> <address>This is an ADRESS tag</address> inside a paragraph, <abbr title="Abbreviated text">This is an ABBR tag</abbr>, <b>This is a b tag</b> inside a paragraph, <del>This is a del tag</del> inside a paragraph, <em>This is an em tag</em> inside a paragraph, <i>This is an i tag</i> inside a paragraph, <ins>This is a ins tag</ins> inside a paragraph, <b>This is a b tag</b> inside a paragraph, <span>This is a span tag (no variations)</span> inside a paragraph, This is a <strong>strong tag:</strong> inside a paragraph, This is a <sub>sub tag:</sub> inside a paragraph, This is a <sup>sup tag:</sup> inside a paragraph, <time>This is a TIME tag</time> inside a paragraph, This is an <u>u tag:</u> inside a paragraph. </p>
Regular list
- Element 1
- Element 2
- Element 3
- Element 4
Ordered list
- Element 1
- Element 2
- Element 3
- Element 4
Regular list with links
Definition list
- Definition term
- Definition description
Summary and details list
Summary
Rest of details.<!-- Regular list --> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ul> <!-- Ordered list --> <ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ol> <!-- Definition list --> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <!-- Rerular list with links --> <dl> <dt>Definition term</dt> <dd>Definition description</dd> </dl>
Form elements
<form> <fieldset> <h3><u>Default form and fieldset</u></h3> <legend>Default legend</legend> <br><br> <input type="text" name="cx" value="Default input"><label>label</label> <br><br> <input type="input" name="some" value="" placeholder="input"><em>+ em</em> <br><br> <select> <option value="-1">Default select</option> <option value="1">This is an option</option> <option value="2">This is an option</option> <option value="3">This is an option</option> <option value="4">This is an option</option> <option value="5">This is an option</option> </select> <textarea placeholder="Default textarea"></textarea> <br><br> <h3><u>Emphatic form inputs and labels</u></h3> <strong><input id="em-form0" name="some" value="" type="input" placeholder="em input"><label>strong input + label</label></strong> <strong><input id="em-form1" name="some" value="" type="checkbox"><label for="em-form1">strong checkbox + label</label></strong> <strong><input id="em-form2" name="some" value="" type="radio"><label for="em-form2">strong radio + label</label></strong> <strong><input id="em-form3" name="some" value="" type="radio"><label for="em-form3">strong radio + label</label></strong> <strong><select> <option value="-1">Strong select</option> <option value="1">This is an option</option> <option value="2">This is an option</option> <option value="3">This is an option</option> <option value="4">This is an option</option> <option value="5">This is an option</option> </select></strong> <h3><u>data-mode="switcher"</u></h3> <span data-mode="switcher"> <input type="checkbox" name="switcher" id="myswitchergrid2" hidden> <label for="myswitchergrid2"> <span></span> </label> </span> <label>[data-mode="switcher"] input + label span + label</label> <br><br> </fieldset> </form>
Tables
| table thead tr th | table thead tr th | table thead tr th | table thead tr th |
|---|---|---|---|
| table tbody tr td | table tbody tr td | table tbody tr td | table tbody tr td |
| table tbody tr td | table tbody tr td | table tbody tr td | table tbody tr td |
| table tbody tr td | table tbody tr td | table tbody tr td | table tbody tr td |
<table> <thead> <tr> <th>table thead tr th</th> <th>table thead tr th</th> <th>table thead tr th</th> <th>table thead tr th</th> </tr> </thead> <tbody> <tr> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> </tr> <tr> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> </tr> <tr> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> <td>table tbody tr td</td> </tr> </tbody> </table>
Navigation
Basic nav
List inside nav
<!-- Nav --> <nav> <a href="#">nav a</a> <a href="#">nav a</a> <a href="#">nav a</a> <a href="#">nav a</a> <label>nav label</label> <form action="http://www.google.com/cse"> <input type="hidden" name="cx" value=""> <input type="text" name="q" placeholder="search"> <input type="submit" name="sa" value="·"> </form> </nav> <hr> <!-- Nav with list --> <nav> <ul> <li><a href="#">nav ul li a</a></li> <li><a href="#">nav ul li a</a></li> <li><a href="#">nav ul li a</a></li> <li><a href="#">nav ul li a</a></li> <li><label>nav ul li label</label></li> </ul> </nav>
Hypertext
Links
aa q
a i
a b
a small
a span
<a href="starter.html" title="">a</a><br> <a href="starter.html" title=""><q>a q</q></a><br> <a href="starter.html" title=""><i>a i</i></a><br> <a href="starter.html" title=""><b>a b</b></a><br> <a href="starter.html" title=""><small>a small</small></a><br> <a href="starter.html" title=""><span>a span</span></a><br>
Emphatic links
em a
em a img
em a svgem small a
<em><a href="starter.html" title="">em a</a></em> <em><a href="starter.html" title=""><img src="../src/ics/icon-mini.png" alt="bcn CSS logo">em a img</a></em> <em><a href="starter.html" title=""><svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 512,198.525L 335.11,172.821L 256,12.53l-79.108,160.291L0,198.525l 128,124.769L 97.784,499.47L 256,416.291l 158.216,83.179 l-30.217-176.176L 512,198.525z"></path></g></svg>em a svg</a></em><br><br> <em><small><a href="starter.html" title="">em small a</a></small></em> <em><small><a href="starter.html" title=""><img src="../src/ics/icon-mini.png" alt="bcn CSS logo"></a></small></em> <em><small><a href="starter.html" title=""><svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 512,198.525L 335.11,172.821L 256,12.53l-79.108,160.291L0,198.525l 128,124.769L 97.784,499.47L 256,416.291l 158.216,83.179 l-30.217-176.176L 512,198.525z"></path></g></svg></a></small></em><br><br> <em><div><a href="starter.html" title="">em a div</a></div></em><br><br>
Emphatic labels
<em><label>em label</label></em> <em><label><img src="../src/ics/icon-mini.png" alt="bcn CSS logo">em label img</label></em> <em><label><svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 512,198.525L 335.11,172.821L 256,12.53l-79.108,160.291L0,198.525l 128,124.769L 97.784,499.47L 256,416.291l 158.216,83.179 l-30.217-176.176L 512,198.525z"></path></g></svg>em label svg</label></em>
Emphatic buttons
<em><button>em button</button></em> <em><button><img src="../src/ics/icon-mini.png" alt="bcn CSS logo">em button</button></em> <em><button><svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 512,198.525L 335.11,172.821L 256,12.53l-79.108,160.291L0,198.525l 128,124.769L 97.784,499.47L 256,416.291l 158.216,83.179 l-30.217-176.176L 512,198.525z"></path></g></svg>em button svg</button></em>
Semantic link states
u em a<u><em><a href="starter.html" title="">u em a</a></em></u> <del><em><a href="starter.html" title="">del em a</a></em></del> <ins><em><a href="starter.html" title="">ins em a</a></em></ins> <u><em><label>u em label</label></em></u> <del><em><label><del>del em label</label></em></del> <ins><em><label>ins em label</label></em></ins> <u><em><button>u em button</button></em></u> <del><em><button>del em button</button></em></del> <ins><em><button>ins em button</button></em></ins>
Grouped emphatic links
strong em a strong u em a strong em a strong em a strong em a<strong> <em><a href="starter.html" title="">strong em a</a></em> <u><em><a href="starter.html" title="">strong u em a</a></em></u> <em><a href="starter.html" title="">strong em a</a></em> <em><a href="starter.html" title="">strong em a</a></em> <em><a href="starter.html" title="">strong em a</a></em> </strong>
Grouped emphatic small links
strong em small a strong u em small a strong em small a strong em small a<strong> <em><small><a href="starter.html" title="strong em small a">strong em small a</a></small></em> <u><em><small><a href="starter.html" title="strong u em small a">strong u em small a</a></small></em></u> <em><small><a href="starter.html" title="strong em small a">strong em small a</a></small></em> <em><small><a href="starter.html" title="strong em small a">strong em small a</a></small></em> </strong>
Grouped emphatic labels
<strong> <em><label>strong em label</label></em> <em><label>strong em label</label></em> <em><label>strong em label</label></em> <em><label>strong em label</label></em> </strong>
Grouped emphatic buttons
<strong> <em><button>strong em button</button></em> <em><button>strong em button</button></em> <em><button>strong em button</button></em> <em><button>strong em button</button></em> </strong>
Structure
section
<header>header</header> <main>main</main> <section><div>section</div></section> <footer>footer</footer> <br><hr> <article>article</article> <hr> <aside>aside</aside> <hr> <section>section</section>
Article structure
article header h3
article header p
article div p
<article> <header> <h3>article header h3</h3> <p class="lead">article header p</p> </header> <div> <p>article div p</p> </div> <footer> <p>article footer p</p> </footer> <nav> <a href="" title="">article nav a</a> </nav> </article>
Aside structure
<aside> <header> <h3>aside header h3</h3> <p class="lead">aside header p</p> </header> <div> <p>aside div p</p> </div> <footer> <p>Aside footer p</p> </footer> <nav> <a href="" title="">aside nav a</a> </nav> </aside>
Section structure
section header h3
section header p
section div p
<section> <header> <h3>section header h3</h3> <p class="lead">section header p</p> </header> <div> <p>section div p</p> </div> <footer> <p>section footer p</p> </footer> <nav> <a href="" title="">section nav a</a> </nav> </section>
Indicators
<progress min="100" max="1000" value="500">50</progress> <meter low="25" optimum="5" high="75" value="5"></meter>
Image & Media
Img
<img src="../src/img/picture-1.jpg" alt="Picture 1">
Figure
<figure> <img src="../src/img/picture-2.jpg" alt="Picture 2"> <figcaption>Picture</figcaption> </figure>
Figure with video
<figure> <div> <iframe width="560" height="315" src="https://www.youtube.com/embed/Dp_kLXuZI6U" frameborder="0" allowfullscreen></iframe> <figcaption>Barcelona Timelapse by <a href="https://www.youtube.com/Dp_kLXuZI6U" title="Barcelona timelapse video">Garrido</a></figcaption> </div> </figure>