Определи теги
Вы видите 10 фрагментов разметки HTML, нужно под каждым фрагментом выбрать правильный тег из списка.
Код не слишком похож на предыдущий, пара функций из него также может ещё пригодиться:
- более устойчивая (на мой взгляд) чем в предыдущем коде функция
getNRandomValuesFromArrayдля неразрушающего извлечения из массиваnразличных элементов; - функция
htmlspecialchars- простейший аналог тёзки из PHP.
Массив arr в исходнике легко пополнить, придерживаясь сделанного в начале массива описания формата, нужно только следить за исключением различных тегов, заведомо одинаково отображающихся браузерами, например, <i> и <em>, <b> и <strong> и т.п.
Открыть скрипт "Определи теги" в новом окне/вкладке
Полный исходник скрипта можно увидеть, открыв в браузере исходный текст страницы по ссылке (кодировка Юникода UTF-8). В отличие от предыдущего скрипта, тест, конечно, позволяет "подсмотреть" ответы с помощью отладочных инструментов браузера (таких как "Исследовать" в Firefox), но при правильном подборе тегов легко обойтись без этого, у меня 10 из 10 получилось сразу.
Для удобства и чтобы не плодить отдельных заметок, прилагаю пару полезных списков с тегами HTML5.
Кратко: все элементы HTML5 без устаревших (клик);
новые элементы, появившиеся только в пятой версии стандарта, выделены цветом.
Элемент
Описание
<!--...-->
Используется для добавления комментариев.
<!DOCTYPE>
Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>
Создаёт гипертекстовые ссылки.
<abbr>
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента <map>.
<article>
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>
Загружает звуковой контент на веб-страницу.
<b>
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>
Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>
Выделяет текст как цитату, применяется для описания больших цитат.
<body>
Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>
Перенос текста на новую строку.
<button>
Создает интерактивную кнопку. Элемент может содержать текст или изображение.
<canvas>
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>
Добавляет подпись к таблице. Вставляется сразу после открывающего тега <table>.
<cite>
Используется для указания источника цитирования. Отображается курсивом.
<code>
Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>
Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data>
Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.
<datalist>
Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>
Используется для описания термина из элемента <dt>.
<del>
Помечает текст как удаленный, перечёркивая его.
<details>
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент <summary>.
<dfn>
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog>
Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div>
Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>
Элемент-контейнер, внутри которого находятся термин и его описание.
<dt>
Используется для задания термина.
<em>
Выделяет важные фрагменты текста, отображая их курсивом.
<embed>
Элемент-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>
Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>
Заголовок/подпись для элемента <figure>.
<figure>
Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>
Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>
Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6>
Создают заголовки шести уровней для связанных с ними разделов.
<head>
Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header>
Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>
Горизонтальная линия для тематического разделения параграфов.
<html>
Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>
Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>
Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>
Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>
Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>
Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>
Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<label>
Добавляет текстовую метку для элемента <input>.
<legend>
Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>
Элемент маркированного или нумерованного списка.
<link>
Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>
Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>
Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>
Выделяет фрагменты текста, помечая их желтым фоном.
<meta>
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько элементов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>
Индикатор измерения в заданном диапазоне.
<nav>
Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>
Определяет секцию, не поддерживающую сценарий (скрипт).
<object>
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется элемент <param>.
<ol>
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>
Контейнер с заголовком для группы элементов <option>.
<option>
Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>
Параграфы в тексте.
<param>
Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture>
Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre>
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>
Индикатор выполнения задачи любого рода.
<q>
Определяет краткую цитату.
<ruby>
Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>
Определяет вложенный в него текст как базовый компонент аннотации.
<rt>
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>
Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>
Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>
Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>
Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>
Отображает текст шрифтом меньшего размера.
<source>
Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span>
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>
Расставляет акценты в тексте, выделяя полужирным.
<style>
Подключает встраиваемые таблицы стилей.
<sub>
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>
Создаёт видимый заголовок для элемента <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>
Задает надстрочное написание символов.
<table>
Элемент для создания таблицы.
<tbody>
Определяет тело таблицы.
<td>
Создает ячейку таблицы.
<template>
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое элемента не является его дочерним элементом.
<textarea>
Создает большие поля для ввода текста.
<tfoot>
Определяет нижний колонтитул таблицы.
<th>
Создает заголовок ячейки таблицы.
<thead>
Определяет заголовок таблицы.
<time>
Определяет дату/время.
<title>
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>
Создает строку таблицы.
<track>
Добавляет субтитры для элементов <audio> и <video>.
<u>
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>
Создает маркированный список.
<var>
Выделяет переменные из программ, отображая их курсивом.
<video>
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, OGG.
<wbr>
Указывает браузеру возможное место разрыва длинной строки.
Элементы HTML5 по функциональным группам (клик);
также приведено, как показываются по умолчанию и видно, нужна ли закрывающая часть тега.
Элемент
Описание
CSS-свойство display по умолчанию
<html></html>
корневой элемент html-документа
block
<head></head>
контейнер для метаданных html-документа
none
<title></title>
заголовок / имя html-документа
none
<base>
базовый url-адрес, относительно которого вычисляются относительные адреса
none
<link>
подключает внешние таблицы стилей
none
<meta>
мета-данные веб-страницы
none
<style></style>
подключает таблицы стилей
none
Элемент
Описание
CSS-свойство display по умолчанию
<body></body>
тело html-документа
block
<article></article>
раздел контента, образующий независимую часть документа или сайта
block
<section></section>
логическая область (раздел) страницы, обычно с заголовком
block
<nav></nav>
раздел документа, содержащий навигационные ссылки по сайту
block
<aside></aside>
контент страницы, имеющий косвенное отношение к основному контенту
block
<h1></h1> - <h6></h6>
заголовки шести уровней
block
<header></header>
секция для вводной информации сайта или группы навигационных ссылок
block
<footer></footer>
секция для нижнего колонтитула документа или раздела
block
Элемент
Описание
CSS-свойство display по умолчанию
<p></p>
параграфы в тексте
block
<address></address>
контактные данные автора документа или статьи
block
<hr>
горизонтальная линия
block
<pre></pre>
выводит текст с пробелами и переносами
block
<blockquote></blockquote>
большая цитата
block
<ol></ol>
упорядоченный нумерованный список
block
<ul></ul>
маркированный список
block
<li></li>
элемент списка
list-item
<dl></dl>
контейнер для термина и его описания
block
<dt></dt>
задаёт термин
block
<dd></dd>
расшифровывает термин
block
<figure></figure>
независимый контейнер для такого контента как изображения, диаграммы и т.п.
block
<figcaption></figcaption>
заголовок для элемента <figure>
block
<main></main>
контейнер для уникального основного содержимого в пределах одной страницы сайта
block
<div></div>
контейнер для разделов html-документа, группирует блочные элементы
block
Элемент
Описание
CSS-свойство display по умолчанию
<table></table>
html-таблица
table
<caption></caption>
подпись к таблице
table-caption
<colgroup></colgroup>
контейнер для одного или нескольких <col>
table-column-group
<col>
выбирает для форматирования столбцы
table-column
<thead></thead>
блок заголовков таблицы
table-header-group
<tbody></tbody>
тело таблицы
table-row-group
<tfoot></tfoot>
нижний колонтитул таблицы
table-footer-group
<tr></tr>
строка таблицы
table-row
<th></th>
заголовок столбца таблицы
table-cell
<td></td>
ячейка таблицы
table-cell
Элемент
Описание
CSS-свойство display по умолчанию
<details></details>
контейнер с дополнительными сведениями, который можно открыть или закрыть
block
<summary></summary>
видимый заголовок для элемента <details>
block
<dialog></dialog>
диалоговое окно, инспектор или окно
block
Элемент
Описание
CSS-свойство display по умолчанию
<script></script>
подключает сценарии к странице
none
<noscript></noscript>
секция, не поддерживающая скрипт
block
<template></template>
фрагменты HTML-кода, которые могут быть клонированы и вставлены в документ скриптом
none
<canvas></canvas>
холст-контейнер для динамического отображения изображений
inline-block
Элемент
Описание
CSS-свойство display по умолчанию
<picture></picture>
контейнер для одного <img> и ноль или больше <source>
inline
<source>
местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>
none
<img>
html-изображения
inline
<iframe></iframe>
создаёт встроенный фрейм
block
<embed>
встраивает внешний интерактивный контент или плагин
inline-block
<object></object>
контейнер для встраивания мультимедиа
inline-block
<param>
задаёт параметры для плагинов, встраиваемых с помощью элемента <object>
none
<audio></audio>
добавляет аудио-файлы
inline-block
<video></video>
добавляет видео-файлы
inline-block
<track>
субтитры для элементов <audio> и <video>
none
<map></map>
активные области на карте-изображении
inline
<area>
гиперссылка с текстом или активная область внутри карты-изображения
inline
Элемент
Описание
CSS-свойство display по умолчанию
<a></a>
гиперссылка
inline
<em></em>
выделяет важные фрагменты текста курсивом
inline
<strong></strong>
выделяет полужирным важный текст
inline
<small></small>
отображает текст шрифтом меньшего размера
inline
<s></s>
перечёркивает неактуальный текст
inline
<cite></cite>
источник цитирования
inline
<q></q>
краткая цитата
inline
<dfn></dfn>
выделяет термин курсивом
inline
<abbr></abbr>
аббревиатура или акроним
none
<ruby></ruby>
контейнер для Восточно-Азиатских символов и их расшифровки
inline
<rb></rb>
обертка для аннотации
inline
<rp></rp>
тег для скобок вокруг символов
none
<rt></rt>
расшифровка символов
block
<rtc></rtc>
обертка для дополнительной аннотации
inline
<data></data>
связывает содержимое с машиночитаемым переводом
inline
<time></time>
дата / время документа или статьи
inline
<code></code>
фрагмент программного кода
inline
<var></var>
выделяет переменные из программ
inline
<samp></samp>
результат выполнения сценария
inline
<kbd></kbd>
текст, вводимый пользователем с клавиатуры
inline
<sub></sub>
подстрочное написание символов
inline
<sup></sup>
надстрочное написание символов
inline
<i></i>
выделяет текст курсивом без акцента
inline
<b></b>
задает полужирное начертание отрывка текста, без дополнительного акцента
inline
<u></u>
выделяет отрывок текста подчёркиванием, без дополнительного акцента
inline
<mark></mark>
выделяет фрагменты текста желтым фоном
inline
<bdi></bdi>
изолирует текст, читаемый справа налево
inline
<bdo></bdo>
задаёт направление написания текста
inline
<span></span>
контейнер для строчных элементов
inline
<br>
перенос текста на новую строку
none
<wbr>
возможное место разрыва длинной строки
none
Элемент
Описание
CSS-свойство display по умолчанию
<del></del>
перечёркивает текст, помечая как удаленный
inline
<ins></ins>
подчёркивает изменения в тексте
inline
Элемент
Описание
CSS-свойство display по умолчанию
<form></form>
html-форма
block
<label></label>
текстовая метка для элемента <input>
inline
<input>
многофункциональные поля формы
inline-block
<button></button>
интерактивная кнопка
inline-block
<select></select>
элемент управления с выбором значений из предложенных вариантов <option>
inline-block
<datalist></datalist>
контейнер для выпадающего списка элемента <input> с <option>-значениями
none
<optgroup></optgroup>
контейнер с заголовком для группы элементов <option>
block
<option></option>
вариант (опция) в раскрывающемся списке
block
<textarea>
многострочное поле формы
inline-block
<output></output>
поле для вывода результата вычисления
inline
<progress></progress>
индикатор выполнения задачи
inline-block
<meter></meter>
индикатор измерения в заданном диапазоне
inline-block
<fieldset></fieldset>
группирует связанные элементы в форме
block
<legend></legend>
заголовок элементов формы, сгруппированных с помощью <fieldset>
block
12.10.2022, 12:48 [404 просмотра]