#1: Introducing HTML

This first tutorial will teach you a bit about HTML, one of the coding languages we use to build websites. HTML stands for HyperText Markup Language (you don’t need to remember that for now) and it gives us the building blocks for web pages.

For example, the text you’re reading at the moment is built using the HTML paragraph element.

<p>It looks a bit like this.</p>

See those <p> tags wrapped around the paragraph? Those are HTML tags and they’re what we use to explain to the web browser what the thing we’re building actually is. HTML usually needs to have one tag at the start of the thing you’re building, and one at the end. Notice how the start (opening tag) is slightly different to the end (closing tag)?

Here are some more HTML tags:

<h1>This is a number one heading.</h1>

The <h1> is the most important heading, like the one you see at the top of the page. It says “this is what the page is about”. There are several others:

<h2>Here’s a number two heading.</h2>
<h3>And a number three heading.</h3>
<h4>Can you guess what heading this is?</h4>
<h5>And this one?</h5>

Exercise 1

There’s one more heading element. See if you can guess what it looks like. Go to this pen, fork it, then add what you think is a number six heading tag in the HTML window. When you’re done, save the pen.

Other HTML Elements

So what other HTML tags can we use? Here’s a list of some useful ones:

<h1>This is a heading</h1>
<p>This is a paragraph (you already know these first two).</p>
<strong>This makes text bold, or “strong”.</strong>
<h2>This is a less important heading</h2>
<em>This makes text italic, slanted over to one side. The “em” stands for “emphasis”, because we use it when we want a piece of text to stand out.</em>
<button>This tag makes a button.</button>

Exercise 2

Go over to CodePen and start a new pen–call it whatever you like. Then take the code in the block above, copy it and paste it into the HTML window of your new pen. See how each bit looks different in the result window? Try moving the tags around–put the button underneath the second heading and save what you’ve done.

Conclusion

This is the end of the first tutorial! You’ve learned that HTML is the language we use to code the building block of a web page, and you’ve learned about some of the blocks (HTML elements) we can use. You’ve also completed your first two exercises. See you in the next tutorial!