2.1 Introduction to tags
HTML-documentsThe markup is based on tags . What is a tag ?
Tags were invented back in the 70s so that people could add service information to documents for programs that process these documents.
Tag- this is a key (functional) word, most often in English, which was framed in angle brackets (more and less characters) so that programs do not confuse tags and ordinary words in English.
The tag may also contain various service information that may be useful to the program that processes the document.
Example text with a tag:
<a href="http://codegym.cc/about">
Link to something interesting
</a>In this example, we see the text, the "a" tag, as well as service information - the tag attributes. Below you will learn more about them.
2.2 Types of tags: opening, closing, empty tag
Tags are of different types. First, they are single and double. The most common are paired tags . And as you probably already guessed, they always go in pairs. They are also called opening and closing.
The opening tag is just a keyword in triangle brackets. Example:
<h1>The closing tag is similar to the opening tag, but the keyword is preceded by a slash. Example:
</h1>The opening tag may contain service information - attributes, the closing one - no . The start tag is always the first of a pair. The closing tag can NOT go first in the text, and then the opening tag. This HTML-documentwill not be valid.
Single tags do not have a closing tag. The list of such tags is defined by HTML-standard. Examples of such tags:
<br>- line break;<img>- picture.
By the way, a paired tag, if it does not contain information inside, can be written in an abbreviated form . Example:
<h1/>This is not a single tag, but an empty pair tag. It's like both closed and open tags at the same time. It differs from the closed tag in that the slash is at the end (before the second triangular bracket).
2.3 Tag tree
And more important information about paired tags. There can be many of them in a document and they can be nested. What does it mean? This means that any text within HTML-documentcan be framed (wrapped) with tags, even if it contains other tags. Example:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>Roughly speaking, a sequence of tags can occur in the html text:
<h1> <h2> </h2> </h1>But it cannot be:
<h1> <h2> </h1> </h2>If the start tag <h2>is inside an <h1>-tag pair, then its matching end tag </h2>must also be inside an <h1>-tag pair.
Thus, all document tags form a kind of tag tree . First comes the top-level tag that wraps the entire document, usually called <html>, it has child tag pairs, they have their own, and so on.
Actually, the program that processes the document with tags sees it exactly like that - as a tag tree with some text inside.
2.4 Attributes
Information about tags would not be complete if we did not talk about attributes. Single tags and start tags of paired tags can have . These attributes contain useful information about the content of the tag.
A tag can contain several attributes, and they have the following general form:
<tag name1="value1" name2="value2">Each attribute is specified as a pair of Nameand meaning. There can be any number of attributes.
«<»But an experienced programmer will immediately ask the question: what to do if you need to use text containing characters or «>»quotes as an attribute value ?
| Symbol name | Symbol | HTML entry |
|---|---|---|
| double quotation mark | " | " |
| Ampersand | & | & |
| Less than symbol | < | < |
| More symbol | > | > |
| Space | ||
| single quote | ' | ' |