Basic HTML style guide for developing basic element styles.

style_guide.html

<div id="top" class="page">
<ul>
 	<li><a href="#text__headings">Headings</a></li>
 	<li><a href="#text__paragraphs">Paragraphs</a></li>
 	<li><a href="#text__blockquotes">Blockquotes</a></li>
 	<li><a href="#text__lists">Lists</a></li>
 	<li><a href="#text__tables">Tabular data</a></li>
 	<li><a href="#text__inline">Inline elements</a></li>
</ul>
</div>

<hr />

<section id="text"><header>
<h1>Headings</h1>
</header><article id="text__headings">
<div>
<h1>Heading 1</h1>
<h1><a href="#">Heading 1 Link</a></h1>
<h2>Heading 2</h2>
<h2><a href="#">Heading 2 Link</a></h2>
<h3>Heading 3</h3>
<h3><a href="#">Heading 3 Link</a></h3>
<h4>Heading 4</h4>
<h4><a href="#">Heading 4 Link</a></h4>
<h5>Heading 5</h5>
<h5><a href="#">Heading 5 Link</a></h5>
<h6>Heading 6</h6>
<h6><a href="#">Heading 6 Link</a></h6>
</div>
<footer><a href="#top">[Top]</a></footer></article><article id="text__paragraphs"><header>

<hr />

<h1>Paragraphs</h1>
</header>
<div>

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</div>
<footer><a href="#top">[Top]</a></footer></article><article id="text__blockquotes"><header>

<hr />

<h1>Blockquotes</h1>
</header>
<div>
<blockquote>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</blockquote>
</div>
<footer><a href="#top">[Top]</a></footer></article><article id="text__lists"><header>

<hr />

<h1>Lists</h1>
</header>
<h3>Ordered List</h3>
<ol>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ol>
<h3 style="margin-top: 1.5rem;">Unordered List</h3>
<ul>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ul>
</article><article id="text__hr"><footer><a href="#top">[Top]</a></footer><footer>

<hr />

</footer></article><article id="text__tables"><header>
<h1>Tabular data</h1>
</header>
<table><caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
<footer></footer><footer></footer><footer>

<hr />

</footer>
<h1>Pre-formatted text</h1>
</article><article id="text__code">
<div>
<pre>P R E F O R M A T T E D T E X T
    ! " # $ % &amp; ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
    @ A B C D E F G H I J K L M N O
    P Q R S T U V W X Y Z [ \ ] ^ _
    ` a b c d e f g h i j k l m n o
    p q r s t u v w x y z { | } ~</pre>
</div>
<footer><a href="#top">[Top]</a></footer><footer>

<hr />

</footer></article><article id="text__inline"><header>
<h1>Inline elements</h1>
</header>
<div>

<a href="#!">This is a text link</a>.

<strong>Strong is used to indicate strong importance.</strong>

<em>This text has added emphasis.</em>

Superscript<sup>®</sup>.

Subscript for things like H<sub>2</sub>O.

<small>This small text is small for for fine print, etc.</small>

</div>
<footer><a href="#top">[Top]</a></footer></article></section><section id="embedded"><header>
<h1></h1>
</header><article id="embedded__iframe"><footer></footer></article></section><section id="forms"><header>
<h1></h1>
</header></section><footer></footer>