OK
home › ›

Tags in HTML. Single and double tags. HTML elements: single and paired tags (opening and closing tag) Task for attentiveness and knowledge of HTML syntax

An HTML element is the basic structural unit of a web page, written in HTML.

Paired and Single HTML Tags

The syntax of HTML elements consisting of paired tags is:

  • The element begins with an opening tag.
  • The element ends with a closing tag.
  • The content of an element is everything between the opening and closing tags. The content can be text and/or other HTML elements.

Note: Don't forget to put a "/" in the closing tag, it tells the browser that your element has ended and that what comes after it is another element. If you don't put the "/" character in the closing tag, the browser will mistake it for a new element nested within a previous one, which the browser thinks is still not closed.

The syntax for HTML elements consisting of single tags is:

  • The element consists only of an opening tag.

Elements consisting of single tags are called empty. There are a total of 16 single tags in HTML:

Nested Elements

HTML elements consisting of paired tags can either contain any other elements, or they themselves can be nested within other elements, and the depth of nesting of elements is not limited.

The following example consists of three elements, two of which are nested:

My first paragraph

When one element is nested inside another, you need to ensure that the nested element begins and ends within the same element. So, for example, the following code is incorrect:

This is very

Interesting

Here the element goes beyond the bounds of the element

Example with correct nesting:

It is very interesting

Here the element is properly nested - it is completely within the element

Whitespace characters

The browser ignores whitespace characters in HTML code, so you can use them to your advantage to make your code more readable. Whitespace characters include tabs, line breaks, and regular spaces; they can be used in any quantity. Example code that uses whitespace:

Title My first title

My first paragraph

The example code could be written without using whitespace at all, but such code would be less readable:

TitleMy first title

My first paragraph

As HTML document code becomes larger and more complex over time, you will see that using whitespace actually improves the readability of the code.

HTML is just plain text file with extension .htm (html). For creating simplest page at first, when you are just training, you only need a notepad. Open notepad and write some text.

Each HTML element is a tag surrounded by brackets. Any file, html page starts with a tag and ends with a tag.

This tag simply tells the browser (this is the program in which you view Internet pages) that this document is an html markup document.

The tag means the beginning of the html document, and the closing tag means the end of the html document.



Within these tags there are several other important tags. Immediately following the tag are tags indicating the page title and page body.


My first HTML page




The tag means the title of the window title when this page is displayed.
Now you can create a new one Text Document in notepad, copy the text presented above and save it as Page1.html and run it in the browser, you will see the title of the page from in the title bar of the browser window, and a blank page, because We do not display anything in the body of the page in tags.

So, the text above will be the basic skeleton of any web page for us.

Paired and unpaired tags!

, , These are just paired tags - those tags that come as a pair: a tag and its closing, a closing tag with the / symbol. For paired tags, the value contained between the beginning of the tag and its end is the action of the tag. The action will continue until a tag with the / symbol is found.

Unpaired tags – they do not have a closing tag. Below we will give examples of such tags.

— Heading html pages, where they are included keywords for search engines, various scripts, etc.

— The body of the html document itself.


Unpaired tag.

Note: In most cases, when building websites now, ready-made routines, plugins, etc. are used. – for more quick creation sites, but in order to apply and use such routines and templates, you still need minimal knowledge of these sessions.

HTML tags are the basis of the HTML language. Tags are used to delimit the beginning and end of elements in markup.

Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and ending (closing) tag. The opening and closing tags contain the name of the tag.

All HTML elements are divided into five types:

  • empty elements - , ,
    , , , , , , , , , , , , ;
  • elements with unformatted text - , ;
  • elements that display unformatted text - , ;
  • elements from another namespace - MathML and SVG;
  • ordinary elements - all other elements.

The table shows full list elements supported by HTML4 and HTML5. Experimental and legacy tags are excluded. Elements added to the HTML5 specification are highlighted in teal.

Complete list of HTML elements Table 1. HTML elements Tag Description
Used to add comments.
Declares the document type and provides basic information to the browser - its language and version.
Creates hypertext links.
Identifies text as an abbreviation or acronym. Explanatory text is specified using the title attribute.
Specifies the contact information of the author/owner of the document or article. Displayed in italics in the browser.
It is a hyperlink with text corresponding to a specific area on an image map or an active area within an image map. Always nested inside a tag.
A section of content that forms an independent part of a document or website, such as a magazine article, blog post, comment.
Represents page content that is indirectly related to the main content of the page/site.
Loads audio content into a web page.
Sets a passage of text to be bold without adding emphasis or importance to the highlighted text.
Specifies the base address (URL) from which all relative addresses are calculated. This will help avoid problems when moving the page to another location, since all links will work as before.
Isolates a passage of text written in a language in which the text is read from right to left from the rest of the text.
Displays text in the direction specified by the dir attribute, overriding the current text direction.
Highlights text as a quote, used to describe large quotes.
Represents the body of the document (content that is not part of the document's metadata).

Wrap text to a new line.
Creates an interactive button. You can place content inside the tag - text or image.
Canvas container for dynamically displaying images such as simple images, charts, graphs, etc. The JavaScript scripting language is used for drawing.
Adds a caption to the table. Inserted immediately after the tag .
Used to indicate the source of a citation. Displayed in italics.
Represents a piece of program code, displayed in a monospace font family.
Selects one or more table columns for formatting that do not contain the same type of information.
Creates a structural group of columns that identifies many logically homogeneous cells.
The element is used to associate the value of the value attribute, which is in a machine-readable format and can be processed by a computer, with the content of the tag.
Container element for a drop-down list element. Variant values ​​are placed in elements.
Used to describe a term from a tag.
Marks text as deleted by striking it out.
Creates an interactive widget that the user can open or close. Represents a container for content, the visible title of the widget is placed in the tag.
Identifies a word as a term by putting it in italics. The text that follows should contain a definition of this term.
An interactive element with which the user interacts to complete a task, such as a dialog box, inspector, or window. Without the open attribute, it is not visible to the user.
A container tag for sections of an HTML document. Used to group block elements for formatting with styles.
A container tag containing a term and its description.
Used to specify a term.
Highlights important passages of text by displaying them in italics.
A container tag for embedding external interactive content or a plugin.
Groups related elements in a form by drawing a box around them.
Title/caption for the element.
A self-contained container tag for content such as illustrations, diagrams, photographs, code examples, usually with a caption.
Defines the ending area (footer) of a document or section.
A form for collecting and sending information from users to the server. Doesn't work without the action attribute.
Create six levels of headings for related sections.
A container element for HTML document metadata, such as , , , , .
Section for introductory information of a site or a group of navigation links. May contain one or more headings, logo, information about the author.
A horizontal line for thematic division of paragraphs.
The root element of an HTML document. Tells the browser that this is an HTML document. It is a container for all other html elements.
Italics a passage of text without giving it additional emphasis.
Creates an inline frame by loading another document into the current HTML document.
Embeds images in an HTML document using the src attribute, whose value is the URL of the embedded image.
Creates rich form fields in which the user can enter data.
Highlights text with underlining. Used to highlight changes made to a document.
Selects text to be entered by the user using the keyboard in a monospace font.
Used to store additional information about the page. This information is used by browsers to process the page, and by search engines to index it. There can be several tags in a block, since depending on the attributes used they carry different information.
Indicator of measurement in a given range.
A section of a document containing navigation links for the site.
Defines a section that does not support scripting.
Container for embedding multimedia (e.g. audio, video, Java applets, ActiveX, PDF and Flash). You can also insert another web page into the current HTML document. The tag is used to pass the parameters of the plugin.
Ordered numbered list. Numbering can be numeric or alphabetical.
A container with a title for a group of elements.
Specifies an option/option to select from the , or , drop-down list.
Field for displaying the result of a calculation calculated using the script.

Paragraphs in the text.
Defines parameters for plugins embedded using the element.
A container element containing one element and zero or more elements. By itself it does not display anything. Allows the browser to select the most appropriate image.
Outputs text without formatting, preserving spaces and text breaks. Can be used to display computer code, email messages, etc.
An indicator of the completion of a task of any kind.
Defines a short quotation.
Container for East Asian symbols and their decoding.
Defines its nested text as the base component of the annotation.
Adds a brief description above or below the characters contained in the element, displayed in a smaller font.
Marks embedded text as additional annotation.
Displays alternative text if the browser does not support the element.
Displays text that is not current with a strikethrough.
Used to display text representing the result of program code or script execution, as well as system messages. Displayed in monospace font.
Used to define a client-side script (usually JavaScript). Contains either script text or points to an external script file using the src attribute.
Defines a logical area (section) of a page, usually with a header.
A control element that allows you to select values ​​from a proposed set. Variant values ​​are placed in .
Displays text in a smaller font size.
Specifies the location and type of alternative media resources for the , , .
Container for inline elements. Can be used to format passages of text, such as highlighting individual words.
Places emphasis in the text, highlighting it in bold.
Includes embeddable style sheets.
Specifies subscript writing of symbols, for example, element index in chemical formulas.
Creates a visible title for the tag. Displayed with a filled triangle, clicking on it allows you to view the title details.
Specifies the superscript spelling of characters.
Tag for creating a table.
Defines the body of the table.
Creates a table cell.
Used to declare HTML code fragments that can be cloned and inserted into a document by a script. The content of a tag is not a child of it.
Creates large text input fields.
Defines the table footer.
Creates a table cell title.
Defines the table title.
Defines date/time.
The title of an HTML document that appears at the top of the browser's title bar. May also appear in search results, so this should be taken into account when providing a title.
Creates a table row.
Adds subtitles for elements and .
Highlights a passage of text by underlining, without additional emphasis.
Creates a bulleted list.
Highlights variables from programs by displaying them in italics.
Adds video files to the page. Supports 3 video formats: MP4, WebM, Ogg.
Indicates to the browser where a long line might break.
Cheat sheet with tags

For ease of use, I grouped the tags into thematic sections, adding display property values ​​for each tag. To go to the table, click on the picture.

You've already read that all language is made up of tags. In this lesson we will take a closer look at HTML tags. In the HTML language, tags are divided into single (not paired) and paired tags. So, single HTML tags consist of one tag, that is, they do not have a closing tag. And paired descriptors have an opening and closing tag.

Single HTML Tags

Single tags do not have a closing tag. For example:
, . Previously they wrote like this:
, , now this style of writing single tags is not relevant, so don’t write like that. The most used single tags:
- move to a new line, - dividing line, - insert an image.

Paired HTML tags

There are many more paired tags. A paired descriptor has an opening and closing tag. The paired tag forms a container. The content of the container is what is between the opening and closing tags. In the example from this article, you saw the tag What are descriptors in HTML? , so, this is a paired tag, the content of this tag is the text “What are tags in HTML?” Its beginning is the tag and its end is .

The main mistake of beginners in writing paired tags is confusion in nesting. For example, this is the correct entry:

Bold paragraph

. And here's the error:

Bold paragraph

, an HTML document with such a layout is considered invalid. In order not to confuse nesting, do this: create paired tags, then nest others in them, and at the end write the text inside both tags

How to write paired tags correctly

.

What's new in HTML5 in terms of tags?

HTML5 is an extension of HTML4, so it retains most or all of the descriptors from HTML4 and adds its own. HTML5 introduced special tags for dividing the site into main blocks: header, menu, footer, sidebar and content.

Why is it important to learn how to use tags?

Search engines Yandex and Google are sensitive to HTML layout documents, checking their validity. They look for keywords enclosed in special descriptors and so on. But this section is not about that. This applies to promotion (SEO).

How to learn all HTML tags?

Yes, there are quite a few tags. But there is no need to specifically teach them. As long as you practice writing something, all the descriptors, paired and single, will be easily remembered. Over time, of course.

Tag ( pl. tags, sometimes tag) is an element of the HTML language that is used to mark up the source text of a web page. Tags are abbreviations or abbreviations of English words enclosed in angle brackets, for example, tag

…

abbreviation for English word paragraph, that is, the text enclosed in this tag will be recognized by browsers as a paragraph.

Each tag in HTML has a special meaning and is responsible for displaying certain data. The case of letters in tag names does not matter, for example, tag

…

and tag

…

- It is the same. That is, tags can be written in both lowercase and capital letters. Previously, it was common practice to write all tags in capital letters so that the tags differed from ordinary text. Now there is no such need, since many editors have syntax highlighting.

Tag classification

There are more than 90 tags in HTML. Typically, one tag affects only part of the document, for example, the first-level heading tag... In such cases, paired tags are used: opening And closing. An opening tag (for example, ) creates the effect, and a closing tag ( ) stops the effect. As you can see from the example, the closing tag always has this symbol (/) - a forward slash. These tags are called doubles.

Some tags provide a one-time effect where they appear. For example, tag horizontal stripe or image display tag . Such tags do not have closing tags. Such tags are called non-paired.

Tag types

In addition, tags are divided into several types, which differ in their functions:

  • document title tags;
  • block elements;
  • inline elements;
  • universal elements;
  • lists;
  • tables;
  • frames.

This division is not strict, so some tags are in different groups. For example, tags for creating lists and