Skip to main content

HTML Cheatsheet

Links

HTML Links are hyperlinks and use the <a> tag.

A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

Example

Georgia Southern

Link Code

<a href="url">link text</a>

For our link above the code would look like:

<a href="http://www.georgiasouthern.edu/">Georgia Southern</a>

For a link to work properly it must contain the full web address (starting with http:// or https://).

If you want the link to open in a tab or window you will need to add target="_blank" to the link.

<a href="url" target="_blank">link text</a>


Images

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute defines the url (web address) of the image:

Example

video-tutorials-menu-link

Image Code

<img src="url" alt="description text">

The alt attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words and is used for accessibility.


Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles).

Example

  • First item
  • Second item
  • Third item

Unordered List Code

<ul
<li>First Item</li>
<li>Second Item</li
<li>Third Item</li>
</ul>


Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers.

Example

  1. First item
  2. Second item
  3. Third item

Ordered List Code

<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>


Nested Lists

Ordered and unordered Lists can be nested (lists inside lists). Also ordered and unordered lists can be combined.

Example

  • First item
  • Second item
    1. First item
    2. Second item
  • Third item

Nested List Code

<ul>
<li>First Item</li>
<li>Second Item</li>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<li>Third Item</li>
</ul>


Tables

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data (cells) with the <td> tag.

Example

First Name Last Name
Eve Jackson
John Doe

Table Code

<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>Eve></td>
<td>Jackson</td>
</tr>
<tr>
<td>John></td>
<td>Doe</td>
</tr>
</table>


NOTES:

(1) When working on sites using the standard University templates, you should always use HTML5 markup (not XHTML).

Last updated: 8/16/2019