HTML is plain text file with .htm (html) extension. For creating the simplest page at first, when you are just training, you only need a notebook. Open notepad and write the text.
Each HTML element is a tag surrounded by<>brackets. Any file, html page starts with a tag and ends with the tag.
Here is the tag simply tells the browser (which is the program in which you browse the web) that this document is an html markup document.
Tag - means the beginning of the html document, and- closing tag, means the end of the html document.
Within these tags, there are several other important tags. Right after the tag there are tags meaning the page title and the body of the page.
My first HTML page
Tag
means the title of the window title when this page is displayed. <br>Now you can create a new <a href="https://bar812.ru/en/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">Text Document</a> in notepad, copy the text above and save it as Page1.html and run it in the browser, you will see in the title of the browser window the title of the page from <title>, and a blank page, because we are in the body of the page in the tags <body> </body> we don't output anything.</p>
<p>So, the text above will be for us the basic frame of any web page.</p>
<h4><b>Paired and unpaired tags!</b></h4>
<p><html></html>, <head></head>,<body></body> These are just paired tags - those tags that go as a pair of a tag and its closing, closing tag with the / symbol. For paired tags, the value contained between the beginning of the tag and its end is the tag's action. The action will propagate until a tag with the / character is found.</p>
<p>Unpaired tags - they do not have a closing tag. Below we will give examples of such tags.</p>
<p><head></head>- header <a href="https://bar812.ru/en/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">html pages</a>, which includes <a href="https://bar812.ru/en/gugl-advords-sbor-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords.html">keywords</a> for search engines <a href="https://bar812.ru/en/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">various scripts</a>, etc.</p>
<p><body></body>- Directly the body of the html document.</p>
<p><br />Unpaired tag.</p>
<p><b>Note:</b> In most cases, now when building sites, they use ready-made routines, plugins, etc. – for more <a href="https://bar812.ru/en/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">quick creation</a> sites, but in order to apply and use such routines and templates, a minimum knowledge of these sessions is still required.</p>
<p><b>Tag</b> (<i>pl. tags, sometimes tag</i>) is an element <a href="https://bar812.ru/en/rules-html-obshchie-pravila-shchity-zh2-pravila-yazyka-html-ispolzuite-sokrashch-nnye.html">HTML language</a>, which is used to mark up the source text of a web page. Tags are abbreviations or abbreviations of English words enclosed in angle brackets.<>eg tag <b><p>
</b>…<b></p>
</b> abbreviation for the English word <span><i>paragraph</i>, that is, the text enclosed in this tag will be recognized by browsers as a paragraph.</p>
<p>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 <b><p>
</b>…<b></p>
</b> and tag <b><P>
</b>…<b><b></P>
</b>
</b>- This is the same. That is, tags can be written both lowercase and <a href="https://bar812.ru/en/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">capital letters</a>. Previously, it was generally accepted that all tags be written in capital letters so that the tags differ from regular text. Now this is not necessary, since many editors have syntax highlighting.</p>
<h2>Tag classification</h2>
<p>There are more than 90 tags in HTML. Typically, one tag only affects part of the document, such as the first-level heading tag. <h1>…</h1>. In such cases, paired tags are used: <i>opening</i> and <i>closing</i>. Opening tag (for example, <b><h1>
</b>) creates the effect, and the closing ( <b></h1>
</b>) terminates it. As you can see from the example, the closing tag always has this character ( <b>/
</b>) is a forward slash. These tags are called <i>paired</i>.</p>
<p>Some tags have a one-time effect where they appear. For example, the horizontal bar tag <HR>or image display tag <img>. Such tags do not have end tags. Such tags are called not paired.</p>
<h3>Tag types</h3>
<p>In addition, tags are divided into several types, which differ in their functions:</p>
<ul><li>document title tags;</li>
<li>block elements;</li>
<li>inline elements;</li>
<li>universal elements;</li>
<li>lists;</li>
<li>tables;</li>
<li>frames.</li>
</ul><p>This division is not strict, so some tags are in different groups. For example, tags for creating lists <ol>and <ul>apply to both lists and block elements.</p>
<h2>Tag Structure</h2>
<p>When loaded in a browser, the tags themselves are not displayed, but they affect how their content is displayed. If a tag is misspelled, it is ignored in its entirety.</p>
<p>All tags have a certain structure that must be observed when writing. In addition, almost all tags have various attributes that can change the way content is displayed.</p>
<p>Let's look at the correct structure of tags containing attributes:</p>
<ol><li><b> <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>
</b></li>
<li><b><a href=»сайт»>Himself Webmaster</a>
</b></li>
</ol><p>For example, I gave two completely different tags. The first <img>single - responsible for displaying images, attribute - <b>src="logo.jpg"</b>. Second <a>…</a> the pair is responsible for creating links, the attribute is <b>href="site"</b>.</p>
<p><b>Conclusion 1</b>: Attributes can have paired and unpaired tags.</p>
<p><b>Conclusion 2</b>: Attributes can only have start tags, end tags have no attributes.</p>
<p>Picture for clarification:</p>
<p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/04/%D1%81%D1%82%D1%80%D1%83%D1%82%D1%83%D1%80%D0%B0-%D1%82%D0%B5%D0%B3%D0%B0-html.gif' width="100%" loading=lazy loading=lazy></p><p>Figure 1. Structure of the html tag</p>
<h4>Task for attentiveness and knowledge of HTML syntax</h4>
<p>Let's look at an example of a simple web page that we looked at in the tutorial.</p>
<p>You have already read that the entire language is made up of tags. In this tutorial, we'll 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.</p>
<h2>Single HTML tags</h2>
<p><b>Single tags</b> do not have a closing tag. For example: <br> , <img>. It used to be written like this: <br/> , <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>, now this style of writing single tags is not relevant, so don't write like that. Most used single tags: <br>- transfer to <a href="https://bar812.ru/en/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">newline</a>, <hr>- the dividing line, <img>- insert image.</p>
<h2>Paired HTML tags</h2>
<p><b>Paired tags</b> a lot more. The pair descriptor has an opening and closing tag. The pair tag forms a container. The content of the container is what is between the opening and closing tag. In the example from this article, you saw the tag <h1>What are tags in HTML?</h1>, so, this is a pair tag, the content of this tag is the text "What are tags in HTML?". Its beginning is the tag <h1>, and the end</h1> .</p>
<p><a href="https://bar812.ru/en/na-glavnuyu-stranicu-vam-nuzhno-primery-tekstov-na-glavnuyu-stranicu-i.html">Main mistake</a> newbies to writing pair tags, this is a nesting confusion. For example, this is the correct entry: <p><b>Bold paragraph</b></p>. And here is the error: <p><b>Bold paragraph</p></b>, an HTML document with such layout is not considered valid. In order not to confuse nesting, do this: create paired tags, then put others in them, and at the end write text inside both tags <p><b>How to write pair tags correctly</b></p> .</p>
<h2>What's new in HTML5 in terms of tags?</h2>
<p><b>HTML5 language</b> is an extension of HTML4, so it kept most or all of the tags from HTML4 and added its own. HTML5 introduced special tags to break the site into main blocks: header, menu, footer, sidebar and content.</p>
<h2>Why is it important to learn how to use tags?</h2>
<p>Search engines Yandex and Google are sensitive to layout <a href="https://bar812.ru/en/na-etoi-stranice-proizoshla-oshibka-scenariya-kak-ustranit-oshibki.html">HTML documents</a> checking them for validity. They look for keywords enclosed in special descriptors and so on. But this section is not about that. This applies to promotion (SEO).</p>
<h2>How to learn all HTML tags?</h2>
<p>Yes, there are a lot of tags. But there is no need to specifically teach them. While you practice writing something, all the descriptors, paired and single, will be easy to remember. Over time, of course.</p>
<p><b>HTML tags</b> is the basis of the HTML language. Tags are used to delimit the start and end of elements in markup.</p>
<p>Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and an end (closing) tag. The start and end tags contain the tag name.</p>
<p>All HTML elements are divided into five types:</p>
<ul><li><b>empty elements</b> — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wbr> ;</li>
<li><b>plain text elements</b> — <script> , <style> ;</li>
<li><b>элементы, выводящие неформатированный текст
</b> — <textarea> , <title> ;</li>
<li><b>элементы из другого пространства имён
</b> — MathML и SVG;</li>
<li><b>обычные элементы
</b> — все остальные элементы.</li>
</ul><p>В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым
цветом.</p>
<h2>Полный список HTML-элементов</h2>
<table class="t3">
Таблица 1. HTML-элементы
<tr><th style="width: 20%;">Тег
</th>
<th>Описание
</th>
</tr><tr><td> <!--...-->
</td>
<td>Используется для добавления комментариев.
</td>
</tr><tr><td> <!DOCTYPE>
</td>
<td>Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
</td>
</tr><tr><td> <a>
</td>
<td>Создаёт гипертекстовые ссылки.
</td>
</tr><tr><td> <abbr>
</td>
<td>Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
</td>
</tr><tr><td> <address>
</td>
<td>Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
</td>
</tr><tr><td> <area>
</td>
<td>Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map> .
</td>
</tr><tr><td> <article>
</td>
<td>Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
</td>
</tr><tr><td> <aside>
</td>
<td>Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
</td>
</tr><tr><td> <audio>
</td>
<td>Загружает звуковой контент на веб-страницу.
</td>
</tr><tr><td> <b>
</td>
<td>Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
</td>
</tr><tr><td> <base>
</td>
<td>Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
</td>
</tr><tr><td> <bdi>
</td>
<td>Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
</td>
</tr><tr><td> <bdo>
</td>
<td>Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
</td>
</tr><tr><td> <blockquote>
</td>
<td>Выделяет текст как цитату, применяется для описания больших цитат.
</td>
</tr><tr><td> <body>
</td>
<td>Представляет тело документа (содержимое, не относящееся к метаданным документа).
</td>
</tr><tr><td> <br>
</td>
<td>Перенос текста на новую строку.
</td>
</tr><tr><td> <button>
</td>
<td>Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
</td>
</tr><tr><td> <canvas>
</td>
<td>Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
</td>
</tr><tr><td> <caption>
</td>
<td>Добавляет подпись к таблице. Вставляется сразу после тега <table> .
</td>
</tr><tr><td> <cite>
</td>
<td>Используется для указания источника цитирования. Отображается курсивом.
</td>
</tr><tr><td> <code>
</td>
<td>Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
</td>
</tr><tr><td> <col>
</td>
<td>Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
</td>
</tr><tr><td> <colgroup>
</td>
<td>Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
</td>
</tr><tr><td> <data>
</td>
<td>Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
</td>
</tr><tr><td> <datalist>
</td>
<td>Элемент-контейнер для выпадающего списка элемента <input> . Варианты значений помещаются в элементы <option> .
</td>
</tr><tr><td> <dd>
</td>
<td>Используется для описания термина из тега <dt> .
</td>
</tr><tr><td> <del>
</td>
<td>Помечает текст как удаленный, перечёркивая его.
</td>
</tr><tr><td> <details>
</td>
<td>Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary> .
</td>
</tr><tr><td> <dfn>
</td>
<td>Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
</td>
</tr><tr><td> <dialog>
</td>
<td>Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
</td>
</tr><tr><td> <div>
</td>
<td>Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
</td>
</tr><tr><td> <dl>
</td>
<td>Тег-контейнер, внутри которого находятся термин и его описание.
</td>
</tr><tr><td> <dt>
</td>
<td>Используется для задания термина.
</td>
</tr><tr><td> <em>
</td>
<td>Выделяет важные фрагменты текста, отображая их курсивом.
</td>
</tr><tr><td> <embed>
</td>
<td>Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
</td>
</tr><tr><td> <fieldset>
</td>
<td>Группирует связанные элементы в форме, рисуя рамку вокруг них.
</td>
</tr><tr><td> <figcaption>
</td>
<td>Заголовок/подпись для элемента <figure> .
</td>
</tr><tr><td> <figure>
</td>
<td>Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
</td>
</tr><tr><td> <footer>
</td>
<td>Определяет завершающую область (нижний колонтитул) документа или раздела.
</td>
</tr><tr><td> <form>
</td>
<td>Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
</td>
</tr><tr><td> <h1-h6>
</td>
<td>Создают заголовки шести уровней для связанных с ними разделов.
</td>
</tr><tr><td> <head>
</td>
<td>Элемент-контейнер для метаданных HTML-документа, таких как <title> , <meta> , <script> , <link> , <style> .
</td>
</tr><tr><td> <header>
</td>
<td>Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
</td>
</tr><tr><td> <hr>
</td>
<td>Горизонтальная линия для тематического разделения параграфов.
</td>
</tr><tr><td> <html>
</td>
<td>Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
</td>
</tr><tr><td> <i>
</td>
<td>Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
</td>
</tr><tr><td> <iframe>
</td>
<td>Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
</td>
</tr><tr><td> <img>
</td>
<td>Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения.
</td>
</tr><tr><td> <input>
</td>
<td>Создает многофункциональные поля формы, в которые пользователь может вводить данные.
</td>
</tr><tr><td> <ins>
</td>
<td>Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
</td>
</tr><tr><td> <kbd>
</td>
<td>Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
</td>
</tr><tr><td> <meta>
</td>
<td>Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta> , так как в зависимости от используемых атрибутов они несут разную информацию.
</td>
</tr><tr><td> <meter>
</td>
<td>Индикатор измерения в заданном диапазоне.
</td>
</tr><tr><td> <nav>
</td>
<td>Раздел документа, содержащий навигационные ссылки по сайту.
</td>
</tr><tr><td> <noscript>
</td>
<td>Определяет секцию, не поддерживающую сценарий (скрипт).
</td>
</tr><tr><td> <object>
</td>
<td>Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param> .
</td>
</tr><tr><td> <ol>
</td>
<td>Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
</td>
</tr><tr><td> <optgroup>
</td>
<td>Контейнер с заголовком для группы элементов <option> .
</td>
</tr><tr><td> <option>
</td>
<td>Определяет вариант/опцию для выбора в раскрывающемся списке <select> , <optgroup> или <datalist> .
</td>
</tr><tr><td> <output>
</td>
<td>Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
</td>
</tr><tr><td> <p>
</td>
<td>Параграфы в тексте.
</td>
</tr><tr><td> <param>
</td>
<td>Определяет параметры для плагинов, встраиваемых с помощью элемента <object> .
</td>
</tr><tr><td> <picture>
</td>
<td>Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source> . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
</td>
</tr><tr><td> <pre>
</td>
<td>Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
</td>
</tr><tr><td> <progress>
</td>
<td>Индикатор выполнения задачи любого рода.
</td>
</tr><tr><td> <q>
</td>
<td>Определяет краткую цитату.
</td>
</tr><tr><td> <ruby>
</td>
<td>Контейнер для Восточно-Азиатских символов и их расшифровки.
</td>
</tr><tr><td> <rb>
</td>
<td>Определяет вложенный в него текст как базовый компонент аннотации.
</td>
</tr><tr><td> <rt>
</td>
<td>Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby> , выводится уменьшенным шрифтом.
</td>
</tr><tr><td> <rtc>
</td>
<td>Отмечает вложенный в него текст как дополнительную аннотацию.
</td>
</tr><tr><td> <rp>
</td>
<td>Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
</td>
</tr><tr><td> <s>
</td>
<td>Отображает текст, не являющийся актуальным, перечеркнутым.
</td>
</tr><tr><td> <samp>
</td>
<td>Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
</td>
</tr><tr><td> <script>
</td>
<td>Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
</td>
</tr><tr><td> <section>
</td>
<td>Определяет логическую область (раздел) страницы, обычно с заголовком.
</td>
</tr><tr><td> <select>
</td>
<td>Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option> .
</td>
</tr><tr><td> <small>
</td>
<td>Отображает текст шрифтом меньшего размера.
</td>
</tr><tr><td> <source>
</td>
<td>Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture> , <video> , <audio> .
</td>
</tr><tr><td> <span>
</td>
<td>Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
</td>
</tr><tr><td> <strong>
</td>
<td>Расставляет акценты в тексте, выделяя полужирным.
</td>
</tr><tr><td> <style>
</td>
<td>Подключает встраиваемые таблицы стилей.
</td>
</tr><tr><td> <sub>
</td>
<td>Задает подстрочное написание символов, например, индекса элемента в химических формулах.
</td>
</tr><tr><td> <summary>
</td>
<td>Создаёт видимый заголовок для тега <details> . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
</td>
</tr><tr><td> <sup>
</td>
<td>Задает надстрочное написание символов.
</td>
</tr><tr><td> <table>
</td>
<td>Тег для создания таблицы.
</td>
</tr><tr><td> <tbody>
</td>
<td>Определяет тело таблицы.
</td>
</tr><tr><td> <td>
</td>
<td>Создает ячейку таблицы.
</td>
</tr><tr><td> <template>
</td>
<td>Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
</td>
</tr><tr><td> <textarea>
</td>
<td>Создает большие поля для ввода текста.
</td>
</tr><tr><td> <tfoot>
</td>
<td>Определяет нижний колонтитул таблицы.
</td>
</tr><tr><td> <th>
</td>
<td>Создает заголовок ячейки таблицы.
</td>
</tr><tr><td> <thead>
</td>
<td>Определяет заголовок таблицы.
</td>
</tr><tr><td> <time>
</td>
<td>Определяет дату/время.
</td>
</tr><tr><td> <title>
</td>
<td>Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
</td>
</tr><tr><td> <tr>
</td>
<td>Создает строку таблицы.
</td>
</tr><tr><td> <track>
</td>
<td>Добавляет субтитры для элементов <audio> и <video> .
</td>
</tr><tr><td> <u>
</td>
<td>Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
</td>
</tr><tr><td> <ul>
</td>
<td>Создает маркированный список.
</td>
</tr><tr><td> <var>
</td>
<td>Выделяет переменные из программ, отображая их курсивом.
</td>
</tr><tr><td> <video>
</td>
<td>Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
</td>
</tr><tr><td> <wbr>
</td>
<td>Указывает браузеру возможное место разрыва длинной строки.
</td>
</tr></table><h3>Таблица-шпаргалка с тегами</h3>
<p>Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.</p>
<i>
</i><p>HTML элемент
- это основная структурная единица веб-страницы, написанная на языке HTML.</p>
<h2>Парные и одиночные теги HTML</h2>
<p>Синтаксис HTML элементов, состоящих из парных тегов:</p>
<ul><li>Элемент начинается с открывающего тега.</li>
<li>Элемент заканчивается закрывающим тегом.</li>
<li>Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.</li>
</ul><p>Примечание:
не забывайте в закрывающем теге ставить символ "<b>/
</b>", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "<b>/
</b>" в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.</p>
<p>Синтаксис HTML элементов, состоящих из одиночных тегов:</p>
<p><img src='https://i1.wp.com/puzzleweb.ru/images/teacher/html_elements2.png' height="212" width="237" loading=lazy loading=lazy></p>
<ul><li>Элемент состоит только из открывающего тега.</li>
</ul><p>Элементы, состоящие из одиночных тегов называются пустыми
. Всего в HTML 16 одиночных тегов:</p>
<table id="em_el"><tr><td style="width: 50%;">
</td>
<td>
</td>
</tr></table><h2>Вложенные элементы</h2>
<p>HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.</p>
<p>Следующий пример состоит из трех элементов, два из которых вложенные:</p><p>
<html>
<body>
<p>Мой первый абзац</p>
</body>
</html>
</p><p>Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:</p><p>
<p>Это <em>очень</p> интересно</em>
</p><p>Здесь элемент <em> выходит за пределы элемента
<p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested2.png' height="90" width="171" loading=lazy loading=lazy></p>
<p>Пример с правильной вложенностью:</p><p>
<p>Это <em>очень</em> интересно</p>
</p><p>Здесь элемент <em> правильно вложен - он находится полностью в элементе
<p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested1.png' height="79" width="162" loading=lazy loading=lazy></p>
<h2>Пробельные символы</h2>
<p>Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:</p><p>
<html>
<head>
<title>Заголовок
Мой первый заголовок
Мой первый абзац
