The structure of HTML document
The term HTML is short for HyperText Markup Language. Basically, HTML-document is a simple text file that contains text and nothing else. So you can create a Web page in any text editor.
When a web page is opened, the browser looks at the HTML code, and finds special characters, called tags, and uses them to insert images, change the appearance of the text, create links to other web pages, etc.
To denote tags the character <tag> is used. There are two types of tags: paired, which allocates a block of text, also called container (Example 1) and unpaired. The container requires a closing tag, for example </tag>. Tags are not case sensitive, so <B> and <b> are equivalent.
Example 1. Using paired tags (container).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <b>Bold text</b> in text. </body> </html>
Since it is possible to use multiple combinations of tags one should remember about their nesting (Example 2). One container must be inside the other, and they shouldn't overlap (Example 3).
Example 2. Correct combination of tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <b><i> Bold italic text </i></b> </body> </html>
In this example, the text inside the container <I>, which sets the italic, is at the same time placed inside the container <B> which specifies the bold text. In this case, the result will remain the same even if you change places of the tags.
Example 3. Invalid combination of tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <i><b>Bold italic text</i></b> </body> </html>
In this example, nesting of tags within one another is broken. Although the browser will display the sample correctly, by "guessing" what should have been written, such mistakes should be avoided because they might cause page slowdowns and incorrect display of the page content.
Usually web pages consist of two sections - the header (<HEAD>) and the body of the document (<BODY>). Header section may contain text and tags, but the contents of this section is not displayed directly on the page. The body of the document is intended to accommodate the tags and the content (see Example 4).
Example 4. The simplest HTML-document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- This section is for the page header and technical information. --> </head> <body> <!-- And here place everything you want to see on the page. --> </body> </html>
Header section of the document (<HEAD>)
Tags and the text in this section are not displayed on the Web page. This section is usually intended for the following service information.
The title of the page (tag <TITLE>)
Is used to display the text line in the upper left corner of the browser window. This tells the user the name of the site and any other information that the developer may add.
CSS (Cascading Style Sheets)
Styles store a set of formatting elements that are applied to the text of the document, to quickly change its appearance.
Meta tags (tag <META>)
Meta tags are used to store special information for browsers and search engines. For example, the algorithms of search engines access meta tags for the description of the site, keywords and other data. Although <META> tag is only one, but it has lots of parameters, so it's used in plural.
The order of tags in the header of the document is of no particular significance.
The body of the document (<BODY>)
The body of the document is designed to display information on a web page, in particular, the text, images, links, tables, lists, etc.
As shown in the Example 4, some text can be hidden (not displayed) in the browser, by turning the text into a comment. Although, the user will not see the text, it'll still be in the document, and by looking at the source code, you can find the hidden information.
Comments begin with <!-- tag and ends with --> tag. Everything between the tags wont be displayed on the Web page.