4 #permalink Elements

Unclassed HTML elements (type selectors)

4.1 #4.code Code

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

4.2.1 #4.forms.input Input

Input styles

Examples
Default styling
:hover
Hover state
:focus
Focus state 
<input class="[modifier class]" type="text" placeholder="Example text">

4.2.2 #4.forms.select Select

Select styles

Example 
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

4.2.3 #4.forms.textarea Textarea

Textarea styles

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>

4.3 #4.headings Headings

Heading examples

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>

4.5 #4.links Links

Link examples

Examples
Default styling
Link example
:hover
Hover state
Link example
:focus
Focus state
Link example
:visited
Visited state
Link example 
<a href="#">Link example</a>

4.6 #4.lists Lists

4.6.1 #4.lists.ordered Ordered

List examples

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>

4.6.2 #4.lists.unordered Unordered

List examples

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

4.7.1 #4.page.emphasis Emphasis

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>

4.7.3 #4.page.strong Strong

Example
Strong text 
<strong>Strong text</strong>

4.7.4 #4.page.sub Sub

Example

Exampletext

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

4.7.5 #4.page.sup Sup

Example

Exampletext

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

4.8 #4.quote Blockquote

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>