Skip to main content

Coding rules

Note: not properly closing a tag will cause problems on your page

  1. The following elements require full opening and closing tags
<button></button>

<div></div>

<a href></a>

<article></article>

<aside></aside>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<p></p>

<span></span>

<strong></strong>

<em></em>

<ul></ul>

<ol></ol>

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<figure>
    <img>
    <figcaption></figcaption>
</figure>
  1. Self closing tags don't require a closing:
<img src="#" />

<hr /> = this places a line and creates visual separation. The image below is what this looks like.

opt1-banner

  1. You can create columns however you'd like to. There is no specific way to stack elements within them. Columns can have H's, P's, img's, lists, links. In the example below, this will stack a heading on top of a paragraph on top of an image that is also a link when clicked in the left column and then a list in the right column.
<div class="two-column">
    <div class="column">
        <h1>**title goes here**</h1>
        <p>**paragraph goes here**</p>
        <a href="#">
            <img src="#" alt="">
        </a>
    </div>
    <div class="column">
        <ul>
            <li>**list tiem goes here**</li>
            <li>**list tiem goes here**</li>
            <li>**list tiem goes here**</li>
        </ul>
    </div>
</div>
  1. Images only need a width dimension, not height and width both. The shape of the image is based on the intrinsic ratio, so trying to force the image to fit a certain ratio with both height and width specified will cause issues visually.
<img src="#" alt="">