Understanding HTML Tags

So now you can create a web page and display it on your web browser.
Now to learn the most important element of HTML coding, tags.

HTML Tags

Below you will see the code from the last section in this tutorial.
Also you can see there are these funny things with words in them (like <html> and <head>) these are called tags.

Note: The below code is the basic setup of a HTML webpage. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head> 
<title> My first home page title </title> 
</head>  
<body>

Welcome to your first webpage

</body>
</html>

<!DOCTYPE ...
As you can see the first thing on your code is the <!DOCTYPE ... tag, this tag tells the browser to change to whatever mode has been specified, don't worry if you haven't have a clue what i am talking about. You don't need to know what this tag does, just remember to place it at the very top of your page. For more information on the !DOCTYPE tag see: !DOCTYPE Tag and Understanding the !DOCTYPE Tag

<html> and </html>
The <html> tag is one of the most important tags to have on your page. The <html> tag tells your web browser that everything in-between <html> and </html> is a HTML document. The closing tag '</html>' specifies the end of a HTML document. More on closing tags below.

<head> </head> and <title> </title>
The <head> tag goes straight after the <html> tag, as you can see above. You must also close the <head> tag (<head></head>). The head tag is where you place the title tag and other information that does not get displayed in the 'window area'. We will cover more on this later, now you will learn what the title tag is used for. The <title> tag is used to display what that particular page is about. The format for this tag(and most other tags) is <Opening tag> Content </Closing tag>. So for the title tag it is: <title> My first home page title </title>.
You're probably wondering why you can't see the content of the title tag on your page, thats because it gets displayed in the top left corner of the whole window. On this page you will see it is "Understanding HTML Tags".
Here is an example:
title tag display
<body> and </body>
This tag, like the title tag it is a 'wrapping' around the content. eg. <body> Content of the whole page </body>
All displayed content goes between the <body> and </body> tags. On your page the content would be: "Welcome to your first webpage". In the next section of this tutorial you will learn how to format your text content.

Attributes

Attributes are an add-on to a tag. They are used in the following format: <body bgcolor="blue"></body>. This attribute tells the web browser to display blue as the background color of your page. Attributes are always used in the opening tag and must have quotes around the variable (blue is the variable for this example). Quotes can be either single or double.

Tips:
  • Make sure you understand this page, if you don't read it again. This page contains all the key elements of a webpage
  • Remember to always include the <!DOCTYPE... > tag at the top of every HTML webpage
  • Remember to place all your content between the <body> and </body> tags
  • Only place text inside the <title> tag
  • Use the above code in every webpage you make, the above code is the 'bare bones' of a webpage


In the next section of this beginner HTML tutorial you will learn how to format your text in HTML.
Next page: How to format text in HTML
Back: Beginner HTML tutorial: Index