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

Code

<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, ~~This is a del tag~~ inside a paragraph, This is an em tag inside a paragraph, This is an i tag inside a paragraph, This is a ins tag inside a paragraph, This is a b tag inside a paragraph, This is a span tag (no variations) inside a paragraph, This is a strong tag: inside a paragraph, This is a _{sub tag:} inside a paragraph, This is a ^{sup tag:} inside a paragraph, This is a TIME tag inside a paragraph, This is an u 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.

Code

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

Code

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

Default form and fieldset

Default legend

label

+ em

Emphatic form inputs and labels

strong input + label strong checkbox + label strong radio + label strong radio + label

data-mode="switcher"

[data-mode="switcher"] input + label span + label

Code

<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

Code

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

Basic nav

List inside nav

Code

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

a
a q
a i
a b
a small
a span

Code

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

em small a

em a div

Code

<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 img em label svg

Code

<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

Code

<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 ~~del em a~~ ins em a

u em label ~~~~del em label~~~~ ins em label

Code

<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

Code

<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

Code

<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 strong em label strong em label

Code

<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

Code

<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

header

main

section

article

section

Code

<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

Code

<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

Code

<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

Code

<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

Code

<progress min="100" max="1000" value="500">50</progress>
<meter low="25" optimum="5" high="75" value="5"></meter>

Image & Media

Img

Code

<img src="../src/img/picture-1.jpg" alt="Picture 1">

Figure

Code

<figure>
	<img src="../src/img/picture-2.jpg" alt="Picture 2">
	<figcaption>Picture</figcaption>
</figure>

Figure with video

Barcelona Timelapse by Garrido

Code

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

◉

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

Paragraphs and text tags

Regular list

Ordered list

Regular list with links

Definition list

Summary and details list

Form elements

Default form and fieldset

Emphatic form inputs and labels

data-mode="switcher"

Tables

Navigation

Basic nav

List inside nav

Hypertext

Links

Emphatic links

Emphatic labels

Emphatic buttons

Semantic link states

Grouped emphatic links

Grouped emphatic small links

Grouped emphatic labels

Grouped emphatic buttons

Structure

Article structure

Aside structure

Section structure

Indicators

Image & Media

Img

Figure

Figure with video