Elements used in the body of an HTML document. Let's analyze this example

Example underscores text

Tags and

Tags display text with a horizontal line through it. Canceled tag. The tag should be used instead. For example:

Example of strikethrough text.

Currently, the tag is not supported by all browsers, so for now it is recommended to use it in combination with the tag. Namely, you can put a couple of tags inside a container tag

... .

Tag

The tag displays text in a font larger (than the untagged part of the text) size. Instead of this element, it is better to use heading tags, for example,

Larger font size.

Tag

The tag displays text in a smaller font size. Since there is no tag in HTML that is opposite in effect to the tag, the tag can be used for these purposes. Most browsers support nested tags, but this approach is not recommended. For example:

Smaller font size.

Tag

The tag moves text below the line level and displays it (if possible) in a smaller font size. Convenient to use for mathematical indices. For example:

Example font for subscript.

Tag

The tag moves the text above the line level and displays it (if possible) in a smaller font size. Convenient to use for assigning powers of numbers in mathematics. For example:

Example font for superscript.

Tag

The tag displays blinking text. This tag is not part of the HTML specification and is only supported by the Netscape browser. Experienced developers rarely resort to using this tag, since the presence of blinking characters on the page annoys many users.

Tag

A container tag is analogous to a block level tag. Can be used when you need to mark a piece of text to set its properties, and cannot use any other structural formatting tag.

The Microsoft Internet Explorer browser additionally allows the use of the following tag parameters: DIR, DATAFLD, DATAFORMATAS, DATASRC. A description of the parameters can be found in the second part of the book.

Rice. 1.3. Using nested text formatting tags

Formatting tags can be nested inside each other. In this case, you need to carefully ensure that one container is located entirely in another container. In Fig. Figure 1.3 shows an example of nesting an italic element within a bold element. The following HTML code fragment is used:

This is a bold font.

This italics.

And here is the text bold and italic

Tag

The tag specifies the font parameters. It refers to text-level physical formatting tags.

Assigning font parameters directly in the document text violates the basic idea of ​​separating the content of the document and describing the form of presentation of the document. Therefore, in the HTML 4.0 specification this tag, as well as the tag, are classified as deprecated. Their further use is not recommended.

Despite these dire warnings, it appears that physical formatting can be considered acceptable for the simplest documents. In addition, the easiest way to start learning the basics of formatting is with the rules for directly specifying element formats. A novice developer still has to grow up to style design.

A tag refers to sequential elements and therefore cannot include block level elements, e.g.

Or

The following parameters can be set for a tag: FACE, SIZE and COLOR. Note that the Netscape browser also allows the use of two additional parameters: POINT-SIZE and WEIGHT, the description of which is omitted.

FACE

The FACE parameter is used to specify the type of font in which the user's viewer will display text (if such a font is available on the computer). The value of this parameter is the name of the font, which must exactly match the name of the font that the user has. If no such font is found, this instruction will be ignored and the default font will be used.

You can specify one or several font names, separating them with commas. This is a very useful property, since different systems may have almost identical fonts with different names. Another important quality is to set preferences for using fonts. The font list is scanned from left to right. If the user's computer does not have the first font in the list, an attempt is made to find the next font, and so on.

Here is an example of using the FACE parameter:

Purpose of fonts




An example of specifying a font name.

In Fig. Figure 1.4 shows how the Netscape browser displays an example. In the example, the Verdana font is indicated as the preferred font; if it is absent, the Arial font will be used, etc.

Rice. 1.4. Netscape browser example display

SIZE

This parameter is used to specify font sizes in arbitrary units from 1 to 7. The specific font size depends on the viewer you are using. It is generally accepted that a “normal” font size corresponds to a value of 3.

Default font size settings, as well as the amount of absolute font size change, vary between browsers. In Fig. Figure 1.5 shows the Netscape browser settings window, which sets the default fonts.

The font size is indicated both as an absolute value (SIZE=2) and as a relative value (SIZE=+1). The latter method is often used in combination with setting the base font size using the .

Note

When specifying font sizes, entries like "2" and "+2" (unlike most programming languages, in which the unary "+" sign can be omitted) give fundamentally different results.

Here's an example that uses different methods for assigning font sizes. An example display is shown in Fig. 1.6.

Rice. 1.5. Netscape browser font settings window

Rice. 1.6. Assigning font sizes

Assigning font sizes

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

COLOR

This option sets the font color, which can be specified using standard names or in the #RRGGBB format. Here is an example of a document with multi-colored text.

Choosing a font color

Green text


Red text

Tag

The tag is used to indicate the default font size, type, and color used in the document. These values ​​are required for the entire document, but can be overridden in necessary places using the tag. After the closing tag, the tag's effect is restored. Default font settings can be overridden multiple times in a document, meaning a tag can appear any number of times in a document.

Note

The tag can also appear in a section of the document.

Note that there is no closing tag for the tag.

The parameters can be exactly the same as for the tag, namely: FACE, SIZE and COLOR. The purpose and rules for writing parameters are similar.

Note

The Netscape browser does not allow the FACE tag parameter.

Let's give an example of using the tag.

Assigning font sizes

Text written in the default font.

Font size 2.

Font size 4.

Text after table

The example above overrides the default font size twice. Initially it is 3 (default). Then it is set to 2, then 4. Pay attention to the display of this example (Fig. 1.7). It can be seen that the tag assignment does not work for tables. This is typical for many browsers, although it formally violates the idea of ​​using the tag.

Rice. 1.7. Displaying example WITH TAG (Netscape browser)

Formatting an HTML Document

Dividing into paragraphs

Any text, be it a school essay, a note in a newspaper or a technical description of a device, has a certain structure. The elements of such a structure are headings, subheadings, tables, paragraphs, etc.

One of the first rules for drawing up almost any document is to divide its text into separate paragraphs that express a complete thought. HTML documents are no exception to this rule. When creating documents using text editors, breaking into paragraphs is done by entering a newline character. Most editors implement this when you press the key. In HTML documents, newlines do not create a new paragraph.

HTML assumes that the author of the document knows nothing about the reader's computer. The reader has the right to set any window size and use any of the fonts available to him. This means that where the line hyphen occurs is determined solely by the viewer and the end user's settings. Because line feeds in the original document are ignored, text that looks great in the document's author's editor window may turn into solid, unreadable text in the viewer window.

You can avoid this trouble by using a special paragraph division tag.

Before the beginning of each paragraph of text you should place a tag

Closing tag

Note

Browsers typically interpret multiple paragraph tags in a row

As one. The same applies to the line feed tag
. Therefore, it is not possible to create multiple empty lines using these tags.

Tag

Can be specified with the horizontal alignment parameter ALIGN. Possible parameter values ​​are given in table. 1.4. The default is left alignment.

Table 1.4. ALIGN parameter values

Note that justification (ALIGN = JUSTIFY) has not been supported by browsers for a long time. Many HTML language descriptions specify only three options for alignment parameter values ​​(LEFT, CENTER, and RIGHT). Currently, all popular browsers can perform width alignment. Some problems with creating justified documents are also discussed in Chapter 8.

Note

The lack of justification currently seems surprising. This mode is used very often for printed publications. It is enough to pick up any newspaper or look closely at the paragraphs of this book - they are all aligned in width. However, until recently, justification was not allowed for HTML documents. Just a couple of years ago, no browser had such a mode. Thus, readers who are still using the Netscape browser version 3.x will not be able to see straight lines in the document. You can try to predict what other capabilities browsers will have in the future by comparing the capabilities of powerful text editors and modern browsers. An example of features that have not yet been implemented would be automatic hyphenation, etc.

Line translation

When displaying text documents in a browser, the location of line breaks within a paragraph is determined automatically depending on the size of the fonts and the size of the viewing window. Line breaks can only be carried out using word separator characters (for example, spaces). Sometimes in documents you need to set a forced line feed, which is implemented regardless of the browser settings. This is done using the forced line feed tag.
, which does not have a corresponding closing tag. Enabling a tag
into the document text will ensure that subsequent text is placed at the beginning of a new line. For example, this approach can be used to create list-type structures without using special list markup tags. Or, for example, this tag cannot be used to display poems, etc.

Here is an example of using forced line feed (Fig. 1.8):

Using forced line feed

Over darkened Petrograd

November breathed the autumn chill.

Splashing with a noisy wave

To the edges of your slender fence,

Neva was tossing around like a sick person

Restless in my bed.

A.S. Pushkin. Bronze Horseman

Rice. 1.8. Tag
can be used to force a line feed

Unlike the paragraph tag

When using the tag
an empty string will not be generated.

Using a tag
requires caution - it is possible that the browser has already made a line break one or two words before it encountered your tag
. This happens if the reader's viewer window width is smaller than the same setting of the program with which you tested your document. In this case, it may turn out that only one word remains on a line in the middle of a paragraph, thereby ruining the beauty of the document layout.

Note

When using the tag
To break text around an image or table, you can set the CLEAR parameter to stop text wrapping. You can read about this in chapters 3 and 4.

Tags u

There are situations when you need to perform the opposite operation - disable line feed. There is a container tag for this. Text marked with this tag is guaranteed to be on one line, regardless of its length. If the resulting line extends beyond the browser's viewing window, a horizontal scroll bar will appear.

Note

To ensure the continuity of text located in table cells, there is a special parameter of the NOWRAP tag . You can learn more about this in Chapter 4.

By marking up text using the non-breaking line tag, you can get very long lines. To avoid this, you can indicate to the reader's browser the location of a possible line feed, which will be performed only when necessary (the so-called "soft" line feed). This can be done by placing a tag (Word BReak) in the right place in the text, which is the same as the tag
, does not need a closing tag.

Note

The tag is not supported at all by the Netscape browser. The Microsoft Internet Explorer browser recognizes this tag only in text marked with tags.

Headings inside an HTML document

Along with the title of the entire document, a Web page can use headings for individual parts of the document. These headings can have six different levels (sizes) and are pieces of text that stand out on the screen when the browser displays the page.

The tags , , , , and are used to mark up headings. These tags require a corresponding closing tag. Heading number 1 is the largest (top-level heading), and heading number 6 is the smallest. Heading tags are block-level elements, so they cannot be used to mark up individual words of text to increase their size. Heading tags insert a blank line before and after the heading, so no paragraph or line break tags are needed.

Heading tags can be specified with the horizontal alignment parameter ALIGN. Possible values ​​of the parameter are the same as the alignment parameters of the paragraph tag

(see table 1.4).

An example of using headings of different levels with different alignment (Fig. 1.9):

Heading examples

Heading size 1

Heading size 2

Heading size 3

Heading size 4

Heading size 5

Heading size 6

Body of the document

Rice. 1.9. Display headings in different sizes

Horizontal lines

Another method of dividing a document into parts is to draw horizontal lines. They visually emphasize the completeness of a particular area of ​​the page. Nowadays, a raised, pressed line is often used to indicate the “volubility” of a document.

The tag allows you to draw a raised horizontal line in the window of most viewing programs. This tag is not a container, so it does not require a closing tag. A blank line is automatically inserted before and after the line. Tag parameters are presented in table. 1.5.

Table 1.5. Tag options

Example:

This example sets a horizontal line that takes up half the width of the viewport and is positioned in the middle of the window. Note that the alignment options only make sense when the line does not occupy the entire width of the window.

Note

The Netscape browser does not allow the COLOR tag parameter.

Using preformatted text

As you can see in the sections above, special tags should be used to break up text into paragraphs and force a line break. However, there are times when it is necessary to include text in an HTML document that already has formatting done in the traditional way using newlines, the required number of spaces, tab characters, etc. To solve such problems, a special container tag is provided Defining pre-formatted ( n reformatted) text.

The text marked with the tag will be displayed as it looks in a regular text editor. A monospaced font will always be used for display. This will give you more control over the document viewer's output, although at the cost of some loss of flexibility.

One of the options for using this tag is tables built without using special table markup tags. Other important

The application is to display large blocks of program code (Java, C++, etc.) on the screen, preventing the browser from reformatting them.

Text inside a container Can contain text-level formatting except the following: , , , , , , , , . It is not acceptable to include block-level formatting elements, such as heading tags, within preformatted text. The paragraph tag, logically, should also not occur inside preformatted text, but if it does, it will implement a new line transition (without creating an empty one).

Note

The tag has an optional WIDTH parameter, the purpose of which is to tell the browser the maximum length of a line of preformatted text. Depending on this value, the browser could select the desired font and/or indentation to optimally display the preformatted text. The default value has been suggested to be 80. Other recommended values ​​are 40 and 132. Note that for readers with significant computing experience, these numbers speak volumes. In fact, modern browsers ignore the WIDTH parameter.

There are several more tags that solve a similar problem. These include the , AND tags. All three of these tags are marked as deprecated in the HTML 4.0 specification. This means that browsers will no longer support them in future versions. It is recommended to use the tag instead of these tags.

Tag

A container tag is a block-level element that serves to highlight a fragment of a document. The purpose of this selection is to control the parameters of this fragment, which is usually done by assigning styles. Here's an example:

(Document fragment)

In this example, a fragment of an HTML document is framed with tags to set some of its properties. In this case, all text elements of the selected fragment will be displayed in green. An analogue of a text level tag is the element.

Note that it is not advisable to use direct assignment of style properties of a separate fragment, as is done in the example, in accordance with the concept of separating the structure of the document and its presentation. You should use style sheets, which will be discussed in the second part of the book.

Tag

The container tag is designed to horizontally align all elements in the middle of the browser viewport. It is block level and is useful for centering elements such as tables, since they cannot be centered by assignment

ALIGN=CENTER tag

Essentially a tag is a short form of the following entry: . Further use of the tag is also undesirable for the reasons noted in the previous section.

Including comments in a document

You can include comments in an HTML document that are not visible to the reader. They can consist of any number of lines and must begin with the tag. Anything contained within these tags will not be displayed on the screen when viewing the page.

In this article, we'll look at the structure of an HTML document and get to know the different parts of a web page.

In HTML4, a web page consists of three main parts:

1. Head part (Head);
2. Body:

Look at the example above. Notice the red and black text? Black indicates the content, and red indicates the tags that make up the elements:

The first line in the example HTML structure is not an element, but a document type declaration (also called a DOCTYPE declaration). It provides information about the version of an HTML document and tells browsers the HTML specification. The correct document declares which version of the language is being used.

See: DOCTYPE Information

The entire document is contained within the html element. It is often called the root element and cannot be inside any other element. Used in both HTML and XHTML documents.

Within an html element, the document is divided into a “head” (head) and a “body” (body).

The head element contains descriptive information about the document itself. What it mentions shouldn't be displayed in the browser, but it does convey some information to it. For example, the title, style sheets used, scripts and other information.

The HTML meta site structure element inside head provides metadata information. A meta element can contain different types of information. In the example above, it defines the character encoding used in the document.

Note: Metadata is information about a document, but not its content.

Head also contains the required title element. According to the HTML specification, every document must include a header. The title specified in this element is shown in the browser tab.

body contains everything we want to display on the web page. This is the part of the HTML document that is displayed in the browser.

• HTML tag - tells the browser how content should be displayed in it.
• Any HTML document consists of three parts - the document type definition, the head and the body.
• HTML 5 is defined using , while HTML 4 has three different ways of defining type - Strict , Transitional , and HTML frame structure .
• is the root element and cannot be placed inside any other element.
• Elements and are nested inside the element.
• contains information for the browser
• contains everything that should be displayed in the browser window.
• An HTML element is a combination of an opening tag, content, and a closing tag.
• The Doctype declaration tells the browser which standard it follows.
• may contain header, style sheets, scripts and metadata.
• Metadata is information about a document, but not its content.

The translation of the article “HTML Document Structure – Post #2 – HTML Tutorials” was prepared by the friendly project team.

Good bad