HTML е обикновен текстов файлс разширение .htm (html). За създаване най-простата страницана първо време, когато просто тренирате, ви трябва само тетрадка. Отворете бележника и напишете текста.

Всеки HTML елемент е таг, заобиколен от<>скоби. Всеки файл, html страница започва с таг и завършва с етикета.

Ето етикета просто казва на браузъра (което е програмата, в която сърфирате в мрежата), че този документе HTML документ за маркиране.

Етикет - означава началото на html документа и- затварящ таг, означава край на html документа.


В тези тагове има няколко други важни тагове. Веднага след етикета има тагове, означаващи заглавието на страницата и тялото на страницата.

Моята първа HTML страница



Етикет означава заглавието на заглавието на прозореца, когато се показва тази страница. <br>Сега можете да създадете нов <a href="https://bar812.ru/bg/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">Текстов документ</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://bar812.ru/bg/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">html страници</a>, което включва <a href="https://bar812.ru/bg/kak-podbirat-klyuchevye-slova-dlya-kontekstnoi-reklamy-klyuchevye.html">ключови думи</a>за търсачките <a href="https://bar812.ru/bg/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">различни скриптове</a>и т.н.</p> <p><body></body>- Директно тялото на html документа.</p> <p><br />Несдвоен етикет.</p> <p><b>Забележка:</b>В повечето случаи сега, когато изграждат сайтове, те използват готови рутинни процедури, плъгини и т.н. - за още <a href="https://bar812.ru/bg/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">бързо създаване</a>сайтове, но за да се прилагат и използват такива процедури и шаблони, все още са необходими минимални познания за тези сесии.</p> <p><b>Етикет</b> (<i>мн. етикети, понякога етикет</i>) е елемент <a href="https://bar812.ru/bg/rules-html-obshchie-pravila-shchity-zh2-pravila-yazyka-html-ispolzuite-sokrashch-nnye.html">HTML език</a>, който се използва за маркиране на изходния текст на уеб страница. Таговете са съкращения или абревиатури на английски думи, затворени в ъглови скоби.<>например етикет <b><p> </b>…<b></p> </b>съкращение на английската дума <span><i>параграф</i>, тоест текстът, ограден в този таг, ще бъде разпознат от браузърите като параграф.</p> <p>Всеки таг в HTML има специално значение и отговаря за показването на определени данни. Регистърът на буквите в имената на етикети няма значение, например етикет <b><p> </b>…<b></p> </b>и етикет <b><P> </b>…<b><b></P> </b> </b>- Същото е. Тоест таговете могат да бъдат написани както с малки букви, така и с <a href="https://bar812.ru/bg/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">главни букви</a>. Преди това беше общоприето всички тагове да се изписват с главни букви, така че таговете да се различават от обикновения текст. Сега това не е необходимо, тъй като много редактори имат подчертаване на синтаксиса.</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='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy> </b></li> <li><b><a href=»сайт»>Самият уеб администратор</a> </b></li> </ol><p>Например дадох два напълно различни етикета. Първо <img>единичен - отговорен за показване на изображения, атрибут - <b>src="лого.jpg"</b>. Второ <a>…</a>двойката е отговорна за създаването на връзки, атрибутът е <b>href="сайт"</b>.</p> <p><b>Заключение 1</b>: Атрибутите могат да имат сдвоени и несдвоени тагове.</p> <p><b>Заключение 2</b>: Атрибутите могат да имат само начални тагове, крайните тагове нямат атрибути.</p> <p>Снимка за пояснение:</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>Фигура 1. Структура на html тага</p> <h4>Задача за внимание и познаване на HTML синтаксиса</h4> <p>Нека да разгледаме пример за проста уеб страница, която разгледахме в урока.</p> <p>Вече прочетохте, че целият език е съставен от тагове. В този урок ще разгледаме по-отблизо HTML таговете. В езика HTML таговете се разделят на единични (не сдвоени) и сдвоени тагове. И така, единичните HTML тагове се състоят от един таг, тоест нямат затварящ таг. И сдвоените дескриптори имат отварящ и затварящ етикет.</p> <h2>Единични HTML тагове</h2> <p><b>Единични етикети</b>нямат затварящ етикет. Например: <br> , <img>. Някога се пишеше така: <br/> , <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>, сега този стил на писане на единични тагове не е актуален, така че не пишете така. Най-използваните единични тагове: <br>- прехвърляне на <a href="https://bar812.ru/bg/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">нова линия</a>, <hr>- Демаркационна линия, <img>- вмъкнете изображение.</p> <h2>Сдвоени HTML тагове</h2> <p><b>Сдвоени етикети</b>много повече. Дескрипторът на двойката има отварящ и затварящ таг. Етикетът за двойка образува контейнер. Съдържанието на контейнера е това, което е между отварящия и затварящия етикет. В примера от тази статия видяхте етикета <h1>Какво представляват таговете в HTML?</h1>, така че това е таг за двойка, съдържанието на този таг е текстът „Какво представляват таговете в HTML?“. Началото му е етикетът <h1>, и край</h1> .</p> <p><a href="https://bar812.ru/bg/na-glavnuyu-stranicu-vam-nuzhno-primery-tekstov-na-glavnuyu-stranicu-i.html">Основна грешка</a>начинаещи в писането на чифт тагове, това е объркване на влагането. Например, това е правилният запис: <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://bar812.ru/bg/na-etoi-stranice-proizoshla-oshibka-scenariya-kak-ustranit-oshibki.html">HTML документи</a>проверявайки ги за валидност. Те търсят ключови думи, затворени в специални дескриптори и т.н. Но този раздел не е за това. Това се отнася за промоцията (SEO).</p> <h2>Как да науча всички HTML тагове?</h2> <p>Да, има много етикети. Но няма нужда специално да ги учите. Докато се упражнявате да пишете нещо, всички дескриптори, сдвоени и единични, ще бъдат лесни за запомняне. След време разбира се.</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> <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>Заголовок

Мой первый заголовок

Мой первый абзац

Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:

Заголовок

Мой первый заголовок

Мой первый абзац

Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.