Разное

Все теги html 5: HTML и HTML5. Описание тегов по основным разделам

16.10.2018

Содержание

HTML 5.2. теги — HTML5BOOK.RU

Встроенное содержимое
<picture></pictire> контейнер для одного <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
Семантика текста
<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
Формы
<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

HTML справочник. Все теги по категории. W3Schools на русском. Основы HTML5 для начинающих

Тег Описание
<acronym> Не поддерживается в HTML5. Используйте <abbr> вместо этого.
Определяет акроним
<abbr> Определяет аббревиатуру или акроним
<address> Определяет контактную информацию для автора / владельца документа / статьи
<b> Определяет жирный текст
<bdi> Изолирует часть текста, который может быть отформатирован в другом направлении от прочего текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет большой текст
<blockquote> Определяет раздел, что цитируется с другого источника
<center> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет центрирование текста
<cite> Определяет название произведения
<code> Определяет фрагмент компьютерного кода
<del> Определяет удалённый с документа текст
<dfn> Представляет определяющий экземпляр термина
<em> Определяет подчёркнутый текст
<font> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет шрифт, цвет и размер для текста
<i> Определяет часть текста альтернативным голосом или настроением
<ins> Определяет текст, который был вставлен в документ
<kbd> Определяет ввод с клавиатуры
<mark> Определяет отмеченный / выделенный текст
<meter> Определяет скалярное измерение в границах известного диапазона (датчик)
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задания
<q> Определяет короткую цитату
<rp> Определяет, что отображать в браузерах, которые не поддерживают ruby аннотации
<rt> Определяет объяснение / произношение символов (для восточноазиатской типографики)
<ruby> Определяет аннотацию ruby (для восточноазиатской типографики)
<s> Определяет текст, которій больше не является правильным
<samp> Определяет исходные данные с компьютерной программы
<small> Определяет меньший текст
<strike> Не поддерживается в HTML5. Используйте <del> или <s> вместо этого.
Определяет перечёркнутый текст
<strong> Определяет важный текст
<sub> Определяет подстрочный текст (нижний индекс)
<sup> Определяет надстрочный текст (верхний индекс)
<template> Определяет шаблон
<time> Определяет дату / время
<tt> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет текст телетайпа
<u> Определяет текст, который должен быть стилистически отличным от обычного текста
<var> Определяет переменную
<wbr> Определяет возможный разрыв строки

HTML5 | htmlbook.ru



HTML5 | htmlbook.ru

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

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

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.

Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

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

Создает список вариантов, которые можно выбирать при наборе в текстовом поле.

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

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

Содержит описание для тега <figure>.

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

Определяет «подвал» сайта или раздела.

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела.

Используется для генерации пары ключей — закрытого и открытого.

Элемент <main> предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.

Помечает текст как выделенный.

Отображает список меню.

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

Группирует ссылки навигации по сайту.

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

Используется для отображения прогресса завершенности задачи.

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.

Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.

Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.

Вставляет звуковой или видеофайл для тегов <audio> и <video>.

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации.

Помечает текст внутри тега как дату, время или оба значения.

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.

Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Учебник HTML 5. Статья «Введение»

Язык гипертекстовой разметки HTML (англ. HyperText Markup Language) — является языком разметки документов во Всемирной паутине.

Хочу сразу обратить Ваше внимание, что HTML является языком разметки, а не программирования, как многие ошибочно полагают. Его основная задача создать каркас для описания различных компонентов документа, таких как абзацы, заголовки, списки, таблицы, ссылки на другие страницы и так далее.

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

Цель любого веб-браузера прочитать HTML документ и правильно его отобразить. Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ.

Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.

Давайте рассмотрим чем отличаются парные теги от одиночных.

Вид (синтаксис) парного тега:


<тег>Содержание тега</тег>

Обратите внимание, что все теги заключены в угловые скобки < и >, а закрывающий тег всегда должен содержать прямой слеш перед названием тега — </тег>, этим мы сообщаем браузеру, что на этом месте наша «команда» закончена.


Большинство ошибок в верстке (создание структуры HTML кода) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / . Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны. К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.


Вид (синтаксис) одиночного тега:


<тег>Содержание

В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и >).

Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами). Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости — короче код, быстрей загрузка.

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


Хотя в HTML 5 теги не чувствительны к регистру, я рекомендую вам писать их в нижнем регистре. С помощью тегов браузер распознает структуру и значение текста, они сообщают браузеру, какая часть документа является заголовком, где начинается новый абзац, где начинается список, либо размещена таблица, что нужно выделить цветом, что перенести на следующую строку и так далее. Анализируя эту информацию, браузер отображает каждый элемент так, как мы ему это сообщили.


Пример простого HTML документа:

И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:


<!DOCTYPE html>
<html>
	<head>
		<title>Название для документа (страницы)</title>
	</head>
	<body>
		<h3>Это заголовок</h3>
		<p>Это параграф (абзац).</p>
	</body>
</html>

Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе (если им явно это не указать, но об этом позднее). Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше.

А теперь детально разберем из чего состоит любая HTML страница:

DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметкиHTML 5.

Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html>. Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.

Хронология версий HTML:

Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5
Год 1991 1995 1997 1999 2000 2014

Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).

Текст между <head> и </head> содержит информацию о документе (сведения о документе, кот

Теги html 5 для современной верстки сайтов и блогов

 

Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.

Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.

Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!

Главнокомандующий разметкой сайтов, знаменитый html

После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!

Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.

Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.

Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?

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

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

Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.

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

Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
Одиночные теги
<meta charset=»utf-8″ name = «GENERATOR» content = «Microsoft FrontPage 4.0»> В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени.
<img src=»image/cars.jpeg» alt=»BMW»> Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение.
Парные теги
<a href= «tip.html» target=»_blank» title=» Нажмите на ссылку и она откроется в новой вкладке»> Как правильно приготовить запеканку?</a> Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор.

Близкий родственник языка html

 

Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.

Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.

Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.

А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.

Тег Описание
<article> Задает наименование статьи, объявления, страницы сайта и т.д. Атрибутов не имеет.
<aside> Определяет боковой блок для размещения в нем карты сайта, рекламы, ссылок на ресурсы и т.д. Можно использовать универсальные атрибуты.
<canvas> Полезный элемент для создания при помощи JavaScript анимаций, рисунков, а также редактирования имеющихся картинок. Поддерживает как уникальные атрибуты, так и события.
<figure>   Основная задача тега: группировать разные элементы в единое целое. Это может быть, например, текст и рисунок.

Семантические теги

С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.

Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.

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

Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.

Для усвоения материала хочу, чтоб вы опробовали практический пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ваш сайт</title>
</head>
<body>
   <header>
      <h2>Блог для айтишников</h2>
   </header>
   <nav>
      <ul>
         <li>Пункт меню 1</li>
         <li>Пункт меню 2</li>
      </ul>
   </nav>
   <article>
      <header>
         <h3>Заголовок  публикации</h3>
         <p><a href="#">Автор </a>. Всего комментариев:  6 </p>
      </header>
      <p>Текст первой статьи</p>
   </article>
   <footer>
      <p>Copyright любимый блогер</p>
   </footer>
</body>
</html>

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Ваш сайт</title> </head> <body> <header> <h2>Блог для айтишников</h2> </header> <nav> <ul> <li>Пункт меню 1</li> <li>Пункт меню 2</li> </ul> </nav> <article> <header> <h3>Заголовок публикации</h3> <p><a href=»#»>Автор </a>. Всего комментариев: 6 </p> </header> <p>Текст первой статьи</p> </article> <footer> <p>Copyright любимый блогер</p> </footer> </body> </html>

Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.

Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов

 

 

Загрузка…

Прочитано: 324 раз

Таблица основных тегов html с примерами

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

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

 

Базовые теги

<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

 

Форматирование текста

<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.

<b></b> — жирный текст без придания важности выделенному фрагменту.

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

<i></i> — выделение текста курсивом без придания важности.

<del></del> — зачёркивает текст, помечая его удалённым.

<s></s> — отображает перечёркнутый текст.

<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.

<u> — подчёркивание без дополнительного акцентирования внимания.

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.

<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<cite></cite> — оформление цитат.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<p></p> — контейнер для абзаца.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.

<q></q> — краткое цитирование.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия

<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<ol></ol> — список с цифрами.

<ul></ul> — список со значками.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.

<code></code> — выделение фрагмента кода с помощью шрифта monospace. 

 

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.

<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio>  — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).

<source></source> — указывает местоположение файла для <video>, <audio> и <picture>

<track> — формирует субтитры для <video> и <audio>.

<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на  внешний источник.

<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

 

Работа с таблицами

<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

<thead></thead> — определяет заголовок.

<tbody></tbody> — отмечает тело таблицы.

<td></td> — создаёт одну ячейку.

<th></th> — указывает на заголовок ячейки.

<tr> — создание одной строки.  

<tfoot></tfoot> — показывает нижний колонтитул.

<caption></caption> — вставляет подпись. Указывается после тега <table>.

<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.

 

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
 

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.

<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.

<input> — формирует поля для добавления пользовательских данных.

<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.


<textarea></textarea> — создаёт большие поля для ввода текста.

HTML 5 Теги

Задает комментарий
Указывает тип документа
Задает гиперссылку
Задает сокращение
<адрес> Определяет элемент адреса
<зона Указывает область внутри карты изображений
<статья> Указывает артикул

Новый

<сторона> Определяет содержимое помимо содержимого страницы

Новый

<аудио> Определяет звуковое содержимое

Новый

Задает полужирный текст
<база> Определяет базовый URL для всех ссылок на странице
Для двунаправленного форматирования текста

Новый

Определяет направление отображения текста
Указывает длинную цитату
Определяет элемент тела

Вставляет одинарный разрыв строки
<кнопка> Задает кнопку
<холст> Определить графику

Новый

<заголовок> Задает заголовок таблицы
Указывает цитату
<код> Задает текст компьютерного кода
Задает атрибуты для столбцов таблицы
Задает группы столбцов таблицы
<данные> Позволяет предоставлять машиночитаемые данные

Новый

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

Новый

Задает описание определения
Задает удаленный текст
<подробности> Задает детали элемента

Новый

Определяет термин
<диалог> Указывает, что часть приложения является интерактивной.

HTML 5.1

Указывает раздел в документе
Задает список определений
Определяет термин определения
Задает выделенный текст
<вставка> Указывает внешнее приложение или интерактивное содержимое

Новый

Задает набор полей
Задает заголовок для элемента figure .

Новый

<рисунок> Задает группу мультимедийного содержимого и их заголовок

Новый

<нижний колонтитул> Определяет нижний колонтитул для раздела или страницы

Новый

<форма> Задает форму

Задает уровень заголовка 1

Указывает уровень заголовка 2

Определяет уровень заголовка 3
Указывает уровень заголовка 4
Указывает уровень заголовка 5
Задает уровень заголовка 6
Задает информацию о документе
<заголовок> Задает группу вводных или навигационных средств, включая hgroup элементов

Новый

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

ПРИМЕЧАНИЕ. Этот элемент был исключен из спецификации W3C HTML5, но по-прежнему включен в WHATWG Living Standard.

Новый

<час> Определяет горизонтальную линейку
Определяет HTML-документ
Задает курсивный текст
<кадр> Определяет встроенное подокно (фрейм)
Задает изображение
<вход> Задает поле ввода
Задает вставленный текст
<КБД> Задает текст на клавиатуре
<метка> Определяет метку для элемента управления формы
<легенда> Задает заголовок в наборе полей
  • Определяет элемент списка
    <ссылка> Задает ссылку на ресурс
    <основная> Определяет основную область содержимого документа HTML.

    Новый

    <карта> Определяет карту изображения
    <марка> Задает отмеченный текст

    Новый

    Представляет панель инструментов, состоящую из ее содержимого в виде неупорядоченного списка элементов (представленных элементами li), каждый из которых представляет команду, которую пользователь может выполнить или активировать.
    Задает метаинформацию
    <метр> Задает измерение в пределах предварительно определенного диапазона

    Новый

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

    Новый

    Указывает раздел носкрипта
    <объект> Задает встроенный объект
    Задает упорядоченный список
    Определяет группу опций
    <опция> Определяет параметр в раскрывающемся списке
    <выход> Определяет некоторые типы вывода

    Новый

    Указывает абзац
    <параметр> Задает параметр для объекта
    <рисунок> Предоставляет несколько источников для содержащегося в нем элемента img , чтобы позволить авторам декларативно контролировать или давать подсказки пользовательскому агенту о том, какой ресурс изображения использовать, на основе плотности пикселей экрана, размера области просмотра, формата изображения и других факторов.

    Новый

     
    Задает предварительно отформатированный текст
    <прогресс> Указывает ход выполнения задачи любого типа

    Новый

    Указывает короткую цитату
    Отмечает базовый текстовый компонент рубиновой аннотации.

    Новый

    Используется для браузеров, не поддерживающих рубиновые аннотации

    Новый

    Задает рубиновый текстовый компонент рубиновой аннотации.

    Новый

    Помечает рубиновый текстовый контейнер для рубиновых текстовых компонентов в рубиновой аннотации.

    Новый

    <рубин> Определяет рубиновую аннотацию (используется в восточноазиатской типографике)

    Новый

    Обозначает текст, который больше не является точным или актуальным.
    Указывает код образца компьютера
    <скрипт> Задает сценарий
    <раздел> Определяет раздел

    Новый

    <выбрать> Определяет выбираемый список
    <слот> Определяет слот, обычно в теневом дереве.

    Новый

    <маленький> Задает мелкий текст
    <источник> Определяет медиаресурсы

    Новый

    Указывает раздел в документе
    Задает строгий текст
    <стиль> Задает определение стиля
    Задает подписанный текст
    <резюме> Задает сводку / заголовок для элемента

    Новый

    Задает надстрочный текст
    <таблица> Задает таблицу
    Задает тело таблицы
    Задает ячейку таблицы
    <шаблон> Объявляет фрагменты HTML, которые можно клонировать и вставлять в документ с помощью сценария.

    Новый