In this lesson you will create a template for future web design projects and you will learn about four of the most used tags in HTML, including the body and title tags.
Time: This lesson will take about 5 to 10 minutes.
A Windows and Apple computer
In our first lesson, How to Code HTML: Your First Website, you learned that HTML files can be created using Notepad on a Windows computer and TextEdit on a Mac. We originally created a webpage by typing in the words Hello World into Notepad or TextEdit and saving that as an .html file. That file opened and worked in a web browser but without tags, there is no way to change anything about that text. It’s time to take things a step further and we’re going to do that by adding tags.
HTML Tags Web browsers are given instructions on how to present a website based on code in a file. In HTML that code are instructions that are bracketed by the greater than and less than symbols. Each set of brackets and their contents are called a tag. Tags often have an opening tag and a closing tag. I’m going to give you some code which I would like you to copy out in Notepad or TextEdit, then we are going to go through the code line by line.
Note that if you are using TextEdit, you need to have your preferences set up to save in plain text, and to correctly edit HTML files. If you are not sure you’re properly set up in TextEdit, check out How to Code HTML: Editing files in TextEdit before continuing on.
Open Notepad or TextEdit and type out the italicized text as it is shown below.
Have you got all that? You can check it by saving it to your desktop as template.html and then opening it by going to the file on your desktop and double-clicking it. It should look like the same as the example below:
Here is what your website should look like in Firefox. Note the title in the tab, and the body text in the browser window
There are two points to look at to ensure that it is correct, it should say Hello World in the browser but it should also say My Hello World Website in the tab at the top of the browser. If there is extra code, or you get an error message, then double check your Notepad or TextEdit file to make sure you don’t have any typos.
Before we start looking at each line of code, you may have noticed that the text in each tag is all in caps. This is not required but it is recommended. Having all your code in capital letters makes it easier to point out when you have a lot of code and it will make your code much easier to troubleshoot when things aren’t working the way the should. It’s easier to get into the habit of using caps now than later.
So, let’s get down to business. The first line of code is the doctype, which is a declaration tag. All it does is tell internet browsers that this file uses HTML. There are other kinds of doctype declarations, but for basic HTML, this is the only doctype you’ll need.
The HTML Tag
Even though you’ve told your browser that you are using HTML when you declared your doctype, you still need to use the HTML tag shown in line 2, to tell the browser that everything below this mark in your code is HTML. Almost all HTML files start off with a doctype tag and an HTML tag.
The Title Tag
The Title tag tells a browser the name of your page and displays that name. This is also the fist time we have closed a tag. Here is that line of code again:
Most tags must be opened and closed. Tags are all opened and closed in the same format: bracket then tag then bracket to open, information is added, then the bracket, a forward slash, the tag and then the closing bracket to close the tag. In this case, the title tag has the name of the website. You must always make sure you close your tags, this is one of the most common mistakes made by new coders. Any time you have errors in your HTML code, the first thing to look for in tags that have not been closed.
The Body Tag
In lines four, five and six, you see the body tag and the contents of your webpage.
The contents of the body tag will be all the information that make up your website, so there is often a lot of text and other tags inside your body text. In this simple example, we have only used two words inside the body tag but large websites often have hundreds of lines in between the opening and closing of this tag. As with the title tag, the body tag needs to be closed, which we have done on line six.
HTML Closing tag
The last line of code closes the HTML tag. When creating HTML files, this is always the end of your page. It’s like telling your browser that work is done, and it can have a little break, at least until you load another page.
Every webpage you create should have an HTML tag, a body tag, and a title tag. Each time you are going to start coding a new page, you can open up template.html and use it to start your new page. As you become proficient at coding HTML, you will likely create all kinds of templates to save some time, so keep this in mind as you learn.
To recap, in this lesson, you learned about four staple HTML tags: the Doctype tag, the HTML tag, the Body tag and the Title tag. You have also learned that HTML coders often use templates to make creating webpages easier and faster. This is just the beginning, HTML can still format text, add images, create tables and so much more.