Every HTML document consists of two basic parts: the "head" and the "body." The head starts with the <head> tag and ends with the </head>, for the body the <body> tag is used in a similar manner. Both the head and the body must be enclosed in <html>....</html>
Thus, a typical HTML document has the following basic structure:
<html>
<head>
...
</head>
<body>
...
</body>
</html>To sum it up, enclosed between the <html>...</html> tags there are two basic parts -- the document head, and the document body. The head is mostly concerned with providing information about the document itself, while the body contains the information that people see in their browsers.
Note that for your document to be standards compliant, you will need to specify the correct Document Type Declaration (also known as Doctype), and possibly add a few other features. Nevertheless, the beginning chapters of the Primer will omit these specifics, because they do not interfere with the functionality of the provided examples and can always be added later.
One last thing: the above example displays an important feature of HTML tags, the so called "nesting." If you open tag A and then open tag B, you must close tag B before you close tag A.
Head
The head is where you place the title of your document, as well as a number of other important features. If you are using JavaScript and CSS, the best way for that is to place the code in external files then link the files from the document head. Below you will find listed the elements that are normally contained between the <head> tags.
Title
The title tag usually contains the site's name and short description, which are displayed in the browser's title bar and tabs.
An example:
<title>My webpage</title>Link
The link element defines an external resource -- in practice, you will use this to link to an external CSS file, which contains the style rules for all content in the body:
<link rel="stylesheet" type="text/css" href="my_style.css" />Base
By specifying a base URL, you point all relative links with the document body to that base URL.
For example, if set <base href="http://example.com" /> and then create the link <a href="document.html" />, it will actually point to http://example.com/document.html. When no base URL is specified, it defaults to the home directory of the HTML file.
Meta
Meta tags provide information about the document -- its purpose, keywords, author, etc. Properly written and placed meta tags are important for search engine visibility. Here are some key examples:
Keywords for search engines:
<meta name="keywords" content="HTML, web design" />Web page description:
<meta name="description" content="A page about HTML and web design" />The above meta tags are normally included in every web page, but they can alsocontain optional information:
Author information:
<meta name="author" content="John Smith" />Body
The body of your HTML document contains all content that is displayed in a browser: text, images, lists, tables, and more. Because the essence of HTML for beginners is learning how to place content in the document, the several next chapters are dedicated to practical examples of how to work with body elements.