HTML jest czysty plik tekstowy z rozszerzeniem .htm (html). Do tworzenia najprostsza strona na początku, gdy tylko trenujesz, potrzebujesz tylko notebooka. Otwórz notatnik i napisz tekst.
Każdy element HTML jest tagiem otoczonym<>wsporniki. Dowolny plik, strona html zaczyna się od tagu i kończy się tagiem.
Oto tag po prostu informuje przeglądarkę (czyli program, w którym przeglądasz sieć), że ten dokument jest dokumentem znaczników HTML.
Etykietka - oznacza początek dokumentu html, oraz- tag zamykający, oznacza koniec dokumentu html.
W obrębie tych tagów znajduje się kilka innych ważnych tagów. Zaraz po tagu istnieją tagi oznaczające tytuł strony i treść strony.
Moja pierwsza strona HTML
Etykietka
oznacza tytuł tytułu okna, gdy ta strona jest wyświetlana. <br>Teraz możesz stworzyć nowy <a href="https://bar812.ru/pl/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">Dokument tekstowy</a> w notatniku skopiuj powyższy tekst i zapisz go jako Strona1.html i uruchom go w przeglądarce, w tytule okna przeglądarki zobaczysz tytuł strony z <title>i pustą stronę, ponieważ jesteśmy w treści strony w tagach <body> </body> nic nie wysyłamy.</p>
<p>Tak więc powyższy tekst będzie dla nas podstawową ramą każdej strony internetowej.</p>
<h4><b>Sparowane i niesparowane tagi!</b></h4>
<p><html></html>, <head></head>,<body></body> Są to po prostu sparowane tagi - te tagi, które idą jako para tagu i jego zamykający, zamykający tag z symbolem /. W przypadku znaczników sparowanych wartość zawarta między początkiem znacznika a jego końcem jest akcją znacznika. Akcja będzie propagowana do momentu znalezienia tagu ze znakiem /.</p>
<p>Niesparowane tagi — nie mają tagu zamykającego. Poniżej podamy przykłady takich tagów.</p>
<p><head></head>- nagłówek <a href="https://bar812.ru/pl/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">strony html</a>, obejmujący <a href="https://bar812.ru/pl/gugl-advords-sbor-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords.html">słowa kluczowe</a> dla wyszukiwarek <a href="https://bar812.ru/pl/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">różne skrypty</a> itp.</p>
<p><body></body>- Bezpośrednio treść dokumentu html.</p>
<p><br />Niesparowany tag.</p>
<p><b>Notatka:</b> W większości przypadków, teraz budując strony, używają gotowych procedur, wtyczek itp. – po więcej <a href="https://bar812.ru/pl/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">szybkie tworzenie</a> witryn, ale w celu zastosowania i korzystania z takich procedur i szablonów nadal wymagana jest minimalna znajomość tych sesji.</p>
<p><b>Etykietka</b> (<i>pl. tagi, czasami tag</i>) jest elementem <a href="https://bar812.ru/pl/rules-html-obshchie-pravila-shchity-zh2-pravila-yazyka-html-ispolzuite-sokrashch-nnye.html">język HTML</a>, który służy do oznaczania tekstu źródłowego strony internetowej. Tagi to skróty lub skróty angielskich słów w nawiasach ostrych.<>np. tag <b><p>
</b>…<b></p>
</b> skrót od angielskiego słowa <span><i>ustęp</i>, czyli tekst zawarty w tym znaczniku zostanie rozpoznany przez przeglądarki jako akapit.</p>
<p>Każdy tag w HTML ma specjalne znaczenie i odpowiada za wyświetlanie określonych danych. Wielkość liter w nazwach tagów nie ma znaczenia, na przykład tag <b><p>
</b>…<b></p>
</b> i tag <b><P>
</b>…<b><b></P>
</b>
</b>- To jest to samo. Oznacza to, że znaczniki można pisać zarówno małymi literami, jak i <a href="https://bar812.ru/pl/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">wielkie litery</a>. Wcześniej powszechnie przyjmowano, że wszystkie znaczniki są pisane wielkimi literami, aby znaczniki różniły się od zwykłego tekstu. Teraz nie jest to konieczne, ponieważ wiele edytorów ma podświetlanie składni.</p>
<h2>Klasyfikacja tagów</h2>
<p>W HTML jest ponad 90 tagów. Z reguły jeden tag wpływa tylko na część dokumentu, na przykład tag nagłówka pierwszego poziomu <h1>…</h1>. W takich przypadkach stosuje się sparowane tagi: <i>otwarcie</i> oraz <i>zamknięcie</i>. Znacznik otwierający (na przykład <b><h1>
</b>) tworzy efekt, a zamknięcie ( <b></h1>
</b>) kończy ją. Jak widać na przykładzie, tag zamykający zawsze ma ten znak ( <b>/
</b>) to ukośnik. Te tagi nazywają się <i>sparowany</i>.</p>
<p>Niektóre tagi mają jednorazowy efekt tam, gdzie się pojawiają. Na przykład znacznik z poziomym paskiem <HR>lub tag wyświetlania obrazu <img>. Takie znaczniki nie mają znaczników końcowych. Takie tagi nazywane są niesparowanymi.</p>
<h3>Typy tagów</h3>
<p>Ponadto tagi dzielą się na kilka typów, które różnią się funkcjami:</p>
<ul><li>znaczniki tytułu dokumentu;</li>
<li>elementy blokowe;</li>
<li>elementy wbudowane;</li>
<li>elementy uniwersalne;</li>
<li>listy;</li>
<li>stoły;</li>
<li>ramki.</li>
</ul><p>Ten podział nie jest ścisły, więc niektóre tagi znajdują się w różnych grupach. Na przykład tagi do tworzenia list <ol>oraz <ul>dotyczą zarówno list, jak i elementów blokowych.</p>
<h2>Struktura tagów</h2>
<p>Po załadowaniu do przeglądarki same znaczniki nie są wyświetlane, ale wpływają na sposób wyświetlania ich zawartości. Jeśli tag jest błędnie napisany, jest ignorowany w całości.</p>
<p>Wszystkie tagi mają pewną strukturę, której należy przestrzegać podczas pisania. Ponadto prawie wszystkie tagi mają różne atrybuty, które mogą zmienić sposób wyświetlania treści.</p>
<p>Przyjrzyjmy się poprawnej strukturze tagów zawierających atrybuty:</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=»сайт»>Sam webmaster</a>
</b></li>
</ol><p>Na przykład podałem dwa zupełnie różne tagi. Pierwszy <img>pojedynczy - odpowiedzialny za wyświetlanie obrazków, atrybut - <b>src="logo.jpg"</b>. Drugi <a>…</a> para odpowiada za tworzenie linków, atrybut to <b>href="witryna"</b>.</p>
<p><b>Wniosek 1</b>: Atrybuty mogą mieć sparowane i niesparowane znaczniki.</p>
<p><b>Wniosek 2</b>: Atrybuty mogą mieć tylko znaczniki początkowe, znaczniki końcowe nie mają atrybutów.</p>
<p>Zdjęcie do wyjaśnienia:</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>Rysunek 1. Struktura tagu html</p>
<h4>Zadanie za uważność i znajomość składni HTML</h4>
<p>Spójrzmy na przykład prostej strony internetowej, którą przyjrzeliśmy się w samouczku.</p>
<p>Przeczytałeś już, że cały język składa się z tagów. W tym samouczku przyjrzymy się bliżej tagom HTML. W języku HTML znaczniki są podzielone na pojedyncze (nie sparowane) i sparowane. Tak więc pojedyncze tagi HTML składają się z jednego tagu, to znaczy nie mają tagu zamykającego. A sparowane deskryptory mają tag otwierający i zamykający.</p>
<h2>Pojedyncze tagi HTML</h2>
<p><b>Pojedyncze tagi</b> nie mają tagu zamykającego. Na przykład: <br> , <img>. Kiedyś pisano to tak: <br/> , <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>, teraz ten styl pisania pojedynczych tagów nie ma znaczenia, więc nie pisz w ten sposób. Najczęściej używane pojedyncze tagi: <br>- przenieść do <a href="https://bar812.ru/pl/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">Nowa linia</a>, <hr>- linia podziału, <img>- Umieść obraz.</p>
<h2>Sparowane tagi HTML</h2>
<p><b>Sparowane tagi</b> dużo więcej. Deskryptor pary ma znacznik otwierający i zamykający. Znacznik pary tworzy pojemnik. Zawartość kontenera jest tym, co znajduje się między tagiem otwierającym i zamykającym. W przykładzie z tego artykułu widziałeś tag <h1>Co to są tagi w HTML?</h1>, więc jest to tag pair, zawartość tego tagu to tekst „Co to są tagi w HTML?”. Jego początkiem jest tag <h1>, i koniec</h1> .</p>
<p><a href="https://bar812.ru/pl/na-glavnuyu-stranicu-vam-nuzhno-primery-tekstov-na-glavnuyu-stranicu-i.html">Główny błąd</a> nowicjuszy w pisaniu tagów par, jest to zagnieżdżone zamieszanie. Na przykład jest to poprawny wpis: <p><b>Pogrubiony akapit</b></p>. A oto błąd: <p><b>Pogrubiony akapit</p></b>, dokument HTML o takim układzie nie jest uważany za prawidłowy. Aby nie pomylić zagnieżdżenia, zrób tak: utwórz sparowane tagi, następnie umieść w nich inne, a na końcu wpisz tekst wewnątrz obu tagów <p><b>Jak poprawnie napisać pary tagów</b></p> .</p>
<h2>Co nowego w HTML5 pod względem tagów?</h2>
<p><b>Język HTML5</b> jest rozszerzeniem HTML4, więc zachował większość lub wszystkie tagi z HTML4 i dodał własne. HTML5 wprowadził specjalne tagi dzielące witrynę na główne bloki: nagłówek, menu, stopkę, pasek boczny i treść.</p>
<h2>Dlaczego ważne jest, aby nauczyć się korzystać z tagów?</h2>
<p>Wyszukiwarki Yandex i Google są wrażliwe na układ <a href="https://bar812.ru/pl/na-etoi-stranice-proizoshla-oshibka-scenariya-kak-ustranit-oshibki.html">Dokumenty HTML</a> sprawdzanie ich ważności. Szukają słów kluczowych zawartych w specjalnych deskryptorach i tak dalej. Ale ta sekcja nie dotyczy tego. Dotyczy to promocji (SEO).</p>
<h2>Jak nauczyć się wszystkich tagów HTML?</h2>
<p>Tak, jest dużo tagów. Ale nie trzeba ich specjalnie uczyć. Kiedy będziesz ćwiczyć pisanie, wszystkie deskryptory, sparowane i pojedyncze, będą łatwe do zapamiętania. Oczywiście z biegiem czasu.</p>
<p><b>Tagi HTML</b> jest podstawą języka HTML. Tagi są używane do rozgraniczenia początku i końca elementów w znacznikach.</p>
<p>Każdy dokument HTML składa się z drzewa elementów HTML i tekstu. Każdy element HTML jest identyfikowany przez znacznik początkowy (otwierający) i końcowy (zamykający). Znaczniki początkowe i końcowe zawierają nazwę znacznika.</p>
<p>Wszystkie elementy HTML są podzielone na pięć typów:</p>
<ul><li><b>puste elementy</b> — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wbr> ;</li>
<li><b>elementy zwykłego tekstu</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>Заголовок
Мой первый заголовок
Мой первый абзац
