<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" id="radio">
<label for="radio">Click me</label>
<label for="radio">
<input type="radio" id="radio">Click me
</label>
</fieldset>
</form>
<input type="text" placeholder="text" />
<label>First Name:
<input type="text" placeholder="Agent" />
</label>
<input type="email" placeholder="email" />
<input type="search" placeholder="search" />
<label><input type="radio" />Option 1</label>
<label><input type="checkbox" />Option 1</label>
<input type="url" placeholder="url" />
<input type="number" placeholder="42" />
<input type="tel" placeholder="01823" />
<input type="color" />
<input type="range" />
<input type="time" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="datetime" />
<input type="datetime-local" />
<textarea placeholder="Text area"></textarea>
<select>
<optgroup label="Group 1">
<option>Option 1</option>
</optgroup>
<option>Option 2</option>
</select>
<progress value="70" max="100">70%</progress>
<input type="submit" value="submit" />
Represents the result of a calculation or user action.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result">60</output>
</form>
<div class="select-menu select-menu--block select-menu--alt select-menu--small">
<label class="visually-hidden">Child marriage and…</label>
<select class="">
<option>Spanish</option>
<option>English</option>
</select>
<div class="select-menu__arrow"></div>
</div>
The class structure follows the structure discussed by Harry Roberts in his article practical font sizing in CSS on CSS Wizardry.
<h1 class="alpha">The fox</h1>
<h2 class="beta">The fox</h2>
<h3 class="gamma">The fox</h3>
<h4 class="delta">The fox</h4>
<h5 class="epsilon">The fox</h5>
<h6 class="zeta">The fox</h6>
Use the .uppercase class to enforce a heading to be in capitals.
<h1 class="alpha / uppercase">The fox</h1>
<h2 class="beta / uppercase">The fox</h2>
<h3 class="gamma / uppercase">The fox</h3>
<h4 class="delta / uppercase">The fox</h4>
<h5 class="epsilon / uppercase">The fox</h5>
<h6 class="zeta / uppercase">The fox</h6>
Using .drop class applies only half the regular bottom bottom.
<h1 class="drop">The fox</h1>
<h1>The fox</h1>
<h1>The fox</h1>
This is the default markup and styling for a horizontal rule.
<hr>
Use the .is-plain class on any list to remove type-styling, margin, and padding.
This is just a plain unordered list, no special classes have been applied.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
This is just a plain ordered list, no special classes have been applied.
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
Use the .is-plain class on any list to remove type-styling, margin, and padding.
<ul class="is-plain">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
For inline definitions use the dfn element.
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
Usually an image, illustration, diagram, code snippet, etc. followed by a figcaption.
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
The Block Quotation Element indicates that the enclosed text is an extended quotation.
This is a quotation taken from the Mozilla Developer Center.
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from
the Mozilla Developer Center.</p>
</blockquote>
This element is intended for short quotations that don't require paragraph breaks.
According to Mozilla's website, Firefox 1.0was released in 2004 and became a big success.
<p>According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0was released in 2004 and became a big success.</q></p>
Used for referencing external sources.
<cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
Used to denote the main banner area, or a heading group inside a content section.
Sub title
<header role="banner">Hero Content</header>
<article>
<header>
<h1>Main title</h1>
<p>Sub title</p>
</header>
</article>
For major page navigation, including pagination.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Only one per page, for the main content.
The apple is the pomaceous fruit of the apple tree.
These bright red apples are the most common found in many supermarkets.
...
...
These juicy, green apples make a great filling for apple pies.
...
...
<main>
<header>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
</header>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
Contains complementary content to it's parent section. (often used as a sidebar)
The Disney movie The Little Mermaid was first released to theatres in 1989.
More info about the movie...
<article>
<p>
The Disney movie <em>The Little Mermaid</em> was
first released to theatres in 1989.
</p>
<aside>
<p>
The movie earned $87 million during its initial release.
</p>
</aside>
<p>
More info about the movie...
</p>
</article>
The article element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like:
Dinos were great!
Way too scary for me.
I agree, dinos are my favorite.
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
For groups of content that have headings.
Some content
<section>
<h1>Test</h1>
<p>Some content</p>
</section>
A footer typically contains information about the author of the section, copyright data or links to related documents.
<footer>
Some copyright info or perhaps some author
info for an <article>?
</footer>
| Header content 1 | Header content 2 |
|---|---|
| Body content 1 | Body content 2 |
| Body content 1 | Body content 2 |
| Body content 1 | Body content 2 |
| Body content 1 | Body content 2 |
| Body content 1 | Body content 2 |
| Footer content 1 | Footer content 2 |
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
All of the spacing throughout the website is based from the type styling, conforming to a rule of 1.5 times the font-size. Here you can see two paragraphs of generated lorem-ipsum to get a feel of the line-height and spacing.
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu porttitor mauris. Duis a viverra dolor, lacinia porta massa. Aliquam faucibus libero viverra rhoncus lobortis. Quisque malesuada euismod lorem ac luctus. Sed sit amet nunc tellus. Suspendisse maximus nunc sed mi vehicula rutrum. Praesent lobortis euismod turpis sit amet venenatis. Nullam eu enim suscipit, accumsan arcu ut, fringilla odio. Pellentesque ultrices accumsan leo, sit amet vulputate ipsum feugiat id. Pellentesque a pharetra quam. Aliquam rutrum, turpis hendrerit varius pulvinar, libero nisi congue augue, in condimentum diam urna volutpat lectus. Praesent at ipsum a lacus accumsan accumsan. Integer mollis velit ac urna efficitur, eget ultricies nisl posuere. Nullam elementum nunc ac ante fermentum, ac consequat felis scelerisque. Cras dui lacus, posuere semper magna et, ornare porta arcu.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sit amet erat accumsan, sagittis metus eget, bibendum nisl. Curabitur dolor enim, bibendum id libero non, cursus iaculis libero. Vivamus orci nisl, posuere vel nibh eu, maximus ullamcorper augue. Vivamus scelerisque laoreet tristique. Donec ut urna lacus. Morbi et nisi sit amet leo vehicula pharetra sed ut elit. Pellentesque tincidunt, quam ut viverra tincidunt, lorem risus facilisis sapien, at gravida lorem dui fermentum arcu. Nam varius felis risus. Morbi a ipsum imperdiet, posuere lorem quis, tincidunt augue. Sed sed metus vitae nunc ullamcorper elementum. Vestibulum ornare augue tellus, vel accumsan augue euismod at. Quisque vitae convallis dolor, id tempus ipsum. Phasellus nisl ante, ullamcorper sit amet tortor at, suscipit venenatis sapien. Sed commodo odio in dolor tempus, eget rhoncus mauris bibendum.
<p>The quick brown fox jumped over the lazy dog</p>
<p>The quick brown fox jumped <small>over the lazy dog</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu porttitor mauris. Duis a viverra dolor, lacinia porta massa. Aliquam faucibus libero viverra rhoncus lobortis. Quisque malesuada euismod lorem ac luctus. Sed sit amet nunc tellus. Suspendisse maximus nunc sed mi vehicula rutrum. Praesent lobortis euismod turpis sit amet venenatis. Nullam eu enim suscipit, accumsan arcu ut, fringilla odio. Pellentesque ultrices accumsan leo, sit amet vulputate ipsum feugiat id. Pellentesque a pharetra quam. Aliquam rutrum, turpis hendrerit varius pulvinar, libero nisi congue augue, in condimentum diam urna volutpat lectus. Praesent at ipsum a lacus accumsan accumsan. Integer mollis velit ac urna efficitur, eget ultricies nisl posuere. Nullam elementum nunc ac ante fermentum, ac consequat felis scelerisque. Cras dui lacus, posuere semper magna et, ornare porta arcu.
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sit amet erat accumsan, sagittis metus eget, bibendum nisl. Curabitur dolor enim, bibendum id libero non, cursus iaculis libero. Vivamus orci nisl, posuere vel nibh eu, maximus ullamcorper augue. Vivamus scelerisque laoreet tristique. Donec ut urna lacus. Morbi et nisi sit amet leo vehicula pharetra sed ut elit. Pellentesque tincidunt, quam ut viverra tincidunt, lorem risus facilisis sapien, at gravida lorem dui fermentum arcu. Nam varius felis risus. Morbi a ipsum imperdiet, posuere lorem quis, tincidunt augue. Sed sed metus vitae nunc ullamcorper elementum. Vestibulum ornare augue tellus, vel accumsan augue euismod at. Quisque vitae convallis dolor, id tempus ipsum. Phasellus nisl ante, ullamcorper sit amet tortor at, suscipit venenatis sapien. Sed commodo odio in dolor tempus, eget rhoncus mauris bibendum.</p>
The bold and italic elements are used for presentational purposes, whereas the strong and emphasis elements represent structure.
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
<p>The quick <b>brown</b> fox jumped over the <strong>lazy</strong> dog</p>
<p>The quick <i>brown</i> fox jumped over the <em>lazy</em> dog</p>
For text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.
This text is superscripted
<p>This text is <sup>superscripted</sup></p>
For text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.
This text is superscripted
<p>This text is <sub>superscripted</sub></p>
Use the strikethrough element to represent things that are no longer relevant or no longer accurate.
This text is superscripted
<p>This text is <sub>superscripted</sub></p>
For a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.
The <mark> element is used to highlight text
<p>The <mark> element is used to <mark>highlight</mark> text</p>
The code element is for displaying raw computer code. Note: whitepsace and new lines aren't considered important.
While the pre element is for preformatted text, and it preserves whitespace and line breaks.
This is how we declare a Javascript variable:<br>
var i = 0;
body {
color:red;
}
<p>This is how we declare a Javascript variable:<br\>
<code>var i = 0;</code>
</p>
<pre>
body {
color:red;
}
</pre>
The time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar
The concert starts at .
<p>The concert starts at <time>20:00</time>.</p>
The address element supplies contact information for its nearest article or body ancestor; in the latter case, it applies to the whole document.
<address>
You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>
Use the title attribute to define the full description of the abbreviation. Many user agents present this as a tooltip.
Welcome to the WWW!
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
.is-hidden
This is used to completely remove an element from the document flow and from screen-readers.
This is usually applied or removed with JavaScript.
.visually-hidden
This is still visible to screen-readers, so it is used for accessibility purposes.
.pull-right
This is used to apply a right float.
.pull-left
This is used to apply a left float.
.align-right
This is used to apply text-align: right;
.align-center
This is used to apply text-align: center;
.align-left
This is used to apply text-align: left;
