HTML document 2: A gentle introduction to hypertext

In the last guide, we created a HTML file and added the word "hello". That's a good start, but you probably want to make a document that does more than greet the user. Let's do that.

A document with a title

Open hello.html from the last lesson, in your browser and in a text editor. Replace the text with the following

<h1>Welcome to my document!</h1>
Hello

Now refresh your browser. What do you see?

  • The <h1> and </h1> things don't appear
  • The text inside them is big
  • Hello remains unchanged

The meaning of hypertext

In normal editing software like Microsoft Word, we select the font and size we want text to be and then we type text in that style. In HTML, we use the text to describe the text. The <h1> tag says "whatever is in me is a header". We use the text to describe the text. This is why HTML is the "hypertext" markup language. Let's try a more complex example:

<p>Birds at my local pond</p>
<ul>
  <li>Ducks</li>
  <li>Geese</li>
  <li>Pigeons</li>
</ul>

Try copying that into your html file. Then save it and reload your browser. What do you see?

  • "Birds at my local pond" is on a line on it's own, like a paragraph
  • The different birds are in a list

This example introduces us to more tags. Can you tell what they do? <p> puts it's values in a paragraph. <ul> says that the values inside it will be part of an Unordered List (bullet points instead of numbers) and everything in a <li> tag is an element of that list.

Check out this page for a more serious example of a HTML document with everything we've learned

Recap

We did the following:

  • Created a more complex HTML document
  • Looked at the <h1>, <p>, <ul> and <li> tags

Next time we will use style attributes to change how these elements look