Home / Articles / Programming languages / Markup languages / HTML & CSS / The structure of HTML document

The structure of HTML document

The structure of HTML document
 
The structure of HTML document
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (3 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

Document structure 

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.

Scripts
Usually Script is the program that is placed into the body of the web page and performs certain actions in in. Scripts, as a rule, are written is JavaScript language.

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.

Comments 

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.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation