Build a basic prototype Understand basic HTML

We use a language called HTML to create web pages. You only need to understand basic HTML to create prototypes.

You will learn some concepts on this page that will help with the rest of the tutorial, but you will not make any changes to your prototype.

Elements

HTML has different elements that represent content. For example:

  • <h1> the main page heading
  • <h2> other page headings are numbered from the most to least important (up to h6)
  • <p> standard paragraph text
  • <div> to divide other elements into sections

Each element includes an opening tag, content and a closing tag. For example: <p>example text</p>

In the example:

  • <p> is the opening tag
  • example text is the content
  • </p> is the closing tag

Attributes

Attributes are values you can add to opening tags to change the element.

To make a heading look like a GOV.UK heading, we can add the class attribute "govuk-heading-l":

<h1 class="govuk-heading-l">govuk-heading-l</h1>

HTML structure

We can start to build a page with different elements:

<div>
  <h1 class="govuk-heading-l">Page heading</h1>
  <p>Some text for the heading.</p>
</div>

We use a <div> to create a page section, then include elements within it. In our first section we've included a <h1> and a <p>.