What is HTML?
In the pages on source code and browsers, I explained that websites are all made with a language called HTML. But with that answer comes the question, "What exactly does that mean? How do I make it?"
So here I will explain what HTML is and how to write it yourself. First of all, HTML is actually short for HyperText Markup Language. Simply put, it's a language that lets you make advanced (hyper) text using simple markup.
By surrounding some text with HTML markup, called tags, you can do all sorts of things. You can change the colour of the text, change the size, make it link elsewhere, and even add images. HTML is very powerful.
What are HTML tags?
Tags are like a label for the thing inside of them. They give meanings to characters by telling the browser what is what.
Now, let's imagine you want to say this:
How to make a website
Welcome to my website!
I hope you enjoy it!
This has a heading, "How to make a website", and a paragraph below it.
Humans can easily understand this without being told what's going on, but computers are totally lost. You can't feed it plain text and tell it to do its thing; then the computer will do what it knows best and show that text as it is.
Therefore, you need to use markup to tell the browser how things should be displayed. In the example, we have a heading, a paragraph, and a line break, right?
<paragraph> Welcome to my website! <line break>
I hope you enjoy it! </paragraph>
If you annotate plain text like this, maybe a computer would know where parts stop and start. Problem solved!
But another problem occurs: computers cannot understand English. Nor can they understand Japanese, Spanish, Chinese or Esperanto. Computers can only understand computer languages.
In HTML, a language which is thankfully readable by computers, we shorten these English words to the first letters to make things more convenient for us to write—and we will be writing these a lot! Our heading becomes h1 (because it is the first heading in a page; if we wanted a subheading we would then use h2!), paragraph becomes p, and line break becomes br. What happens now?
<h1> How to make a website </h1>
<p> Welcome to my website! <br>
I hope you enjoy it! </p>
Try saving this code into a .php file and opening it. If you're lazy, click here. Does it display correctly? We finally wrote something that a computer can understand! This is HTML source code. The parts in red are HTML tags, the text in between is the content and the whole thing is a HTML element. It's easier than you expected, right?
About empty elements
Normally, HTML tags are made of a start tag and an end tag that surround content, like <tag>~</tag>, but you'll notice the br tag has no end tag.
This is because, in the case of a line break, you wouldn't say "the line break goes from here to here". You just want to say, "Line break here!", which means it doesn't have any content. Elements like this are, effectively, empty.
With no start or end for the tags, you only need to put in a start tag. Another example of this is the img element.