Защита от дурака. Шаблон ввода данных

HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.

Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.

Тег Краткое описание

Комментарий.

Определяет тип документа.

Ссылка, гиперссылка, якорь.

Определяет текст как аббревиатуру.

Контактная информация автора или владельца документа.

Определяет область на карте-изображении

Статья

Контент в стороне (содержимое не является основным на странице по смыслу)

Позволяет вставить воспроизводимый аудио файл.

Полужирный текст.

Задает базовый URL или аттрибут target для относительных ссылок в документе.

Область, где написание текста может имееть другое направления.

Устанавливает направление написания текста. В отличии от направление указывается физическое направление

Цитата.

Указывает область body документа.

Перенос строки.

Кликабельная кнопка

Используется для рисовании графики с помощью скриптов

Подпись таблицы.

Сноска на название материала.

Используется для вставки компьютерного кода в текстовом виде.

Задает характеристики колонок в таблице.

Определяет группу из одной или более колонок таблицы для форматирования.

Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле

Определяет описание термина из тега в списке терминов

Текст, который удален в новой версии документа.

Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть

Указывает, что содержимое является термином.

Определяет диалоговое окно или интерактивный элемент

Блочный элемент - один из основных элементов верстки.

Определяет список определений

Название термина в списке определений

выделенный по смыслу текст (обычно, текст выделенный курсивом).

Контейнер для внешнего приложения

Группа связанных элементов в форме

Заголовок для элемента

Определяет автономную группу из нескольких элементов (например картинка с подписью)

Нижний колонтитул

Определяет форму пользовательского ввода

Заголовки HTML разного уровня: , , , , , .

Указывает область head документа.

Блок заголовка

Горизонтальная линия - тематический разделитель.

Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.

Выделяет текст курсивом.

Определяет встроенный фрейм

Изображение, картинка.

Поле для ввода

Текст, который был добавлен в новой версии документа.

Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.

Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.

Заголовок элементов

Элемент списка

Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)

Основной контент

Контейнер для . Определяет пользовательскую карту на изображении

Выделенный текст (обычно с помощью подсветки фона).

Контейнер для списка пунктов меню

Определяет элементы, которые пользователь может вызвать из контекстного меню

Используется для определения мета-данных документа.

Измеритель значений в заданном диапазоне

Контейнер для навигационных элементов

Альтернативный контент для пользователей, отключивших скрипты

Определяет встроенный объект

Определяет нумерованный список

Определяет группу связанных вариантов в выпадающем списке. Дает название группу

Параметр (вариант выбора) в выпадающем списке

Результат вычислений

Абзац.

Задает параметры для встроенных объектов

Контейнер для нескольких изображений

Предварительно отформатированный текст.

Индикатор выполнения (прогресса)

Цитата в тексте.

Альтернативный текст, если браузер не поддерживает тег .

Аннотация к содержимому тега .

Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).

Перечеркнутый текст.

Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).

Определяет скрипт или подключение скрипта из внешнего ресурса.

Раздел

Определяет выпадающий список

Текст шрифтом меньшего размера.

Определяет ресурс для тегов , и .

Строчный элемент.

Текст, выделенный по значению. Обычно отображается полужирным.

Определяет контейнер для определения стилей документа

Отображает текст в виде нижнего индекса.

Заголовок внутри тега

Отображает текст в виде верхнего индекса.

Определяет таблицу.

Определяет область контента в таблице.

Ячейка в таблице .

Многострочное поле для ввода

Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее

Место, где допускается перенос строки.

Устаревшие теги HTML

Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

Тег Краткое описание

	Акроним. Используйте тег вместо него
	Встроенный апплет. Используйте или вместо него.
	Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
	Текст большего размера. Используйте вместо него
	Отцентрованный текст. Используйте вместо него
	Список директорий. Используйте вместо него
	Определяет цвет, размер и семейство шрифта. Используйте вместо него
	Фрейм внутри . Используйте вместо него
	Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
	Альтернативный текст, если фреймы не поддерживаются
	Перечеркнутый текст. Используйте или вместо него
	Моноширный текст. Используйте вместо него
	Подчеркнутый текст. Используйте вместо него

Тег section

Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header , может находиться в footer . Тег section может быть заключен внутрь другого тега section , если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div .

Тег header

Тег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.

Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).

Тег footer

Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.

HTML

Тег nav

Тег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).

HTML

Главная
Скачать
Архив
О Нас

Элемент nav можно расположить также, например, в теге header .

Тег aside

Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.

Тег article

Тег article определяет любую независимую запись (статью) на сайте, или, например, это может быть резюме, описание товара в интернет магазине и так далее.

Тег figure

Иногда бывает необходимо разместить изображение и прилагающийся к нему текст как единую иллюстрацию. Элемент figure указывает на то, что текст и изображение являются частями единого целого.

HTML Тут я описываю изображение

Тег dialog

Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:

сам тег dialog , определяющий блок с комментариями
тег dt определят того кто говорит
тег dd определяет текст комментария

HTML Вася я тут был Петя я подтверждаю, все что написал Вася правда Разметка на основе тегов HTML5

Итак, давайте объединим наши структурные теги на странице.

Обычный блог Standard Blog

Главная
Скачать
Архив
О Нас

Title

Lorem ipsum...

Title

Lorem ipsum...

Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div . Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article . Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something" ,(где закрывающий тег еще надо поискать!) использовать тег article .

Стоит ли использовать структурные теги сейчас?

Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.

Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block .

Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.

Поддержка IE

Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:

document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");

Данный код можно включите непосредственно в head или подключить через внешний файл.

Заключение

Таким образом, вы можете прямо сейчас структурировать ваши документы посредством новых тегов HTML5.