HTML теги — справочник с примерами и описанием команд
В этом справочнике мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов.
Вы узнаете, что это такое и для чего нужно.
Также на примерах я покажу как это все используется.
Содержание:
- Что это такое
- Виды
- Основные элементы
- Справочник:
- Основной контейнер
- Служебные
- Коды для текста
- Таблицы
- Изображения
- Списки
- Гиперссылки
- Встроенный контент
- Для группировки
- Формы
Что такое html теги
HTML тег — это специальный код (элемент или команда), который указывает браузеру, как интерпретировать документ для пользователя.
Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.
С помощью таких команд мы общаемся с браузером и как бы программируем его действия.
Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.
Между угловыми скобками обязательно должны присутствовать кодовые слова.
Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.
Например, выделение текста жирным:
<b>Жирный текст</b>
Ниже мы еще к этому вернемся.
Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.
Однако стандарт подразумевает писать их в нижнем регистре.
У тега могут быть атрибуты.
Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.
К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.
<a href="https://site.ru">Текст ссылки</a>
Виды хтмл тегов
Все хтмл теги подразделяются на два вида:
- Одиночные
- Парные
Парные имеют открывающий и закрывающий тег.
Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.
К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца.
Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.
<p>Пример небольшого текстового абзаца</p>
Обратите внимание!
К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда. В данном примере конец абзаца.
Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.
Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным.
Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.
<p><b>Пример</b> небольшого текстового абзаца</p>Наглядный пример выделения
Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.
Одиночные состоят из одного тега. Например, <hr>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.
<br> <!-- перенос строки --> <hr> <!-- разделитель --> <input type="text"> <!-- поле ввода --> <img src="logo.png"> <!-- вывод изображения -->
Основные html теги
Сейчас затронем основные html теги, которые имеют важную роль среди остальных элементов. Такие команды обязательно должны присутствовать на каждой странице.
Вот они:
- doctype
- html
- head
- body
Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.
Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий).
Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.
Head содержит в себе служебные теги. Они предназначены для работы поисковых систем и браузеров.
Обычно эта информация не видна пользователю.
Body
Вот так выглядит скелет любой html-страницы:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Справочник HTML
Здесь расположен справочник html тегов. Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документа.
Все теги имеют описание. А при переходе по ссылке, можно более подробно узнать о данном элементе.
Там вы увидите подробные определения и примеры использования.
Тег HTML
О нем говорили выше. Это главный контейнер, который содержит почти все элементы страницы. Закрывающая его часть всегда должна идти в самом конце документа.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <html></html> | корневой элемент html-документа | block |
Служебные
Служебные теги предназначены для поисковых систем и браузеров.
Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <!—…—> | комментарий | none |
| <!DOCTYPE> | объявление типа документа | none |
| <head></head> | контейнер для метаданных html-документа | none |
| <title></title> | заголовок / имя html-документа | none |
| <meta> | мета-данные веб-страницы | none |
| <link> | подключает внешние таблицы стилей | none |
| <script></script> | подключает сценарии к странице | none |
| <style></style> | подключает встраиваемые таблицы стилей | none |
| <base> | базовый url-адрес, относительно которого вычисляются относительные адреса | none |
| <noscript></noscript> | секция, не поддерживающая скрипт | block |
HTML теги для текста
Здесь расположены основные html теги для работы с текстом на странице.
Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.
Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <h2></h2> — <h6></h6> | заголовки шести уровней | block |
| <p></p> | параграфы в тексте | block |
| <br> | перенос текста на новую строку | none |
| <hr> | горизонтальная линия | block |
| <wbr> | возможное место разрыва длинной строки | none |
| <blockquote></blockquote> | большая цитата | block |
| <cite></cite> | источник цитирования | inline |
| <q></q> | краткая цитата | inline |
| <code></code> | фрагмент программного кода | inline |
| <kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
| <pre></pre> | выводит текст с пробелами и переносами | block |
| <samp></samp> | результат выполнения сценария | block |
| <var></var> | выделяет переменные из программ | block |
| <del></del> | перечёркивает текст, помечая как удаленный | block |
| <s></s> | перечёркивает неактуальный текст | block |
| <dfn></dfn> | выделяет термин курсивом | block |
| <em></em> | выделяет важные фрагменты текста курсивом | block |
| <i></i> | выделяет текст курсивом без акцента | block |
| <strong></strong> | выделяет полужирным важный текст | block |
| <b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | block |
| <ins></ins> | подчёркивает изменения в тексте | block |
| <u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | block |
| <mark></mark> | выделяет фрагменты текста желтым фоном | block |
| <small></small> | отображает текст шрифтом меньшего размера | block |
| <sub></sub> | подстрочное написание символов | block |
| <sup></sup> | надстрочное написание символов | block |
| <time></time> | дата / время документа или статьи | block |
| <abbr></abbr> | аббревиатура или акроним | none |
| <address></address> | контактные данные автора документа или статьи | block |
| <bdi></bdi> | изолирует текст, читаемый справа налево | inline |
| <bdo></bdo> | задаёт направление написания текста | inline |
| <ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
| <rp></rp> | тег для скобок вокруг символов | none |
| <rt></rt> | расшифровка символов | block |
Теги таблицы HTML
Здесь расположены html теги для создания таблиц.
Такие элементы тоже рекомендую использовать на странице.
Особенно они пригодятся в аналитических материалах. Так пользователи могут быстро сориентироваться в ваших данных.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <table></table> | html-таблица | table |
| <tr></tr> | строка таблицы | table-row |
| <th></th> | заголовок столбца таблицы | table-cell |
| <td></td> | ячейка таблицы | table-cell |
| <thead></thead> | блок заголовков таблицы | table-header-group |
| <tbody></tbody> | тело таблицы | table-row-group |
| <tfoot></tfoot> | нижний колонтитул таблицы | table-footer-group |
| <caption></caption> | подпись к таблице | table-caption |
| <col> | выбирает для форматирования столбцы | table-column |
| <colgroup></colgroup> | контейнер для одного или нескольких <col> | table-column-group |
Картинки
Обязательно используйте тег картинки в html-документе.
Тоже полезно при восприятии и усвоения информации.
Еще полезно и в SEO.
Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <img> | html-изображения | inline |
| <map></map> | активные области на карте-изображении | inline |
| <area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
| <canvas></canvas> | холст-контейнер для динамического отображения изображений | inline-block |
Списки
Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции.
Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.
| Название | Описание | Значение свойства display |
|---|---|---|
| <ol></ol> | упорядоченный нумерованный список | block |
| <ul></ul> | маркированный список | block |
| <li></li> | элемент списка | list-item |
| <dl></dl> | контейнер для термина и его описания | block |
| <dt></dt> | задаёт термин | block |
| <dd></dd> | расшифровывает термин | block |
Ссылки
Тег ссылки в html всегда один. Будьте осторожны при его использовании.
Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме.
Также в атрибуте данного тега внимательно прописывайте адрес перехода.
Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом.
Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!
Встраиваемый контент
Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации.
Например, вы сначала написали текстовую инструкцию. После этого в самом конце можно вставить видео с наглядной демонстрацией работы.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <audio></audio> | добавляет аудио-файлы | inline-block |
| <video></video> | добавляет видео-файлы | inline-block |
| <source> | указывает местоположение и тип альтернативных файлов для <audio> и <video> | none |
| <track> | субтитры для элементов <audio> и <video> | none |
| <embed> | встраивает внешний интерактивный контент или плагин | inline-block |
| <object></object> | контейнер для встраивания мультимедиа | inline-block |
| <param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
| <iframe></iframe> | создаёт встроенный фрейм | block |
Группировка контента
Дополнительная группировка контента по различным секциям страницы.
Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.
К примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц.
Это улучшает как удобство пользования, так и скорость загрузки страницы.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <body></body> | тело html-документа | block |
| <div></div> | контейнер для разделов html-документа, группирует блочные элементы | block |
| <span></span> | контейнер для строчных элементов | inline |
| <header></header> | секция для вводной информации сайта или группы навигационных ссылок | block |
| <footer></footer> | секция для нижнего колонтитула документа или раздела | block |
| <section></section> | логическая область (раздел) страницы, обычно с заголовком | block |
| <article></article> | раздел контента, образующий независимую часть документа или сайта | block |
| <aside></aside> | контент страницы, имеющий косвенное отношение к основному контенту | block |
| <nav></nav> | раздел документа, содержащий навигационные ссылки по сайту | block |
| <figure></figure> | независимый контейнер для такого контента как изображения, диаграммы и т. п. | block |
| <figcaption></figcaption> | заголовок для элемента <figure> | block |
| <details></details> | контейнер с дополнительными сведениями, который можно открыть или закрыть | block |
| <summary></summary> | видимый заголовок для элемента <details> | block |
| <main></main> | контейнер для уникального основного содержимого в пределах одной страницы сайта | block |
Формы
Они тоже частенько используются на сайтах. Самая главная и обязательная из них, это форма поиска.
Если это многостраничник, то такой элемент должен обязательно присутствовать.
Также сюда можно отнести формы подписки, обратной связи, регистрации и так далее.
| Название | Описание | Значение свойства display |
|---|---|---|
| <form></form> | html-форма | block |
| <input> | многофункциональные поля формы | inline-block |
| <textarea> | многострочное поле формы | inline-block |
| <label></label> | текстовая метка для элемента <input> | inline |
| <datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
| <select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
| <optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
| <option></option> | вариант (опция) в раскрывающемся списке | block |
| <fieldset></fieldset> | группирует связанные элементы в форме | block |
| <legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
| <button></button> | интерактивная кнопка | inline-block |
| <keygen> | генерирует закрытый и открытый ключи | inline-block |
| <progress></progress> | индикатор выполнения задачи | inline-block |
| <meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
| <output></output> | поле для вывода результата вычисления | inline |
На этом все!
Мы рассмотрели html теги и их значение.
Используйте данную справку, как шпаргалку при создании сайтов.
Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.
Что такое HTML-теги — шпаргалка по основным меткам
Можно бесплатно и в режиме онлайн открыть ООО через Тинькофф и вести бухгалтерию через Мое дело
х
Наверх
- Главная
- Создание сайта на HTML
- HTML-теги
Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, <body>). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <THEAD>
, а <thead>.Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, </html>).
Всё, что находится внутри пары тегов, называется их содержимым.
<Открывающий_тег>Содержимое</Закрывающий_тег> <b>Помещённый внутри этих тегов текст становится жирным</b>
Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
- Открывающей угловой скобки (<).
- Специального слова (имени тега). Например, hr, iframe, b.
- Закрывающей угловой скобки (>).
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- <!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- <html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- <meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- <script> содержит ссылку на файл сценария или сам код.
- <style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов
- <header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- <footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- <main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
- <a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- <img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- <blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- <div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- <span>. У вас есть абзац <p> или блок <div>.
- <ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- <table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
- <form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
- <button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
- <input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
- <menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- <textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
На элементе, созданном через <input>, такого сделать нельзя.Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Смотрите также
Основные HTML-теги
Атрибуты HTML-тегов
Некоторые часто используемые теги HTML
Некоторые часто используемые теги HTMLТеги | Использовать |
| (…)* | Весь документ HTML |
| ( . . .)* | Заголовок или пролог HTML-документа |
| ( . . .)* | Все остальное содержимое документа HTML |
| <НАЗВАНИЕ> . . . | Название документа |
. . . | Заголовок первого уровня крупный шрифт |
. . . | Заголовок второго уровня |
. . . | Заголовок третьего уровня |
. . . | Заголовок четвертого уровня |
<Н5> . . . | Заголовок пятого уровня |
. . . | Заголовок шестого уровня, мелкий шрифт |
. . . ( )* | Абзац При нажатии возврата в файле HTML новый абзац не создается при просмотре файла. Вам нужно использовать этот тег, чтобы создать новый абзац. |
| | Разрыв строки Этот тег показывает пустую строку. |
| Горизонтальная линейка Создает горизонтальную линию на странице. | |
| Комментарий Комментарии, которые вы пишете в середине, не будут отображаться на странице при просмотре. | |
| | Ссылка (A=Anchor) связывает текущий файл HTML с другим файлом.
Пример: Вернуться в главное меню Это отобразит файл, имя которого указано в кавычках. Имя
ссылка, которая представляет собой цветные слова, которые вы на самом деле видите, идет между первым
> и второй <. Здесь название ссылки Вернуться к
Главное меню Другой пример: ILTNet Эта ссылка приведет вас на другую страницу в Интернете. Вы можете видеть в Интернете
адрес в кавычках. |
| Список определений Поместите
|
 | Встроенное изображение Поместите имя изображения (.gif или .jpg) в кавычки. |
| <Б> . . . | Жирный Делает текст жирным |
| . . . | Курсив Выделение текста курсивом |
Размер шрифта Этот тег используется для изменения размера шрифта. Это лучше, чем использовать тег заголовка, чтобы шрифт отображался
больше. | |
| <таблица> |
«/table» = конец таблицы.
( )* опционально
| ==>> Этот документ был первоначально создан Том Ганц, компьютерный аналитик в Педагогическом колледже Колумбийского университета. |
WebD2: Общие HTML-теги
Ниже приведены некоторые факты о HTML-тегах (а также несколько фактов о XHTML-тегах):
DOCTYPE: Определение вашей версии HTML
Каждая веб-страница должна начинаться с объявления DOCTYPE .
: Это должен быть самый первый элемент в самой первой строке вашего кода HTML или XHTML. Это сообщает браузерам, в какой версии HTML была закодирована веб-страница, что помогает им узнать, как обрабатывать код. До появления HTML5 объявления DOCTYPE были длинными и сложными. Например, вот объявление DOCTYPE для XHTML 1.1:
В HTML5 объявление DOCTYPE намного проще:
Понимание следующих таблиц:
Общие теги HTML представлены ниже, сгруппированные в четыре таблицы в зависимости от их назначения. Первая таблица включает теги, управляющие общей структурой веб-страницы. Вторая и третья таблицы включают теги, которые размечают большую часть содержимого веб-страницы. Теги-контейнеры (содержащие содержимое) представлены во второй таблице, а теги, не являющиеся контейнерами (самостоятельные) — в третьей таблице. Последняя таблица содержит теги, которые используются в разметке HTML-таблиц, которые рассматриваются в Модуле 5 этого раздела.
Структура документа
| Открывающий тег | Закрывающий тег | Описание |
|---|---|---|
| Открывает и закрывает документ HTML | ||
| <голова> | Первый из двух основных разделов документа HTML. Раздел используется для предоставления информации о документе для использования главным образом поисковыми системами и браузерами. | |
| <название> | Название документа. Этот элемент вложен в секцию. В HTML5 это единственный обязательный тег, кроме объявления DOCTYPE. | |
| <тело> | Второй из двух основных разделов документа HTML. Раздел содержит все содержимое веб-страницы. |
Теги содержимого (контейнера)
h2 — основной заголовок, h3 — второстепенный и т. д.
Все, что находится между этими тегами, не отображается на экране. Это полезно для создания заметок для себя или других лиц, которые могут просматривать исходный код веб-страницы.HTML5
Семантические ТегиHTML5 представил несколько новых тегов, называемых семантическими тегами. Эти теги были разработаны, чтобы сообщать о функциях блоков контента, которые были распространены на многих веб-страницах. До HTML5 разработчики просто использовали теги
| Открывающий ярлык | Закрывающий тег | Описание |
|---|---|---|
| <заголовок> | Содержит вводный контент для страницы (например, баннер) или раздел страницы. | |
| <навигация> | Содержит содержимое навигации, например меню навигации веб-сайта. | |
| <основной> | Содержит основное содержимое веб-страницы. | |
| <в сторону> | Содержит контент, косвенно связанный с основным контентом страницы (часто он представлен на боковой панели). | |
| <нижний колонтитул> | Содержит нижний колонтитул страницы или раздела страницы. Обычно нижний колонтитул содержит информацию о содержании, такую как автор и заявление об авторских правах. |
Пустые (неконтейнерные) бирки
| Ярлык | Описание |
|---|---|
| | Разрыв строки. |
| | Вставляет изображение на веб-страницу. |
Столы
| Открывающий ярлык | Закрывающий тег | Примеры атрибутов | Описание |
|---|---|---|---|
| <таблица> | Добавляет таблицу | ||
Строка таблицы (начало и конец). |