Introduction

HTML the markup languaged used to describe elements of a web page and its content. This guide aims to explain the basics of HTML and show how it can be used to improve the appearance, consistency, and accessibility of websites which you edit the content of.

Tip
The CMS you use to update your website will have visual options for automatically generating much of the code below. This guide is for situations where you either cannot use the WYSIWYG editor, or when you need to do something a bit more specific. It can be useful to understand what the generated HTML does though, in any case.

Back to top


Basic terms

There are a few different terms you should be aware of when writing HTML:

Tag
Something surrounded by pointy brackets (e.g. <p>).
Closing tag
A tag with a forward slash after the first pointy bracket. These are used to “wrap” content such as paragraphs (e.g. </p>). Not all tags will have closing tags (e.g. <hr>).
Element
Some part of the page (e.g. a paragraph, a table, an image, etc.) as described by tags.
Attribute
Additional information stored within a tag (e.g. <table class="table">).

Back to top


Structural elements

Headings

Always specify headings using <h3> to <h6> tags. Start by wrapping your highest level heading with <h3>, then work your way to <h6> for sub–sections. Doing this means headings will look consistent throughout your website, and also will improve the website’s accessibility by allowing users with screen readers to jump from section to section.

Marking a heading with just bold text or larger text only visually changes the meaning of some text — using header tags changes the meaning semantically so the web browser and other software understands.

Tip
Do not use <h1> or <h2> tags in your page content. <h1> will have been used at the highest level (i.e. the name of the website), and <h2> will have been used one layer below that (i.e. the name of the current page).

Tables

There are a number of different tags which are required to create a table. They are:

<table>
Surround the whole table with this.
<thead>
The header of the table.
<tbody>
The body of the table.
<tr>
A row (table row).
<th>
A header cell (table header).
<td>
A regular cell (table data).

There are other elements, but the above are the most important.

In order to understand HTML tables, you need to think of them as collections of rows. Within each <tr> element is a number of <td> elements, which are the cells in that row.

Merging cells

Cells can be merged horizontally or vertically. It is conceptually easier to think about horizontal merges however, so try to avoid vertical ones.

The colspan attribute can be added to specify that a cell should span multiple columns.

The rowspan attribute can be added to specify that a cell should span multiple rows.

Example: a full table

Code:
<table>
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>Heading 2</th>
			<th>Heading 3</th>
			<th>Heading 4</th>
			<th>Heading 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
		</tr>
		<tr>
			<td colspan="2">Colspan cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
		</tr>
		<tr>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td rowspan="2">Rowspan cell</td>
		</tr>
		<tr>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
			<td>Data cell</td>
		</tr>
	</tbody>
</table>

Note that in the final <tr>, one <td> is missing as its space is occupied by the <td rowspan="2"> above.

Produces:
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Data cell Data cell Data cell Data cell Data cell
Colspan cell Data cell Data cell Data cell
Data cell Data cell Data cell Data cell Rowspan cell
Data cell Data cell Data cell Data cell

Lists

You can use <ul>, <ol>, and <li> tags to create lists of items in your pages. Wrap a whole list in <ul>, then individual items in <li> tags to create a regular bulleted (or un–ordered) list, or wrap the whole list in <ol> tags and individual items in <li> tags to create a numbered (or ordered) list.

Example: un–ordered list

Code:
<ul>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ul>
Produces:
  • A list item
  • A list item
  • A list item
  • A list item

Example: ordered list

Code:
<ol>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ol>
Produces:
  1. A list item
  2. A list item
  3. A list item
  4. A list item

Images

Images can be inserted into your pages using the <img> element. This element does not require a closing tag. You do however need to specify some attributes:

src
A path to an image file. This should be located on your website somewhere.
alt
A short description of the image to be displayed if the image fails to load, or for visually impaired users using screen readers.

Example: an image

Code:
<img src="images/nhs-logo.jpg" alt="NHS logo">
Produces:
NHS logo

Back to top


Formatting text

Try to keep bespoke styling of elements to a minimum, as this will ensure the website maintains a consistent design. You can use the following tags however, when you think they are neccessary:

<strong>
Make text bold. Meant for text that is supposed to stand out.
<em>
Make text italic. Meant for text that should be emphasised.
<u>
Underline the text. Purely presentational with no semantic meaning.

Example: formatted text

Code:
You can make something look <strong>important</strong>, <em>emphasise</em> it, or <u>underline</u> it.
Produces:
You can make something look important, emphasise it, or underline it.

Back to top


Additional resources

Below are a number of other websites which you can visit if you would like to learn more about HTML.

Back to top