10.00 What is HTML?

Table of contents

• HTML tags
• More semantic tags
• HTML vs CSS
• What you’ve learned

This article introduces HTML, the language of the web. Read it to learn what HTML tags are and which ones to use, when.

HTML tags

HTML is composed of HTML tags that go at the start and the finish of the content that you want to mark up. They come in two parts: an opening HTML tag such as <p>, and a closing HTML tag such as </p>, (notice the / before the p).

It’s a bit like the old advice for giving a speech: “Tell ’em what you’re going to tell ’em; tell ’em; tell ’em what you’ve told ’em”. Or the age-old advice for good storytelling – have a beginning, a middle, and an end:

<p> means there’s a paragraph coming up.

Then there’s a paragraph.

Then </p> means that we just had a paragraph, and now it’s over.

Here’s a list of HTML tags. You will use them to tell the browser how it should structure your page.

Paragraph

Here is an example of paragraph <p> </p> tags in action:

1
2
3
4
  <p>
    An anthologie of fine stories
    inspir’d by the Bard of Stratford and the Lovecraftian Mythos
  </p>

Which display in a browser as:

Strong

Here is an example of strong <strong> </strong> tags in action:

1
2
3
4
5
  <p>
    An anthologie of fine stories
    inspir’d by the <strong>Bard of Stratford</strong>
    and the Lovecraftian Mythos
  </p>

Which display in a browser as:

Headings

Here is an example of heading tags in action:

1
2
  <h3>Shakespeare vs Cthulhu</h3>
  <h4>An Anthologie</h4>

Which display in a browser as:

List

Usually interpreted as a bulleted list e.g.

1
2
3
4
5
  <ul>
    <li>Publisher: Snowbooks</li>
    <li>Published on: 2 August 2016</li>
    <li>ISBN: 978-1-909679-86-3</li>
  </ul>

Image

1
<img src='/images/home_img.jpg' alt='Book cover image' />

Code which points to a file location of an image to display. src means source – the file location. Notice that it is src, not scr – an easy typo to make! alt means alternative text – vital for accessibility. The img tag is self-closing – you don’t put an </img> tag at the end, only a />.

Division

A division or section of the page.

1
2
3
4
5
6
  <div>
    <p>
      An anthologie of fine stories inspir’d
      by the <strong>Bard of Stratford</strong> and the Lovecraftian Mythos
    </p>
  </div>

More semantic tags

There are further tags available to use, named to provide useful information about the structure of the content. These include <nav>, <section>, <aside>, <figure>, <footer>, <header>, and <main>. It is better to use these tags than <div>, which has no semantic meaning. In particular, screen readers use these tags to describe web pages in richer detail, making your web pages more accessible to a wider range of users. Read more about semantic HTML tags.

HTML vs CSS

HTML provides the structure of a web page; later on, we’ll use CSS to provide the visual layout. This is an important point. A piece of text may be classed as a paragraph using HTML. That is a different to saying that the paragraph style should be Lucida Sans, 14pt, dark grey, and indented 5px on each side. You will provide such stylistic instructions in CSS.

What you’ve learned

• There are opening and closing HTML tags.
• HTML structures web pages; CSS styles them.
• Semantic HTML tags allow more people better access to web pages.