Body Elements

In this section, we review the elements most commonly found within the body element of an HTML document. Forms are covered separately.

Text

The p element organises text into paragraphs. Within a paragraph, you can put emphasis on text using the em element, or add stronger emphasis with the strong element:

<p>This is a paragraph, which gives some <em>emphasis</em> and some
<strong>strong emphasis</strong> to its text.</p>

Note that em and strong signify different degrees of emphasis, but they do not specify how that emphasis should be achieved. This is an example of semantic markup, whereby HTML elements focus on giving meaning to different parts of a document, rather than dictating their appearance.

Browsers typically default to using italics for emphasis and bold for strong emphasis, but this can be overridden using CSS. Screen readers will adopt non-visual approaches when encountering these elements, e.g., altering the voice used to read the document content.

Lists

Lists of items can be unordered (ul) or ordered (ol). In each case, list items are represented using the li element.

Browsers will default to using bullets for the items in an unordered list and an ascending sequence of numbers for items in an ordered list. You can use CSS to specify something other than the default.

Ordered lists support a numeric attribute named start, which can be used to set the number of the first item in the list:

Hyperlinks

Hyperlinks are created using the a (anchor) element. A hyperlink can be made to another part of the same document, or to an external document, or to other kind of resource. The target is specified using the href attribute. The value given to this attribute is typically a URL.

Here’s a simple example:

In COMP2850, we will use the <a href="https://kotlinlang.org/">Kotlin
programming language</a> to build applications.

Here, ‘Kotlin programming language’ is the clickable ‘anchor text’.

Typically, browsers default to rendering the anchor text in blue and underlining it, but the style of hyperlinks is fully customizable using CSS.

For accessibility, it is important that anchor text gives some kind of indication of what the document is linking to. Phrases like “click here” are NOT suitable as anchor text. Assistive software will often collect all of the links in a document into one place for easy navigation, so the anchor text has to still be meaningful when isolated from the rest of the document.

Images

Images can be introduced into a document using the img element. This has a required attribute, src, which provides a path to the image file. This can be a local path or a full URL pointing to an external resource. Browsers are capable of handling a variety of image formats, but PNG and JPEG are the ones most frequently used.

Accessible documents will also require the alt attribute. This is used to provide some descriptive text for an image, which can be read out by screen readers. If an image is included for decorative purposes only and has no real meaning in the document, then you should use alt="". This signals to a screen reader that it can be ignored.

Here’s an example:

<img src="leedsmap.png" alt="A map of Leeds city centre">

It can be useful to specify image width and height (in pixels) using the width and height attributes. When you do this, the browser is able to calculate how much space will be needed to display an image before it has been fully loaded. This will avoid layout shifts when the image is finally rendered on screen.

Headings

HTML supports six different levels of section heading, using elements h1, h2, etc, through to h6.

Browsers typically default to rendering headings in boldface at varying sizes, with h1 being significantly larger than the base font size and lower level headings getting progressively smaller, but all of this can be overridden using CSS.

There should be only one h1 heading in a document. Headings should have proper nesting, with no skipping of levels (e.g., don’t jump from h2 to h4).

Other Structure

A range of other elements exist that can impose more structure on an HTML document. For example, you can enclose the main content inside a main element and represent a sidebar containing navigation links using a nav element.

Some documents act as a list of relatively self-contained pieces of content. For example, a document might contain short reviews of a movie by different reviewers. Each of these mini-reviews can be represented using the article element. Within an article, you can have header and footer elements, above and below the main content. The header might contain a short title for the review, whereas the footer might contain the name and contact details for the reviewer.

There is also a more generic section element, which can be used in places where main, nav and article are not appropriate.

When used sensibly, these structural elements can help assistive technologies with navigating document content.

div and span

The aforementioned structural elements provide semantic markup: they give specific meaning to different sections of the document.

By contrast, the div and span elements have no inherent meaning. Instead, they are used to mark particular parts of a document so that those parts can be targeted by CSS rules or by JavaScript.

For example, a website providing food recipes might use markup like this:

<p>To make your own pesto, you will need
  <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span>,
  <span class="ingredient">garlic</span> and some good
  <span class="ingredient">olive oil</span>.</p>

This code labels each of the recipe ingredients with the document class ingredient. A stylesheet can provide CSS rules specific to this document class, thereby ensuring that recipe ingredients are all formatted in a specific way.

As another example, a document might have a div element like this:

<div id="search-results"></div>

This will be empty, and therefore invisible, when the document is initially rendered by a browser. The document might also have a search form on it that submits a search term asynchronously to some code running on the server. This code will do a database query to obtain some search results. These search results can then be inserted into the div element with the given ID. (You’ll learn more about how this works when we cover htmx later.)

Task 1.2

Create a new file named simple.html on your local machine (not in a Codespace). In this file, write a simple HTML document that contains

• head and body elements, as described previously
• At least two levels of heading
• A few paragraphs of text, including examples of emphasis and hyperlinks
• Some examples of other features, as you prefer

Don’t do any styling with CSS.

Further Reading

MDN hosts a comprehensive collection of resources for web developers.

We’ve already mentioned the HTML reference, but they also provide in-depth tutorials, e.g., on structuring content using HTML.