HTML Formatting Guide

Download this HTML Formatting Guide as a PDF


This heading uses <h2>

This heading uses <h4>

This heading uses <h5>

Creating headings and Subheadings:

<h2>Use this for primary section headings</h2>

<h4>Use this for subheadings within sections</h4>

<h4>Use this for Info Box headings, and for subheadings of subheadings</h4>


Creating Paragraphs:

For each paragraph of text, wrap it in a p element

<p>Any text within the p element will be treated as a paragraph.</p>


This text is bold
This text is italic
This text is both bold and italic

Creating Bold and/or Italic Text:

<b>Text within a b element will be displayed as bold.</b>

<i>Text within an i element will be displayed as italic.</i>

<b><i>You can combine them both to have text be both bold and italic.</i></b>


Creating Links:

You can place links wherever you need them

<p>Here's a link to Google: <a href="http://www.google.com">Google</a></p>

<a href="http://www.google.com" target="_blank">This link will open in a new window or tab</a>


Adding Images:

This piece of HTML adds an image to the RIGHT of content:

<div class="img-right">
<img src="http://cop.edu/the-url-to-your-image.jpg" alt="Type a title of the image here">
</div>

Example:

Example of placing an image to the right of content

This piece of HTML code adds an image to the LEFT of content:

<div class="img-left">
<img src="http://cop.edu/the-url-to-your-image.jpg" alt="Type a title of the image here">
</div>

Example:

Example of placing an image to the right of content

This piece of HTML code CENTERS an image on a webpage

<div style="text-align: center">
<img src="http://cop.edu/the-url-to-your-image.jpg" alt="Type a title of the image here">
</div>

Example of placing an image to the right of content


Making an Image a Link:

This piece of HTML code turns an image into a clickable link that opens in a new window or tab:

<a href="http://www.chop.edu/url-link-you-want" target="_blank"><img src="http://chop.edu/the-url-to-your-image.jpg" alt="Type a title of the image here"></a>


  • This is an
  • exmaple of
  • a bulleted list

Creating a Bulleted List

<ul>
<li>This is a list item</li>
<li>This is another list item with <a href="http://www.cnn.com">a link</a>.</li>
<li><p>You can p elements within list items for better spacing</li></p>
</ul>


  1. This is an
  2. exmaple of
  3. a numbered list

Creating a Numbered List

Notice how it's almost identical to creating a bulleted list; just replace the "u" with an "o".

<ol>
<li>This is a list item</li>
<li>This is another list item with <a href="http://www.cnn.com">a link</a>.</li>
<li><p>You can p elements within list items for better spacing</li></p>
</ol>


Creating a FULL-PAGE-WIDTH Info Box

Use this type of info box if it will contain a significant amount of informaiton

<div class="info-box">
<h5>If using a heading, please use the h5 element for continuity</h5>
<p>Content that you want in an info box goes here.</p>
<p>Make sure to wrap all paragraphs within a p element</p>
</div>

If using a heading, please use the <h5> element

Content that you want in the info box goes here. You can see that this info box will take up the full width of the webpage.


Creating an Info Box to the RIGHT of content:

Use this type of info box if you want to provide additional information that is related to the paragraph(s)

IMPORTANT: Make sure this code is placed above the content that you want the info box to appear next to.

<div class="info-box half-right">
<h5>If using a heading, please use the h5 element for continuity</h5>
<p>Content that you want in an info box goes here.</p>
</div>

Example:
If using a heading, please use the h5 element

Content that you want in the info box will go here

This is just some placeholder text to show you how text content aligns within an info box. You can place info boxes next to paragraphs of text, and also next to images. Info boxes can contain any type of content that you'd like it to have, such as links, lists, images, videos, and more.


Creating an FAQ list:

Add as many h5 and p elements between the beginning and ending ol element as you need

<ol class="faq-list">
<li>
<h5>This is a question. Notice it is wrapped in an h5 element</h5>
<p">This is an answer. Notice it is wrapped in an p element</p>
</li>
<li>
<h5>This is another question. You can create as many as needed</h5>
<p>This is another answer.</p>
</li>
<h5>This is 3rd question.</h5>
<p>Add as many h5 and p elements as you need.</p>
</li>
</ol>

Example:
  1. This is a question. Notice it is wrapped in an h5 element

    This is an answer. Notice it is wrapped in a p element.

  2. This is another question. You can create as many as needed

    This is another answer.

  3. This is a 3rd question

    Add as many h5 and p elements as you need between the ol element


Adding Icons

<span class="info-icon"></span>
<span class="yes-icon"></span>
<span class="no-icon"></span>
<span class="puzzle-icon"></span>

Example:

- Info Icon

- Yes Icon

- No Icon

- Puzzle Icon


Dividing Content into Two Columns:

Use these for comparing content, or to make related blocks of content easier to read.

<div class="col-group">
<div>
<p>The content within this first div will be displayed on the LEFT. It can contain anything you would like such as paragraphs of text, images, links, a numbered or bulleted list, and more.</p>
</div>
<div class="spacer"></div>
<div>
<p>The content within this second div element will be displayed on the RIGHT. It can contain anything you would like such as paragraphs of text, images, links, a number or bulleted list, and more.</p>
</div>
</div>

Example:

The content within this first div will be displayed on the LEFT. It can contain anything you would like such as paragraphs of text, images, links, a numbered or bulleted list, and more.

The content within this second div element will be displayed on the RIGHT. It can contain anything you would like such as paragraphs of text, images, links, a number or bulleted list, and more.


Dividing Content into 75%/25% Columns:

Use these if one column will contain a significant amount of information while the other column will not.

<div class="columnsContainer">
<div class="leftColumn">
<p>Content here will be displayed in a LEFT column that takes up 75% of the webpage. This is where you want to put the majority of the information.</p>
</div>
<div class="rightColumn">
<p>Content here will be displayed in a RIGHT column that takes up 25% of the webpage.</p>
</div>
</div>

Example:

Content here will be displayed in a LEFT column that takes up 75% of the webpage. This is where you want to put the majority of the information.

Content here will be displayed in a RIGHT column that takes up 25% of the webpage.


Top