Document structure

The word HTML is an abbreviation of HyperText Markup Language, the hypertext markup language. Basically, an HTML document is a simple text file that contains text and nothing else. So you can create web pages in any text editor.

When a web page opens in a browser, it looks at the HTML code, finds special characters called tags, and uses them to insert images, change the appearance of the text, create links to other web pages, etc.

The symbol <tag> is used to indicate the tags. Tags are of two types: paired, which allocate a block of text, also called a container (example 1) and single. The container requires a closing tag, designated </ tag> . The tags are case insensitive, so writing <B> and <b> is equivalent.

Example 1. Using paired tags (container)

Valid code
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Containers </ title>
</ Head>
<Body>

<P> <b> Bold </ b> in the text. </ P>

</ Body>
</ Html>

Since you can use any reasonable combination of tags at the same time, you should remember about their nesting (example 2). One container must be inside the other, and not overlap (Example 3).

Example 2. Correct combination of tags

Valid code
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Attaching Tags </ title>
</ Head>
<Body>

<P> <b> <i> Bold Italic Text </ i> </ b> </ p>

</ Body>
</ Html>

In this example, the text is inside the <I> container, which sets the italic font, and it is in turn placed inside the <B> container, which specifies the text's bold text. The result will remain unchanged, if in this case, change the tags in places.

Example 3. Incorrect combination of tags

Invalid code
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Error in nesting tags </ title>
</ Head>

<Body>

<P> <i> <b> Bold italic text </ i> </ b> </ p>

</ Body>
</ Html>
In this example, the nesting of tags is broken one into another. Although the browser will display the example correctly, independently "guessing" what is wanted from it, such errors should be avoided, as they lead to a slowdown of the page and to an incorrect page display in most cases.

Document structure

All normal web pages consist of two sections - the header ( <HEAD> ) and the body of the document ( <BODY> ). A header section can contain text and tags, but the content of this section does not appear directly on the page. The body of the document is intended for placing tags and the content part (example 4).

Example 4. The simplest HTML document

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<! - This section is for the page title and technical information. ->
</ Head>

<Body>
<! - And here it is necessary to post everything you want to see on the page. ->
</ Body>
</ Html>

DOCTYPE

The <! DOCTYPE> element is used to specify the type of the current document - the DTD (document type definition). This is necessary for the browser to understand how to interpret the current web page, because HTML exists in several versions, in addition, there is XHTML (EXtensible HyperText Markup Language), similar to HTML, but different in syntax. To the browser "not confused" and understood, according to what standard to display a web page and it is necessary to set <! DOCTYPE> in the first line of the code.

There are several types of <! DOCTYPE> , they differ depending on the version of HTML that is targeted. In Table. 1. The main types of documents with their description are given.

Table. 1. Acceptable DTDs
DOCTYPE Description
HTML 4.01
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Strict HTML syntax.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Transitional HTML syntax.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> Frames are used in the HTML document.
XHTML 1.0
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict XHTML syntax.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML Transitive Syntax.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> The document is written in XHTML and contains frames.
XHTML 1.1
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN"> The developers of XHTML 1.1 assume that it will gradually replace HTML. As you can see, there is no definition of species division, because the syntax is one and obeys clear rules.

Header section of document (<HEAD>)

Tags and texts in this section do not appear on the web page. This section is usually intended for the following service information.

Page Title ( <TITLE> tag)

Used to display a line of text in the upper left corner of the browser window. This line tells the user the name of the site and other information that the developer adds.

CSS (Cascading Style Sheets, Cascading Style Sheets)

Styles store a set of formatting elements that apply to the text of a document to quickly change its appearance.

Meta Tags ( <META> tag)

Meta tags are used to store information intended for browsers and search engines. For example, the mechanisms of search engines refer to meta tags to obtain a description of the site, keywords and other data. Although the <META> tag is only one, it has many parameters, so a plural is used to call it.

Scripts

A script is traditionally called a program that is embedded in the body of a web page and performs certain actions on it. A common programming language for writing scripts is JavaScript.

The order of tags in the header of the document has no special meaning.

Document body (<BODY>)

The body of the document is intended for displaying data on a web page, in particular, text, images, links, tables, lists, etc. are placed in the body.

Comments

As shown in Example 4, some text can be hidden from the display in the browser, making it a comment. Although the user will not see this text, it will still be transmitted in the document, so you can see the hidden information after looking at the source code.

Comments start with a <! - tag and end with a -> tag. All that is between these tags will not be displayed on the web page.