4 #permalink Elements

Unclassed HTML elements (type selectors)

Example
<tr data-start-time="2014/04/24 9:00:00" data-end-time="2014/04/24 09:15:00">
  <td scope="row">9:00 - 09:15</td>
  <td>Opening</td>
</tr>
<pre>
<code>&lt;tr data-start-time="2014/04/24 9:00:00" data-end-time="2014/04/24 09:15:00"&gt;
  &lt;td scope="row"&gt;9:00 - 09:15&lt;/td&gt;
  &lt;td&gt;Opening&lt;/td&gt;
&lt;/tr&gt;</code>
</pre>

4.2 #4.forms Forms

Global styles

Examples
Default styling
:hover
Hover state
:focus
Focus state
<input class="[modifier class]" type="text" placeholder="Example text">
Example
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Examples
Default styling

:hover
Hover state

:focus
Focus state

<textarea class="[modifier class]" placeholder="Example text"></textarea>
<br>
<textarea class="[modifier class]" placeholder="Example text">Hello world.</textarea>
Example

Nikola Tesla — Heading 1

War of Currents — Heading 2

X-ray experimentation — Heading 3

AC and the induction motor — Heading 4

<h1>Nikola Tesla — Heading 1</h1>
<h2>War of Currents — Heading 2</h2>
<h3>X-ray experimentation — Heading 3</h3>
<h4>AC and the induction motor — Heading 4</h4>

4.4 #4.hr Horizontal rule

Horizontal rule example

Example

<hr>
Example
  1. List item
  2. List item
  3. List item
  4. List item
<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
Example
  • List item
  • List item
  • List item
  • List item
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

4.7 #4.page Page

Different text elements

Example
Emphasized text
<em>Emphasized text</em>

4.7.2 #4.page.paragraph Paragraph

Paragraph example. List items share the font size and line height with paragraph text.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.</p>
Example
Strong text
<strong>Strong text</strong>
Example

Exampletext

<p>Example<sub>text</sub></p>
Example

Exampletext

<p>Example<sup>text</sup></p>
Example

Good Design Is Innovative: The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

— Dieter Rams, August 31, 2016
<blockquote>
  <p><strong>Good Design Is Innovative:</strong> The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.</p>
  <cite>— Dieter Rams, <a href="#article-name">August 31, 2016</a></cite>
</blockquote>

4.9 #4.tables Tables

Table examples.

Example
People drink a lot of coffee each year, but how much is that (in thousand 60kg bags)?
2013 2014 CAGR
Africa 10621 10809 5.6%
Asia & Oceania 29397 30023 4.5%
Central America & Mexico 5028 4973 0.0%
Europe 50621 50291 0.7%
North America 26931 27674 2.6%
South America 24897 25393 2.0%
<table>
  <caption>People drink a lot of coffee each year, but how much is that (in thousand 60kg bags)?</caption>
  <thead>
    <tr>
      <th></th>
      <th>2013</th>
      <th>2014</th>
      <th>CAGR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Africa</th>
      <td>10621</td>
      <td>10809</td>
      <td>5.6%</td>
    </tr>
    <tr>
      <th>Asia & Oceania</th>
      <td>29397</td>
      <td>30023</td>
      <td>4.5%</td>
    </tr>
    <tr>
      <th>Central America & Mexico</th>
      <td>5028</td>
      <td>4973</td>
      <td>0.0%</td>
    </tr>
    <tr>
      <th>Europe</th>
      <td>50621</td>
      <td>50291</td>
      <td>0.7%</td>
    </tr>
    <tr>
      <th>North America</th>
      <td>26931</td>
      <td>27674</td>
      <td>2.6%</td>
    </tr>
    <tr>
      <th>South America</th>
      <td>24897</td>
      <td>25393</td>
      <td>2.0%</td>
    </tr>
  </tbody>
</table>