For this, we are expecting that you have installed a specific code editor or are using the pre-installed text editor on your device. Please create a text file called index.html and we are going to be using it for the following code. If you need help with this there is an article currently being written on recommended editors and how to use them. Make sure that your editor is NOT set to rich text. This won’t be an issue if you are using a specific code editor but the default text apps on your device may be automatically set to rich text. This is one of the advantages of using an editor like Visual Studio Code. (Read the article here for info about various editors)
This is the structure of the page and helps the browser to understand how it is supposed to interpret the page.
To start with we are going to specify that this is an HTML5 document. You can simply do this by entering:
The <html> Tag
Add an <html> tag to specify the html and a closing tag to say when it finishes. You can make it into a closing tag by adding a / before the tag name like this:
Heads and Bodies
Just like humans, your code needs a head and a body. They are specified in more tags, <head> and <body>, which also need to be closed like the <html> tags. Add some of them to your code:
Now, we have got a kind of structure for our page so far but now we want some content like titles and text. Everything in HTML is a tag. You can tell this because it will have < > around it. For instance, the <title> tag is clearly a tag as it has the < > symbols around it. But you need to close of all of your tags too so you copy that and add a / in front of the first < symbol. So the <title> tag’s closing tag is </title>.
Now, we are going to want to use this tag in our next addition to the code to give our page, guess what, a title! This particular tag goes in the head section:
Now we are going to add some bits that you can see on the actual page. For the moment we aren’t going to worry about fonts or colors but that will come in a different article later on. Let’s add a heading to our page, to tell viewers what this is about. This will be similar to the <title> tag and needs to have an opening and closing tag. Heading tags can come in different forms. These <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags are all heading tags but we are going to focus on the first one, <h1> today. Replace ‘Your Heading’ in the middle of the tags with the heading you want:
Now we have written the code we need to see how it works! You need to save the file index.html somewhere on your device. Then, load the place where it is saved and open the file. A .html file should use your default browser to open it automatically but if it wants to open it somewhere else then right-click, select open with and choose the browser you want it to open with. It should open up and if everything has gone well it should look something like this (but with the text you put and it should say the title you put at the top of the page or on the tabs menu for mobile):