HTML елементът е основната структурна единица на уеб страница, написана на HTML.
Сдвоени и единични HTML тагове
Синтаксис на HTMLелементи, състоящи се от сдвоени тагове:
- Елементът започва с начален таг.
- Елементът завършва със затварящ таг.
- Съдържанието на елемент е всичко между отварящия и затварящия тагове. Съдържанието може да бъде текст и/или друг HTML елемент.
Забележка: не забравяйте да поставите символа "" в затварящия таг /
", той казва на браузъра, че вашият елемент е приключил и че това, което ще бъде написано след него, вече е друг елемент. Ако не поставите знака " /
" в затварящия таг, тогава браузърът ще го сбърка с нов елемент, вложен в предишния, който според браузъра все още не е затворен.
Синтаксисът за HTML елементи, състоящи се от единични тагове, е:
- Елементът се състои само от отварящия таг.
Елементите, състоящи се от единични тагове, се наричат празни. В HTML има 16 единични тагове:
Вложени елементи
HTML елементите, състоящи се от сдвоени тагове, могат или да съдържат всякакви други елементи, или могат да бъдат вложени в други елементи, докато дълбочината на влагане на елементите не е ограничена.
Следният пример има три елемента, два от които са вложени:
Първият ми параграф
Когато един елемент е вложен в друг, трябва да се внимава, за да се гарантира, че вложеният елемент започва и завършва вътре в същия елемент. Така например следният код е неправилен:
Това Много
интересно
Тук елемент излиза извън елемента 
Пример с правилно влагане:
Това Многоинтересно
Тук елемент правилно вложен - той е изцяло в рамките на елемента 
Празни знаци
Браузърът игнорира празните знаци в HTML кода, така че можете да ги използвате в своя полза, като направите кода си четим. Белите интервали включват: табулатори, знаци за нов ред и редовни пространства, могат да се използват във всякакви количества. Примерен код, който използва празни знаци:
заглавка
Първата ми титла
Първият ми параграф
Примерният код може да е бил написан без да се използва бели знаци, но код като този би бил по-малко четим:
заглавкаПървата ми титла
Първият ми параграф
Тъй като кодът в HTML документ става по-голям и по-сложен с течение на времето, става ясно, че използването на празно пространство всъщност подобрява четливостта на кода.
HTML е обикновен текстов файлс разширение .htm (html). За да създадете най-простата страница в началото, докато просто се упражнявате, имате нужда само от бележник. Отворете бележника и напишете текста.
Всеки HTML елемент е таг, заобиколен от<>скоби. Всеки файл, html страница започва с таг и завършва с етикета.
Ето етикета просто казва на браузъра (което е програмата, в която сърфирате в мрежата), че този документе HTML документ за маркиране.
Етикет - означава началото на html документа и- затварящ таг, означава край на html документа.
В тези тагове има няколко други важни тагове. Веднага след етикета има тагове, означаващи заглавието на страницата и тялото на страницата.
Моята първа HTML страница
Етикет
означава заглавието на заглавието на прозореца, когато се показва тази страница. <br>Сега можете да създадете нов <a href="https://passportbdd.ru/bg/windows/skazka-otpravit-kopiyu-soobshcheniya-na-vashu-pochtu-kak-otpravit/">Текстов документ</a>в notepad, копирайте текста по-горе и го запазете като Page1.html и го стартирайте в браузъра, ще видите в заглавието на прозореца на браузъра заглавието на страницата от <title>, и празна страница, защото ние сме в тялото на страницата в таговете <body> </body>не извеждаме нищо.</p>
<p>Така че текстът по-горе ще бъде за нас основната рамка на всяка уеб страница.</p>
<h4><b>Сдвоени и несвързани етикети!</b></h4>
<p><html></html>, <head></head>,<body></body>Това са просто сдвоени тагове - тези тагове, които вървят като двойка от таг и неговия затварящ, затварящ таг със символа /. За сдвоени тагове стойността, съдържаща се между началото на тага и края му, е действието на тага. Действието ще се разпространи, докато не бъде намерен таг със знака /.</p>
<p>Несдвоени тагове – те нямат затварящ таг. По-долу ще дадем примери за такива тагове.</p>
<p><head></head>- заглавка <a href="https://passportbdd.ru/bg/microsoft-excel/skachat-veb-stranicu-html-v-bloknote-primer-sozdaniya-html-stranicy/">html страници</a>, което включва <a href="https://passportbdd.ru/bg/microsoft-excel/podbor-klyuchevyh-slov-v-yandeks-vordstat-statistika-poiskovyh-zaprosov/">ключови думи</a>за търсачки, различни скриптове и др.</p>
<p><body></body>- Директно тялото на html документа.</p>
<p><br />Несдвоен етикет.</p>
<p><b>Забележка:</b>В повечето случаи сега, когато изграждат сайтове, те използват готови рутинни процедури, плъгини и т.н. - за още <a href="https://passportbdd.ru/bg/windows/risovanie-na-kompyutere-paint-vse-vozmozhnosti-paint-dlya-sozdaniya-i/">бързо създаване</a>сайтове, но за да се прилагат и използват такива процедури и шаблони, все още са необходими минимални познания за тези сесии.</p>
<p><b>HTML тагове</b>е в основата на езика HTML. Таговете се използват за ограничаване на началото и края на елементите в маркирането.</p>
<p>Всеки HTML документ се състои от дърво от HTML елементи и текст. Всеки HTML елемент се идентифицира чрез начален (отварящ) и краен (затварящ) таг. Началният и крайният етикет съдържат името на етикета.</p>
<p>Всички HTML елементи са разделени на пет типа:</p>
<ul><li><b>празни елементи</b> — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wbr> ;</li>
<li><b>обикновени текстови елементи</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>
<p><b>Тег
</b> (<i>мн. теги, иногда тэг
</i>) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег <b><p>
</b>…<b></p>
</b> сокращение от английского слова <span><i>paragraph
</i>, то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.
</p>
<p>Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег <b><p>
</b>…<b></p>
</b> и тег <b><P>
</b>…<b><b></P>
</b>
</b> — это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.</p>
<h2>Классификация тегов</h2>
<p>Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня <h1>…</h1>. В таких случаях используются парные теги: <i>открывающий
</i> и <i>закрывающий
</i>. Открывающий тег (например, <b><h1>
</b>) создает эффект, а закрывающий (<b></h1>
</b>) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (<b>/
</b>) — прямой слеш. Такие теги называют <i>парные
</i>.</p>
<p>Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.</p>
<h3>Типы тегов</h3>
<p>Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:</p>
<ul><li>теги заголовка документа;</li>
<li>блочные элементы;</li>
<li>строчные элементы;</li>
<li>универсальные элементы;</li>
<li>списки;</li>
<li>таблицы;</li>
<li>фреймы.</li>
</ul><p>Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.</p>
<h2>Структура тегов</h2>
<p>При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.</p>
<p>Все теги имеют определенную структуру, которую необходимо соблюдать при написании. Кроме того, практически все теги имеют различные атрибуты, которые могут изменять способ отображения содержимого.</p>
<p>Давайте посмотрим на правильную структуру тегов содержащих атрибуты:</p>
<ol><li><b> <img src='/windows/ponyatie-tega-html-osnovy-html-3-chto-takoe-parnyi-teg/' loading=lazy loading=lazy>
</b></li>
<li><b><a href=»сайт»>Сам Себе Вебмастер</a>
</b></li>
</ol><p>Для примера я привел два совершенно разных тега. Первый <img> одинарный — отвечает за вывод изображений, атрибут — <b>src=»logo.jpg»
</b>. Второй <a>…</a> парный отвечает за создание ссылок, атрибут — <b>href=»сайт»
</b>.</p>
<p><b>Вывод 1
</b>: Атрибуты могут иметь парные и непарные теги.</p>
<p><b>Вывод 2
</b>: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.</p>
<p>Картинка для разъяснения:</p>
<p><img src='https://i2.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>Рисунок 1. Cтрутура тега html</p>
<h4>Задача на внимательность и знание синтаксиса HTML</h4>
<p>Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке</p>
<p>Вы уже прочитали, что весь язык состоит из тегов. В этом уроке разберемся подробнее с HTML тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А у парных дескрипторов есть открывающийся и закрывающийся тег.</p>
<h2>Одинарные теги HTML</h2>
<p><b>Одинарные теги
</b> не имеют закрывающего тега. Например: <br> , <img> . Раньше писали так: <br/> , <img src='/windows/ponyatie-tega-html-osnovy-html-3-chto-takoe-parnyi-teg/' loading=lazy loading=lazy> , теперь такой стиль написания одинарных тегов не актуален, поэтому не пишите так. Самые используемые одинарные теги: <br> - перенос на <a href="https://passportbdd.ru/bg/microsoft-word/1s-pervyi-simvol-v-stroke-novye-funkcii-raboty-so-strokami/">новую строку</a>, <hr> - разделительная линия, <img> - вставка изображения.</p>
<h2>Парные теги HTML</h2>
<p><b>Парных тегов
</b> намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В примере из этой статьи вы видели тег <h1>Что такое дескрипторы в HTML?</h1> , так вот, это парный тег, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег <h1> , а концом </h1> .</p>
<p>Главная ошибка новичков в написании парных тегов, это путаница во вложенности. Например, вот это правильная запись: <p><b>Жирный абзац</b></p> . А вот ошибка: <p><b>Жирный абзац</p></b> , HTML документ с такой версткой считается не валидным. Чтобы не путать вложенность, делайте так: создаем парные теги , далее вкладываем в них другие , и в конце пишем текст внутрь обоих тегов <p><b>Как правильно писать парные теги</b></p> .</p>
<h2>Что нового в HTML5 в плане тегов?</h2>
<p><b>Язык HTML5
</b> является расширением HTML4, поэтому он сохранил большую часть или все дескрипторы из HTML4 и добавил свои. В HTML5 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.</p>
<h2>Почему важно научиться пользоваться тегами?</h2>
<p>Поисковики Yandex и Google трепетно относятся к верстке <a href="https://passportbdd.ru/bg/microsoft-excel/kakoi-teg-sozdaet-abzac-v-dokumente-formatirovanie-teksta-v-html-verhnii-i/">HTML документов</a>, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. Но этот раздел не про это. Это относится к продвижению (SEO).</p>
<h2>Как выучить все теги HTML?</h2>
<p>Да, тегов не мало. Но специально учить их не нужно. Пока вы будете практиковаться, что-то писать, у вас все дескрипторы, парные и одинарные, легко запомнятся. Со временем, конечно.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
</div>
</div>
</div>
</div>
<div class="right-rail-pseudo"></div>
<aside class="right-rail collection-sidebar">
</aside>
</div>
<div id="wide-collection-items-container"></div>
<div class="module-more-news-center">
</div>
<div class="collection-footer grid">
<aside class="right-rail collection-sidebar"></aside>
<div class="collection-footer-container">
<footer class="content-foot">
<aside class="module-social-sharing">
</aside>
<div class="content-topics">
</div>
</footer>
</div>
</div>
</article>
</main>
<footer class="footer">
<nav>
<ul class="nav">
<li>Как да бъдем на вас с вашия компютър 2023</li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Privacy Policy" href="">Политика за поверителност</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Contact Us" href="https://passportbdd.ru/bg/feedback/">Контакти</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Media Kit" href="">Реклама в сайта</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Sitemap" href="https://passportbdd.ru/bg/sitemap.xml">Карта на сайта</a></li>
</ul>
</nav>
</footer>
<div id="lightbox" class="lightbox">
<div class="lightbox-close"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
window.jQuery || document.write(' <
script src = "/assets/jquery.min.js" > < \/script>')
</script>
<script>
$(document).ready(function() {
var a = $(window),
b = $("body"),
c = $("#header-nav-more"),
e = c.children("a"),
f = $("#header-hamburger");
$("html").hasClass("no-touch") && (c.on("mouseenter", function() {
c.hasClass("active-hover") || c.addClass("active-hover")
}), c.on("mouseleave", function() {
c.removeClass("active-hover")
})), e.on("click", function(a) {
c.hasClass("active-hover") ? c.removeClass("active-hover") : c.addClass("active-hover"), a.preventDefault()
}), f.on("click", function() {
var a = $(this);
a.hasClass("active-hamburger") && c.removeClass("active-hover"), a.toggleClass("active-hamburger"), b.toggleClass("active-nav")
}), a.on("scroll", d(function() {
a.scrollTop() > 0 ? b.addClass("active-scroll") : b.removeClass("active-scroll")
}, 100))
});
</script>
</body>
</html> 