What is HTML?
HTML stands for HyperText Markup Langauge. It's a special language we use to talk to tell computers how to build webpages. We use HTML <tags> to tell the browser (the bit of software that shows us webpages) what our content is. A tag opens when the content starts, like this: <tag>, and closes when it's finished, like this: </tag>.
When we're writing HTML, this is referred to as "marking up" content. In other words, we're adding invisible notes to it that makes the content make more sense to humans and computers. The tags describe what the content is so the computer can translate it for humans. Is it an image? A link? A heading?
What's so great about HTML?
HTML pages can be viewed on pretty much any device that has a browser. A browser is something that looks at your code and translates it into a webpage. If you're reading this online, you're using a browser right now.
To view an HTML page you use a browser, but to write one you can use a simple text editor. You've probably already got one installed, like Notepad or Textedit. To turn a page into a webpage, just save it as an HTML file (put .html on the end when you're saving it) like about-me.html.
Making a webpage
At the top of our webpage, we need to put some information for the browser. We tell it that it's a webpage by typing <!DOCTYPE html>, then we open an <html> tag to tell it that we've started writing HTML. Before we close this tag, we put another tag inside it. (When we open another tag before closing the previous one, this is called nesting tags.)
Like people, web pages have a head and a body, so we have a <head> tag and a <body> tag. In the head, we put information that's useful to the browser but that we don't want to appear on the page. In the body, we put all the content. You can have a look at the example I've built here:
Don't worry, you don't need to remember to write all that stuff, just copy and paste it.
Paragraphs
So if we want to tell something be a paragraph, we wrap it in a <p> tag within our <body> tags like this:
It's really easy. We open the tag, pop our content inside, then when we're done, we close it using a forward slash.
Headings
Headings, like the one above break up the text and make it easier for someone to read. There are 6 different types of heading. Why so many? Well, you're probably going to want your biggest most important heading to be at the top of your page to explain what that page is all about, like "About me". We give this an <h1> tag. On your page, you'll probably want to have different sections like "My favourite things" and "My least favourite things". These could be <h2> tags which will appear a little smaller than the <h1>. Then within say the "My favourite things" section, you may want other sub-headings like "Films", "Food" and "Music". For these, you can use the <h3>. These different types of heading are called "heading level"s and they go all the way from <h1> which is the biggest and most important, to <h6> which is the smallest and least important. You'll probably only end up using the first 3 though!
Links
If we want some text to behave as a link, we need to tell the browser 3 things. First, we need to tell it that we're making a link, then we need to tell it where we want people to go when they click on the link, and we also need to tell it what we want the clickable content to be.
As you can see, we've opened the tag with an <a>, and the href="…" bit tells the browser where the person will go when they click on the link. The browser makes the link blue and gives it an underline so people know they can click on it. When we want the link to stop, we close the tag by typing </a>.
See for yourself
You can see how pages are marked up by looking at the source code. Try right-clicking on this web page and selecting "View Source".
Want to find out more? Read the W3C's page on the basics of HTML