теги HTML

Указывает программе просмотра страниц что это HTML документ.

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

Определяет видимую часть документа

Теги оглавления

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

Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)

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

Указание для поисковых роботов относится ли данная страница к мировым

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

Указание автора странички

Описание содержащийся информации (для поисковых машин)

Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16)

Ключевые слова странички (для поисковых машин)

Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный.

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный.

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый.

Устанавливает цвет гиперссылок, на которых вы уже побывали, значение RRGGBB - пример: 333333 - серый.

Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста

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

Создает самый большой заголовок

<h2, 3, 4, 5> - </h2, 3, 4, 5>

Создает заголовоки промежуточных размеров

Создает самый маленький заголовок

<b></b>

Создает жирый текст (нерекомендованный)

<i></i>

Создает наклонный текст (нерекомендованный)

Создает текст - имитирующий стиль печатной машинки (нерекомендованный)

Создает текст - имитирующий стиль печатной машинки (рекомендованный)

Название переменных отображается курсивом

Выделение цитат курсивом

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

Наклонный текст (воспринимается посковыми роботами как выделение)

Жирный текст (воспринимается посковыми роботами, как особо сильное выделение)

Устанавливает размер текста в пределах от 1 до 7.

Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

Создает гиперссылку на другие сайты.

<atarget="..."></a>

Указывает в каком окне открывать гиперссылку:

параметры	Значение
_Blank	Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно
_Parent	Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку
_Self	Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы
_Top	Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы

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

Создает гиперссылку на другую страницу.

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

Создает гиперссылку на метку текущей страници.

Отмечает часть текста, как метку для гипперссылок на странице.

Создает гиперссылку на метку другой страници.

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

<p></p>

Создает новый параграф

Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center

<nobr>

Запрещает перевод строки.

<wbr>

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

<br>

Вставляет перевод строки.

Создает отступы с обеих сторон текста.

Создает список определений.

<dt>

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

<dd>

Описывает каждое определение

Создает нумерованный список

<li>

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

Создает ненумерованный список

<li>

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

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

Графические элементы

Добавляет изображение в HTML документ

Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

Устанавливает толщину рамки вокруг изображения

Устанавливает поля сверху и снизу

Устанавливает поля сбоков

Всплывающая подсказка при наведении на имедж

<hr>

Добавляет в HTML документ горизонтальную линию.

Устанавливает высоту (толщину) линии

Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

Создает линию без тени.

Задает линии определенный цвет. Значение RRGGBB.

Таблицы

Создает таблицу.

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

Определяет отдельную ячейку в таблице.

Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Определяет подпись таблицы

Атрибуты таблицы

Задает толщину рамки таблицы.

Задает расстояние между ячейками таблицы.

Задает расстояние между содержимым ячейки и ее рамкой.

Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

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

Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

Указывает кол-во столбцев, которое объединено в одной ячейке. (по умолчанию=1)

Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)

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

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

Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту).

Фреймы

Предваряет тег <body> в документе, содержащем фреймы;

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

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

<frame>

Определяет единичный фрейм или область в таблице фреймов.

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

Атрибуты фреймов

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

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

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

Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.

Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

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

Ифрейм и его атрибуты

Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер.

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

Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм .

Устанавливает поля сверху и снизу с наружи от ифрейма

Устанавливает поля сбоков с наружи от ифрейма

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

Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1.

Указывает будет-ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

Определяет ширину ифрейма

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

Текст всплывающей подсказки

Формы

Создает формы

Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

Указывает каждый отдельный элемент меню

Создает ниспадающее меню

Указывает каждый отдельный элемент меню

Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

Создает checkbox.

Создает radio кнопку.

Создает строку для ввода текста. Параметром Size указывается длина в символах.

Создает кнопку "Отправить"

Создает кнопку "Отправить" - для этого используется изображение

Создает кнопку "Очистить"

Базовый HTML с дополнениями из HTML5 ()

Тег	Описание
<!DOCTYPE>	Говорит бразеру о стандарте HTML
<html>	Главный тег во всем html-документе указывает на то, что веб-страница использует язык HTML
<title>	Выводит информацию о странице, которая отображается на вкладке в браузере
<body>	Содержимое страницы в браузере
<h1>	Заголовок 1-го уровня.
<h2>	Заголовок 2-го уровня.
<h3>	Заголовок 3-го уровня.
<h4>	Заголовок 4-го уровня.
<h5>	Заголовок 5-го уровня.
<h6>	Заголовок 6-го уровня.
<p>	Позволяет выводить текст в абзаце
<br>	Перевод на новую строку
<hr>	Создает горизонтальную линию для разграничения текста
<!—…—>	Позволяет задать комментарий. Теги, заключенные в комментарий будут проигнорированы

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

Тег	Описание
<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>	Для надстрочного написания символов
<time>	Используется для выода даты/времени
<tt>	Нет поддержки в HTML5. Используется для отображения текста моноширинным шрифтом.
<u>	Делает текст подчеркнутым
<var>	Выделяет курсивом переменные из скриптов
<wbr>	Служит для указания браузеру разрыва длинной строки

Формы

Тег	Описание
<form>	Для вывода формы на веб-странице
<input>	Для создания полей формы. Это текстовые поля радиобаттоны, чекбоксы
<textarea>	Задает многострочную область для ввода текста
<button>	Создает кнопку в качестве содержимого кнопки можно использовать текст или изображение
<select>	Служит для создания выпадающего списка в форме. Пункты выпадающего списка делаются с помощью тега option
<optgroup>	Используется как контейнер для объединения тегов option
<option>	Определяет опцию и используется как пункт выпадающего списка select
<label>	Текстовая метка для тега input.
<fieldset>	Для группировки элементов формы. Рисует рамку вокруг них
<legend>	Заголовок элементов формы, которые объединены с помощью fieldset.
<datalist>	Контейнер для выпадающего списка. Элементы списка формируется с помощью тега option
<keygen>	Используется совместно с тегом form. Генерирует пару ключей открытый и закрытый
<output>	Для вывода результата вычисления, которое было выполнено с помощью скрипта

Фреймы

Тег	Описание
<frame>	Нет поддержки в HTML5. Определяет отдельный фрейм, который расположен в контейнере <frameset>.
<frameset>	Нет поддержки в HTML5. Выводит структуру фреймов на странице
<noframes>	Нет поддержки в HTML5. Выводит альтернативное содержание для браузеров, которые не поддерживают фреймы
<iframe>	Выводит так называемый фрейм — область документа определенных размеров в ней можно помещать содержимое с других сайтов, таким образом можно выводить видео с ютуб.

Изображения

Тег	Описание
<img>	Применяется для вывода картинок, изображений
<map>	Создает карту ссылок и служит контейнером для тега area
<area>	Предоставляет определенную активную область на карте ссылок по которой можно клацнуть
<canvas>	Создает холст на ктором можно рисовать средствами JavaScript
<figcaption>	Заголовок к тегу figure. Применятся в основном для картинок
<figure>	Тег контейнер используется для помещения внутрь его картинок

Аудио и Видео

Тег	Описание
<audio>	Выводит звуковое содержимое на веб-страницу
<source>	Используется для указания пути к видео и аудио файлам в тегах video, audio.
<track>	Для добавления субтитров в тегах video, audio
<video>	Используется для добавления видео на веб-страницу

Ссылки

Тег	Описание
<a>	Гиперссылка
<link>	Для задания отношений между документами, таким образом подключается стилевой файл к веб-странице.
<nav>	Для задания навигационных панелей и меню

Списки

Тег	Описание
<ul>	Для создания маркированного списка
<ol>	Выводит нумерованный спмок
<li>	Пункт маркированоого или нумерованного списков.
<dir>	Нет поддержки в HTML5. Позволяет создавать список, использующий системные папки, директории
<dl>	Применятся в списках определений и представляет из себя контейнер внутри которого находится описание
<dt>	Для задания термина в списке определений
<dd>	Для описания термина используется в списках определений
<menu>	Применяется для создания меню.
<menuitem>	Определяет какую команду проользователь может вызвать из контекстного меню.

Таблицы

Тег	Описание
<table>	Используется для создания таблицы
<caption>	Надпись к таблице добавляет
<th>	Задает заголовок ячейки таблицы
<tr>	Выводит строку таблицы
<td>	Длязадания ячейки таблицы
<thead>	Служит для задания заголовка таблицы
<tbody>	Тело таблицы
<tfoot>	Для задания подвала таблицы
<col>	Для форматирования одного или нескольких столбцов, которые не содержат мнформацию одного типа.
<colgroup>	Для создания структурной группы столбцов чтобы можно было делать над ними определенные действия

Стили и семантика

Тег	Описание
<style>	Для подключения внутренней таблицы стилей
<div>	Контейнер для группировки других тегов служит для организации и упорядочивания элементов на веб-странице
<span>	Используется как контейнер для строчных элементов, аналогично тегу div для блочных
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<footer>	Применяется для нижней части веб-документа. Эту область как правило называют подвалом
<main>	Используется как контейнер для основонго уникального содержимого документа
<section>	Используется для определения логической секции страницы
<article>	Используется для вывода содержимого то есть основного контента сайта
<aside>	Используется для вывода в боковых панелях сайта
<details>	Для создания интерактивного такого виджета который можно открыть или закрыть
<dialog>	Предназначен для вывода диалоговых окон
<summary>	Для создания видимого заголовка тега details Отображается в виде закрашенного треугольника, кликнув по которому можно узнать его содержимое

Метаданные

Тег	Описание
<head>	Элемент контейнер, предназначенный для объединения элементов в верхней части веб-странице как правило это верхнее меню и логотип.
<meta>	Для выода метатегов находится в шапке документа
<base>	Задает базовый адрес URL, относительно которого вычисляются все относительные адреса
<basefont>	Нет поддержки в HTML5. Определяет по умолчанию настройки шрифта для всего документа. Используйте для этого CSS

Программирование

Тег	Описание
<script>	Элемент используется для определения сценария (скрипта) на стороне клиента (обычно JavaScript).
<noscript>	Для подключения файла сценариев JavaScript к веб-странице
<applet>	Нет поддержки в HTML5. Используется для добавления на веб-мтраницу апплетов преимущественно на языке программирования Java. Используйте для этого тег embed.
<embed>	Для встраивания на веб-страницу видео, аудио и другого интерактивного содержимого
<object>	Применяется как контейнер для встраивания объектов мультимедиа
<param>	Для определения параметров для плагинов, добавленных с помощью object

Источник webdiz.com.ua

` ` ` Web-хитрости и не только...

Теги HTML и их функции

Базовый HTML с дополнениями из HTML5 ()

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

Формы

Фреймы

Изображения

Аудио и Видео

Ссылки

Списки

Таблицы

Стили и семантика

Метаданные

Программирование