HTML Tips

DO NOT USE <font> tag

The font tag is not supported in HTML5. Use CSS instead.

<!-- CORRECT -->
<span style="color: #3e7a2d; font-size: 16px;">This sentence uses inline styling and the correct tag.</span>

<!-- CORRECT -->
<p style="color: #3e7a2d; font-size: 16px;">This sentence uses inline styling and the correct tag.</p>

<!-- INCORRECT -->
<font color="#d12428" size="3">This sentence uses the wrong tag.</font>

Bold Words

This sentence has a <b>bold</b> word.

This sentence has a <span style="font-weight: bold;">bold</span> word.

Italicize words

<em>Open enrollment begins today!</em>

<span style="font-style: italic;">Open enrollment begins today!</span>

Underline words

<span style="text-decoration: underline;">Open enrollment begins today!</span>

Bold, italicize & underline

There are two ways to do this, by wrapping multiple tags or by using the style attribute.

<span style="text-decoration: underline;">
  <strong><em>Open enrollment begins today!</em></strong>
</span>

<span style="font-weight: bold; text-decoration: italicize; text-decoration: underline;">
  Open enrollment begins today!
</span>

Center words

Open enrollment begins today!

<p style="text-align: center;">Open enrollment begins today!</p>

Paragraphs

Open enrollment begins today!

Enroll Now! Easy to do! Online!

<p>Open enrollment begins today!</p>
    
<p>Enroll Now! Easy to do! Online!</p>

Paragraphs vs. Spans

Paragraphs are block elements; spans are inline elements.

This is a paragraph.

This is a paragraph.

<p> This is a paragraph.</p>
<p> This is a paragraph.</p>
<span> This is a span.</span>
<span> This is a span.</span><br />
<span> This is a span.</span>
                             

Line Break

<span>Open enrollment begins today!
<br>
Enroll Now! Easy to do! Online!</span>

Bulleted List

• Easy to do!
• Online!

Enroll Now!
    
<ul>
  <li>Easy to do!</li>
  <li>Online!</li>
</ul>

Numbered List

1. Easy to do!
2. Online!

Enroll Now!
    
<ol>
  <li>Easy to do!</li>
  <li>Online!</li>
</ol>

Definition List

Claim

A demand for payment of covered medical expenses sent to an insurance company.

<dl>
  <dt>Claim</dt>
  <dd>
    A demand for payment of covered medical expenses sent to an insurance company.
  </dd>
</dl>

Subscript

<span>CO<sub>2</sub></span>

Superscript

<span>January 1<sup>st</sup></span>

Tables

<table>
  <thead>
    <tr>
      <th> Here is a header </th>
      <th> Here is a header </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> This is table data </td>
      <td> This is table data </td>
    </tr>
    <tr>
      <td> This is table data </td>
      <td> This is table data </td>
    </tr>
  </tbody>
</table>

Font Color Classes

Use these classes to change the color of text. Colors are based on bswift defaults and pass WCAG AA Color Contrast Ratio requirements when used on a white background.

fc-white

fc-gray-lightest

fc-gray-lighter

fc-gray-light

fc-steel

fc-steel-dark

fc-black

fc-slate

fc-green

fc-orange

fc-red

<span class="fc-red">fc-red</span>

<p class="fc-red">fc-red</p>

<div class="fc-red">fc-red</div>

Font Size Classes

Use these classes to change the size of text.

fs-jumbo

fs-largest

fs-larger

fs-large

fs-small

fs-smaller

fs-smallest

<span class="fs-larger">fs-larger</span>

<p class="fs-larger">fs-larger</p>

<div class="fs-larger">fs-larger</div>

Combining Font Color and Size Classes

fc-red fs-larger

<span class="fc-red fs-larger">fc-red fs-larger</span>

<p class="fc-red fs-larger">fcr-red fs-larger</p>

<div class="fc-red fs-larger">fc-red fs-larger</div>