This page introduces the basic structure tags. These tags are necessary for every HTML document you make, although they don’t necessarily affect the eventual appearance of the page, they do help browsers and HTML editors identify the document.
Below is a table showing these important tags:
| HTML Tag | Purpose | Use in Pairs? |
|---|---|---|
| <!doctype html public”-//w3c//dtd html 4.01 Transitional//en” “https://www.w3c.org/TR/html4/loose.dtd”> | Identifies the document as an HTML document and specifies the HTML version. Mandatory (essential) in all HTML documents. | No |
| <html>…</html> | Defines the document as a HTML document. | Yes |
| <head>…</head> | Includes introductory information about the document. | Yes |
| <title>…</title> | Indicates the document title. Mandatory in all HTML documents. | Yes |
| <meta name=”keywords” content=”…”> | Indicates the keywords that describe the document. | No |
| <meta name=”description” content=”…”> | Provides a short summary or description of the document. | No |
| <body>…</body> | Encloses all elements within the main portion of the document. | Yes |
The !doctype Tag
The !doctype tag identifies the document as an HTML document. It appears at the very top of the document and notes that the document is written in the latest HTML standard. If you use a HTML editor, it may already enter this tag for you, but if it doesn’t make sure you enter it in all your documents.
The <html> Tag
The html tag encloses everything in the document except the !doctype tag. As you can tell by the name, it defines the document as a HTML document. If you don’t specify this, the browser may not read the tags properly, therefore your web page’s appearance will consist of a load of code. Ew!
Example of HTML Tag at work:
<!doctype html>
<html>
Hello everyone, this is my web page
</html>
The <head> and <title> Tags
The <head> tag is what many browsers use to identify the document. Personally, I would refer to it as the “behind the scenes” part of the page as it holds information about the page, which are useful for search engines, it tells the browser what kind of document it is, and can also hold scripts, which do funky things to your site, but u don’t know the code is there!
The <title> tag, goes in-between the <head> tags, and is pretty self-explanatory. This tag is required by HTML specification to apply a title of your choice to your document. This appears in the title bar in the browser window (at the very top, left side). It is also used in search engines. You can make your title as descriptive as you like.
Example of <head> and <title> tag at work:
<!doctype html>
<html>
<head>
<title>My Homepage!!</title>
</head>
<p>Hello everyone, this is my web page</p>
</html>
The <meta> Tag
The <meta> tag comes in many combinations, only a few of which have any significance to either you or HTML developers. These tags are positioned inside the <head> tags, after the <title> tags. <meta> tags usually indicate information relevant to search engines and your personal information, such as your name. Although you don’t need to include these in your documents, it does help your site being found more easily by search engines, therefore more visits to your site!
Example of <meta> tag at work:
<!doctype html>
<html>
<head>
<title>My Homepage!!</title>
<meta name="keywords" content="mine personal stuff music about myself me brilliant">
<meta name="description" content="This document provides information about me and my likes and dislikes">
</head>
Hello everyone, this is my web page
</html>
The <body> Tag
The <body> tag encloses all the information that’s actually supposed to be visible to your readers – the heart of your document. Everything you want your readers to see, should be placed between these two tags. Place the <body> tags just after the </head> closing tag, and just the before </html> tag.
Example of body tag at work:
<!doctype html>
<html>
<head>
<title>My Homepage!!</title>
<meta name="keywords" content="mine personal stuff music about myself me brilliant">
<meta name="description" content="This document provides information about me and my likes and dislikes">
</head>
<body>
Hello everyone, this is my web page
</body>
</html>
That’s it! Those are the main structure tags you need to know.
