Skip to content

So What is HTML?

HTML stands for HyperText Mark-Up Language.

You can find out more about HyperText here.

A mark-up language is one where special instructions area added to plain text to add meaning to the text, or to add features. In the case of HTML, the mark-up is in the form of 'tags'

HTML Tags

HTML 'tags' usually wrap around parts of the text. Tags begin with an opening angled-bracket (a less-than sign), <, and end with a closing angled-bracket (a greater-than sign), >.

For example, this is the tag that defines a paragraph: <p>.

Tags usually come in pairs: an opening tag and a closing tag.

Opening Tags

Opening tags go at the start of a block of text. For example, the tag used to start a new paragraph looks like this:

<p>The paragraph text...

Closing Tags

Closing tags are the same as opening tags, but with a slash character, /, added. So a closing paragraph tag would be:

... the paragraph text</p>

So, to define some text as a paragraph in HTML, we would write:

<p>It is exciting to discover electrons and figure out the equations
that govern their movement; it is boring to use those principles
to design electric can openers.</p>

An Example Web Page

This is the HTML code for a simple web page, and a preview of how the page would be rendered by a browser:

<h1>Cats</h1>

<img src="cat.jpg">

<p>The cat (<em>felis catus</em>) is a small domesticated carnivorous mammal of the family Felidae. You can find out more about cats at <a href="https://cats.com">this website</a> which has lots of great information.</p>

<h2>What Do Cats Like?</h2>

<ul>
    <li>Sleeping</li>
    <li>Ignoring people</li>
    <li>Chasing things</li>
    <li>Sleeping some more</li>
</ul>

You can see the tags used in the text:

  • <h1>...</h1> for the main heading (level 1)
  • <img> for an image, with the image source (src)
  • <p>...</p> for paragraphs
  • <em>...</em> for emphasis
  • <a>...</a> for a link to another website, with the website reference URL (href)
  • <h2>...</h2> for a sub-heading (level 2)
  • <ul>...</ul> for an unordered list
  • <li>...</li> for list items