Html описание – Основы HTML | Дропшиппинг

Содержание

Описание HTML, DHTML, CSS, WML,…

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Что такое HTML

HTML (HyperТext Markup Language) – язык гипертекстовой разметки для создания Web-страниц.

<!DOCTYPE>

<!DOCTYPE> указывает стандарт HTML, в соответствии с которым написана Web-страница.

Мета теги. Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем. Внутри контейнера <head> могут размещаться теги <base>, <index>, <link>, <meta>, <script>, <style>, <title>.

Тег <base>

Тег <base> задает базовый адрес (URL) для гипертекстовых ссылок документа, заданных в относительной форме. Кроме того, <base> позволяет способ открытия ссылок по умолчанию.

Текст в html

Основные теги форматирования и верстки текста.

HTML списки

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

Ссылки

Ссылки – основа гипертекстовых документов, они позволяют переходить с одной Web-страницы на другую, а также на определенное место внутри Web-страницы.

Картинки на сайте

Для вставки картинки на Web-страницу используется одиночный тег <img> с обязательным атрибутом src, указывающим адрес графического файла.

Таблицы

Основные html-теги таблиц.

Фреймы

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

Формы (FORM)

Формы – поля, переключатели и кнопки для ввода информации посетителем Web-страницы.

Примеры шаблонов для html5 form input pattern
Общие атрибуты тегов: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
<form>, <button>, <datalist>, <fieldset>, <input>
События
button, checkbox, file, hidden, number, password, radio, range, reset, submit, text

<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>

DHTML

Динамический HTML (DHTML)– набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера.

Музыка и звуки на HTML-странице

Для вставки музыки и звуков на Web-страницу используется тег <audio> с обязательным атрибутом src, указывающим адрес звукового файла.

Видео на HTML-странице

Для вставки видео на Web-страницу можно использовать тег <video> или выложить видеофайл на YouTube и указать путь к нему в атрибуте src тега <iframe>.

Карты изображений

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

SVG карты

Интерактивная карта (SVG Map) так же, как и карта изображений (Image Map), позволяет привязывать ссылки и события к определенным областям картинки. Работать с ней проще, чем с Image Map.

Графика в HTML5

Масштабируемая векторная графика SVG (Scalable Vector Graphics) – это язык разметки для описания двухмерных графических приложений и изображений.

WML

WML — язык разметки для мобильных телефонов.

SSI .shtml

SSI (Server-Side Includes) – включение кода на стороне сервера.

Таблица цветов RGB

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

Правильное сочетание цветов

Правильное сочетание цветов – важная часть работы дизайнера.

Таблица «безопасных» цветов

Таблица «безопасных» цветов – палитра цветов, рекомендуемых для экранного дизайна.

Таблица символов

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

Примеры HTML, CSS

Подборка примеров html-кода и стилевых (CSS) решений.

Alt-коды

Alt-коды – сочетание клавиши Alt и десятичного числа. Используются для ввода символов, которых нет на клавиатуре.

htmlweb.ru

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

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

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

Базовые теги

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

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

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

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

<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>.

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

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

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

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

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

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

<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> — создаёт большие поля для ввода текста.

uguide.ru

Что такое HTML. Учебник по HTML.

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Структура HTML-документа

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

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

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:

<!DOCTYPE html>
<html>
<head>
    Заголовок HTML-документа (не отображается на экране)
</head>
<body>
    Тело HTML-документа (отображается на экране)
    <!-- Это комментарий
         для внесения пояснений в HTML-документ -->
</body>
</html>

<!DOCTYPE html>

Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

подробнее о !DOCTYPE…

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

подробнее об информации в контейнере <head>…

Содержание контейнера <body>

Между парой тегов <body>…</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера.

Это может быть простой текст, списки, ссылки, изображения, таблицы и др.

обучение программированию

индивидуальные курсы

в Ростове-на-Дону

Читать дальше: <!DOCTYPE>

htmlweb.ru

Теги по категориям | справочник HTML

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<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>	Выделенный/подсвеченный текст.	6.0	4.0	11.1	5.0	9.0	12.0
<meter>	Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.	8.0	6.0	11.0	6.0	Нет	13.0
<pre>	Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк	Да	Да	Да	Да	Да	Да
<progress>	Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.	8.0	16.0	11.0	6.0	10.0	12.0
<q>	Используется для выделения коротких цитат (строчная цитата).	Да	Да	Да	Да	Да	Да
<rp>	Определяет, что отображать браузеру, который не поддерживает тег <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<rt>	Помещает полезный текст фуриганы в составе элемента <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<ruby>	Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).	5.0	38.0	15.0	5.0	5.5	12.0
<s>	Определяет текст, который больше не является правильным или актуальным.	Да	Да	Да	Да	Да	Да
<samp>	Результат вывода компьютерной программы или скрипта.	Да	Да	Да	Да	Да	Да
<small>	Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).	Да	Да	Да	Да	Да	Да
<strike>	Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>	Да	Да	Да	Да	Да	Да
<strong>	Текст, которому придают особое значение (важный текст).	Да	Да	Да	Да	Да	Да
<sub>	Текст с нижним индексом.	Да	Да	Да	Да	Да	Да
<sup>	Текст с верхним индексом.	Да	Да	Да	Да	Да	Да
<time>	Тег временной разметки (семантическая разметка).	6.0	4.0	11.1	5.0	9.0	12.0
<tt>	Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<u>	Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.	Да	Да	Да	Да	Да	Да
<var>	Математические/переменные величины.	Да	Да	Да	Да	Да	12.0
<wbr>	Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).	1.0	3.0	11.7	4.0	Нет	Да

basicweb.ru

описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги

Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами <head> и </head>, которые никак не отображаются браузером (за исключением содержимого тега <title>). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.

Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область <head> лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.

Функции мета-тегов

На данный момент не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:

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

Группы метатегов

Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

Атрибут	Описание
Name	Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др.
content	Устанавливает значение атрибута, заданного с помощью name или http-equiv.
scheme (устарел)	Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5.
charset	Новый атрибут, показывает кодировку документа в HTML5. Пример: <meta charset=»utf-8″>
http-equiv	Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы.

Группа значений атрибута NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords»:

<!DOCTYPE html>
<html>
 <head>
  <title>keywords</title>
  <meta name="keywords" content="HTML,CSS,PHP,JavaScript"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«description» (описание страницы)

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

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

<!DOCTYPE html>
<html>
 <head>
  <title>description</title>
   <meta name="description" content="Сайт об HTML и CSS"> 
   <meta name="keywords" content="HTML,CSS,PHP,JavaScript">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="author" content="Maxim White">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

index — страница должна быть проиндексирована;
noindex — страница не индексируется;
follow — гиперссылки на странице учитываются;
nofollow — гиперссылки на странице не учитываются
all — включает значения index и follow, включен по умолчанию;
none — включает значения noindex и nofollow.

HTML-код с «robots»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">
  <meta name="author" content="Maxim White">
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Группа значений атрибута HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>  
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS">
  <meta name="author" content="Maxim White">
  <meta name="robots" content="noindex, nofollow">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

В HTML5 указание кодировки упрощено:

<meta charset="UTF-8">

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh»:

<!DOCTYPE html>
<html>
 <head>
  <title>Автозагрузка</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

	Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.

«Content-Language»

Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

HTML-код с «content-language»:

<!DOCTYPE html>
<html>
 <head>
  <title>Язык документа</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <meta http-equiv="content-language" content="ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

В HTML5 указание языка упрощено:

<html lang="ru">

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

Пример HTML:

Попробуй сам
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="HTML, Meta Tags, метаданные"> <meta name="description" content="Сайт об HTML и CSS"> </head> <body>Основное содержимое страницы</body> </html>
Задачи
Итоговое задание [10-14]
На этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.
Пришло время повторить изученное и выполнить четыре несложных задания:
Ключевые слова
С помощью одинарного тега <meta> задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.
<!DOCTYPE html> <html> <head> <meta> <title>Ключевые слова</title> </head> <body> <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="keywords" content="HTML,CSS,JavaScript"> <title>Ключевые слова</title> </head> <body> <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p> </body> </html>
Индексация веб-страницы
С помощью одинарного тега <meta> разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.
<!DOCTYPE html> <html> <head> <meta> <title>Индексация и переход по ссылкам</title> </head> <body> <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="robots" content="index, nofollow"> <title>Индексация и переход по ссылкам</title> </head> <body> <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p> </body> </html>
Автоматическая перезагрузка страницы
С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.
<!DOCTYPE html> <html> <head> <meta> <title>Автоматическая перезагрузка страницы</title> </head> <body> <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="30"> <title>Автоматическая перезагрузка страницы</title> </head> <body> <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p> </body> </html>
Автозагрузка новой страницы
Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.
<!DOCTYPE html> <html> <head> <meta> <title>Автозагрузка новой страницы</title> </head> <body> <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru"> <title>Автозагрузка новой страницы</title> </head> <body> <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p> </body> </html>

Please enable JavaScript to view the comments powered by Disqus.
wm-school.ru
Семантические элементы HTML5
Опубликовано: 26 октября 2014 Обновлено: 30 апреля 2019
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
Мета содержимое
Потоковое содержимое
Секционное содержимое
Заголовочное содержимое
Текстовое содержимое
Встроенное содержимое
Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <header>
Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
<header> <h2>Site description</h2> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>
Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
2. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
<nav> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>
В качестве элементов панели навигации можно использовать не только элементы списков:
<nav> <p><a href="">...</a></p> <p><a href="">...</a></p> </nav>
Также можно добавлять заголовки внутрь элемента:
<nav> <h3>...</h3> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>
3. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <header> <h3>...</h3> </header> <p>...</p> <footer> Опубликовано в категории<a href="">Музыка</a>. <a href="">0 комментариев</a> </footer> </article>
4. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article>
<article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section> <h2>Заметки о природе</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section> <section> <h2>Исторические заметки</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section>
5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside> <h3>...</h3> <p>...</p> </aside>
<aside> <h3>...</h3> <p>...</p> <blockquote> <p>...<cite>...</cite>...</p> <p>...</p> </blockquote> </aside>
6. Элемент <footer>
Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
<footer> <address>...</address> <small>@2014...</small> </footer>
7. Элемент <address>
Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
<body> <header> <h2>Пудель</h2> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О породе</a></li> <li><a href="health.html">Здоровье</a></li> </ul> </nav> </header> <main> <section> <header> <h3>О породе</h3> <nav> <ul> <li><a href="#basic">Разновидности</a></li> <li><a href="#app">Внешний вид</a></li> <li><a href="#temp">Характер</a></li> </ul> </nav> </header> <section> <h4>Разновидности</h4> <p>...</p> </section> <section> <h4>Внешний вид</h4> <p>...</p> </section> <section> <h4>Характер</h4> <p>...</p> </section> <footer> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>
9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
<figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure>
Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;
10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
11. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time>
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>
12. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
html5book.ru
Справочник HTML | HTML теги
Все Блочные Строчные Новые HTML5 Нестандартные Не поддерживаемые в HTML5
Тег Описание
!, A
<!—…—> Добавляет комментарий в код документа
<!DOCTYPE> Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)
<a> Предназначен для создания ссылок
<abbr> Указывает, что текст является аббревиатурой
<acronym> Указывает, что текст является акронимом
<address> Предназначен для хранения контактной информации автора
<applet> Используется для вставки на страницу апплетов — небольших программ на языке Java
<area> Определяет активные области изображения, которые являются ссылками
<article> Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.
<aside> Представляет собой раздел, который имеет косвенное отношение к содержимому страницы
<audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
B
<b> Устанавливает жирное начертание шрифта
<base> Определяет адрес или способ открытия всех ссылок странице по умолчанию
<basefont> Задаёт шрифт, размер и цвет текста по умолчанию
<bdi> Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста
<bdo> Устанавливает направление вывода текста: слева направо или справа налево
<bgsound> Определяет музыкальный файл, который будет проигрываться на веб-странице
<big> Увеличивает размер шрифта на единицу по сравнению с обычным текстом
<blockquote> Предназначен для выделения длинных цитат внутри документа
<body> Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера
<blink> Устанавливает мигание текста
<br> Устанавливает перевод строки в том месте, где он находится
<button> Создаёт на веб-странице кнопку
C
<canvas> Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения
<caption> Создаёт заголовок к таблице
<center>
<cite> Представляет название произведения (книги, статьи, поэмы, песни и др.)
<code> Предназначен для отображения текста программного код
<col> Задаёт ширину и другие характеристики одной или нескольких колонок таблицы
<colgroup> Группирует колонки таблицы для изменения их параметров
<command> Создаёт команду в виде переключателя, флажка или обычной кнопки
<comment> Добавляет комментарий в код документа
D
<data> Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем
<datalist> Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле
<dd> Указывает термин в списке описаний
<del> Используется для выделения текста, который был удалён в новой версии документа
<details> спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя
<dfn> Выделяет термин в документе
<dialog> Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт
<dir> Создаёт список, содержащий названия директорий
<div> Универсальный блочный элемент
<dl> Создаёт список описаний
<dt> Определяет термин в списке описаний
E, F
<em> Предназначен для акцентирования текста
<embed> Используется для загрузки и отображения объектов
<fieldset> Группирует элементы формы
<figcaption> Содержит описание для элемента <figure>
<figure> Используется для группирования любых элементов, например, изображений и подписей к ним
<font> Изменяет характеристики шрифта, такие как размер, цвет и гарнитура
<footer> Определяет «подвал» сайта или раздела
<form> Устанавливает форму на веб-странице
<frame> Определяет свойства отдельного фрейма, на которые делится окно браузера
<frameset> Задаёт структуру фреймов на веб-странице
H
<h2> Заголовок первого уровня
<h3> Заголовок второго уровня
<h4> Заголовок третьего уровня
<h5> Заголовок четветого уровня
<h5> Заголовок пятого уровня
<h6> Заголовок шестого уровня
<head> Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными
<header> Определяет «шапку» сайта или раздела
<hgroup> Используется для группирования заголовков веб-страницы или раздела
<hr> Рисует горизонтальную линию
<html> Является контейнером, который заключает в себе всё содержимое веб-страницы
I
<i> Устанавливает курсивное начертание шрифта
<iframe> Создаёт встроенный фрейм на странице
<img> Отображает на веб-странице изображение
<input> Позволяет создавать разные элементы интерфейса
<ins> Предназначен для выделения текста, который был добавлен в новую версию документа
K, L
<kbd> Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш
<keygen> Используется для генерации пары ключей — закрытого и открытого (для форм)
<label> Устанавливает связь между определённой меткой и элементом формы
<legend> Создаёт заголовок группы элементов формы
<li> Определяет отдельный пункт списка
<link> Устанавливает связь с внешним документом вроде файла со стилями
M
<main> Элемент main предназначен для основного содержимого документа
<map> Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений
<marquee> Создаёт бегущую строку на странице
<mark> Помечает текст как выделенный
<menu> Отображает список меню
<menuitem> Задаёт команду, которую пользователь может вызывать через контекстное меню
<meta> Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meter> Используется для вывода значения в некотором известном диапазоне
N
<nav> Группирует ссылки навигации по сайту
<nobr> Уведомляет браузер отображать текст без переносов
<noembed> Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами
<noindex> Запрещает поисковой системе Яндекс индексировать текст
<noframes> Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать
<noscript> Показывает своё содержимое, если браузер не поддерживает работу со скриптами
O
<object> Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает
<ol> Устанавливает нумерованный (упорядоченный) список
<optgroup> Объединяет элементы <option> в одну группу
<option> Определяет отдельные пункты списка, создаваемого с помощью <select>
<output> Определяет область для вывода, преимущественно с помощью скриптов
P
<p> Определяет текстовый абзац
<param> Передаёт значения параметров Java-апплетам или объектам веб-страницы
<picture> Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>
<plaintext> Отображает содержимое контейнера «как есть» со всеми тегами
<pre> Определяет блок предварительно форматированного текста
<progress> Используется для отображения прогресса завершённости задачи
Q, R
<q> Используется для выделения в тексте цитат
<rp> Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>
<rt> Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>
<rtc> В основном применяется в качестве описательной части или аннотации для иероглифов
<ruby> Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста
S
<s> Используется для содержимого, которое уже не является точным или актуальным
<samp> Используется для отображения текста, который является результатом вывода компьютерной программы
<script> Предназначен для описания скриптов
<section> Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<select> Создаёт раскрывающийся список
<small> Используется для сносок и комментариев, написанных обычно мелким текстом
<source> Вставляет медийный файл для элементов <audio>, <video> и <picture>
<spacer> Создаёт пустое пространство по вертикали или горизонтали
<span> Универсальный строчный элемент
<strike> Отображает текст как перечёркнутый
<strong> Выделяет важный текст
<style> Определяет стили элементов веб-страницы
<sub> Отображает шрифт в виде нижнего индекса
<summary> Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации
<sup> Отображает шрифт в виде верхнего индекса
T
<table> Создаёт таблицу
<tbody> Предназначен для хранения одной или нескольких строк таблицы
<td> Предназначен для создания одной ячейки таблицы
<template> Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты
<textarea> Создаёт поле для многострочного текста
<tfoot> Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы
<th> Создаёт одну ячейку таблицы, которая обозначается как заголовочная
<thead> Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы
<time> Помечает текст внутри элемента как дату, время или оба значения
<title> Определяет заголовок документа
<tr> Служит контейнером для создания строки таблицы
<track> Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>)
<tt> Отображает текст моноширинным шрифтом
U, V, W, X
<u> Используется для разметки текста, который должен отличаться стилистически от обычного текста
<ul> Устанавливает маркированный (неупорядоченный) список
<var> Используется для выделения переменных из компьютерных программ
<video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице
<wbr> Указывает браузеру место, где допускается делать перенос строки в тексте
<xmp> Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины
wm-school.ru

Тег	Описание
!, A
<!—…—>	Добавляет комментарий в код документа
<!DOCTYPE>	Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)
<a>	Предназначен для создания ссылок
<abbr>	Указывает, что текст является аббревиатурой
<acronym>	Указывает, что текст является акронимом
<address>	Предназначен для хранения контактной информации автора
<applet>	Используется для вставки на страницу апплетов — небольших программ на языке Java
<area>	Определяет активные области изображения, которые являются ссылками
<article>	Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.
<aside>	Представляет собой раздел, который имеет косвенное отношение к содержимому страницы
<audio>	Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
B
<b>	Устанавливает жирное начертание шрифта
<base>	Определяет адрес или способ открытия всех ссылок странице по умолчанию
<basefont>	Задаёт шрифт, размер и цвет текста по умолчанию
<bdi>	Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста
<bdo>	Устанавливает направление вывода текста: слева направо или справа налево
<bgsound>	Определяет музыкальный файл, который будет проигрываться на веб-странице
<big>	Увеличивает размер шрифта на единицу по сравнению с обычным текстом
<blockquote>	Предназначен для выделения длинных цитат внутри документа
<body>	Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера
<blink>	Устанавливает мигание текста
<br>	Устанавливает перевод строки в том месте, где он находится
<button>	Создаёт на веб-странице кнопку
C
<canvas>	Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения
<caption>	Создаёт заголовок к таблице
<center>
<cite>	Представляет название произведения (книги, статьи, поэмы, песни и др.)
<code>	Предназначен для отображения текста программного код
<col>	Задаёт ширину и другие характеристики одной или нескольких колонок таблицы
<colgroup>	Группирует колонки таблицы для изменения их параметров
<command>	Создаёт команду в виде переключателя, флажка или обычной кнопки
<comment>	Добавляет комментарий в код документа
D
<data>	Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем
<datalist>	Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле
<dd>	Указывает термин в списке описаний
<del>	Используется для выделения текста, который был удалён в новой версии документа
<details>	спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя
<dfn>	Выделяет термин в документе
<dialog>	Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт
<dir>	Создаёт список, содержащий названия директорий
<div>	Универсальный блочный элемент
<dl>	Создаёт список описаний
<dt>	Определяет термин в списке описаний
E, F
<em>	Предназначен для акцентирования текста
<embed>	Используется для загрузки и отображения объектов
<fieldset>	Группирует элементы формы
<figcaption>	Содержит описание для элемента <figure>
<figure>	Используется для группирования любых элементов, например, изображений и подписей к ним
<font>	Изменяет характеристики шрифта, такие как размер, цвет и гарнитура
<footer>	Определяет «подвал» сайта или раздела
<form>	Устанавливает форму на веб-странице
<frame>	Определяет свойства отдельного фрейма, на которые делится окно браузера
<frameset>	Задаёт структуру фреймов на веб-странице
H
<h2>	Заголовок первого уровня
<h3>	Заголовок второго уровня
<h4>	Заголовок третьего уровня
<h5>	Заголовок четветого уровня
<h5>	Заголовок пятого уровня
<h6>	Заголовок шестого уровня
<head>	Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными
<header>	Определяет «шапку» сайта или раздела
<hgroup>	Используется для группирования заголовков веб-страницы или раздела
<hr>	Рисует горизонтальную линию
<html>	Является контейнером, который заключает в себе всё содержимое веб-страницы
I
<i>	Устанавливает курсивное начертание шрифта
<iframe>	Создаёт встроенный фрейм на странице
<img>	Отображает на веб-странице изображение
<input>	Позволяет создавать разные элементы интерфейса
<ins>	Предназначен для выделения текста, который был добавлен в новую версию документа
K, L
<kbd>	Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш
<keygen>	Используется для генерации пары ключей — закрытого и открытого (для форм)
<label>	Устанавливает связь между определённой меткой и элементом формы
<legend>	Создаёт заголовок группы элементов формы
<li>	Определяет отдельный пункт списка
<link>	Устанавливает связь с внешним документом вроде файла со стилями
M
<main>	Элемент main предназначен для основного содержимого документа
<map>	Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений
<marquee>	Создаёт бегущую строку на странице
<mark>	Помечает текст как выделенный
<menu>	Отображает список меню
<menuitem>	Задаёт команду, которую пользователь может вызывать через контекстное меню
<meta>	Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meter>	Используется для вывода значения в некотором известном диапазоне
N
<nav>	Группирует ссылки навигации по сайту
<nobr>	Уведомляет браузер отображать текст без переносов
<noembed>	Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами
<noindex>	Запрещает поисковой системе Яндекс индексировать текст
<noframes>	Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать
<noscript>	Показывает своё содержимое, если браузер не поддерживает работу со скриптами
O
<object>	Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает
<ol>	Устанавливает нумерованный (упорядоченный) список
<optgroup>	Объединяет элементы <option> в одну группу
<option>	Определяет отдельные пункты списка, создаваемого с помощью <select>
<output>	Определяет область для вывода, преимущественно с помощью скриптов
P
<p>	Определяет текстовый абзац
<param>	Передаёт значения параметров Java-апплетам или объектам веб-страницы
<picture>	Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>
<plaintext>	Отображает содержимое контейнера «как есть» со всеми тегами
<pre>	Определяет блок предварительно форматированного текста
<progress>	Используется для отображения прогресса завершённости задачи
Q, R
<q>	Используется для выделения в тексте цитат
<rp>	Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>
<rt>	Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>
<rtc>	В основном применяется в качестве описательной части или аннотации для иероглифов
<ruby>	Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста
S
<s>	Используется для содержимого, которое уже не является точным или актуальным
<samp>	Используется для отображения текста, который является результатом вывода компьютерной программы
<script>	Предназначен для описания скриптов
<section>	Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<select>	Создаёт раскрывающийся список
<small>	Используется для сносок и комментариев, написанных обычно мелким текстом
<source>	Вставляет медийный файл для элементов <audio>, <video> и <picture>
<spacer>	Создаёт пустое пространство по вертикали или горизонтали
<span>	Универсальный строчный элемент
<strike>	Отображает текст как перечёркнутый
<strong>	Выделяет важный текст
<style>	Определяет стили элементов веб-страницы
<sub>	Отображает шрифт в виде нижнего индекса
<summary>	Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации
<sup>	Отображает шрифт в виде верхнего индекса
T
<table>	Создаёт таблицу
<tbody>	Предназначен для хранения одной или нескольких строк таблицы
<td>	Предназначен для создания одной ячейки таблицы
<template>	Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты
<textarea>	Создаёт поле для многострочного текста
<tfoot>	Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы
<th>	Создаёт одну ячейку таблицы, которая обозначается как заголовочная
<thead>	Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы
<time>	Помечает текст внутри элемента как дату, время или оба значения
<title>	Определяет заголовок документа
<tr>	Служит контейнером для создания строки таблицы
<track>	Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>)
<tt>	Отображает текст моноширинным шрифтом
U, V, W, X
<u>	Используется для разметки текста, который должен отличаться стилистически от обычного текста
<ul>	Устанавливает маркированный (неупорядоченный) список
<var>	Используется для выделения переменных из компьютерных программ
<video>	Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице
<wbr>	Указывает браузеру место, где допускается делать перенос строки в тексте
<xmp>	Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины

Описание HTML, DHTML, CSS, WML,…

Что такое HTML

<!DOCTYPE>

Мета теги. Информация в заголовке <head>

Тег <base>

Текст в html

HTML списки

Ссылки

Картинки на сайте

Таблицы

Фреймы

Формы (FORM)

DHTML

Музыка и звуки на HTML-странице

Видео на HTML-странице

Карты изображений

SVG карты

Графика в HTML5

WML

SSI .shtml

Таблица цветов RGB

Правильное сочетание цветов

Таблица «безопасных» цветов

Таблица символов

Примеры HTML, CSS

Alt-коды

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

Базовые теги

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

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

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

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

Что такое HTML. Учебник по HTML.

Структура HTML-документа

Общий вид HTML-документа:

<!DOCTYPE html>

Информация в заголовке <head>

Содержание контейнера <body>

Теги по категориям | справочник HTML

описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги

Функции мета-тегов

Группы метатегов

Группа значений атрибута NAME

«keywords» (ключевые слова)

«description» (описание страницы)

«Author» и «Copyright»

«Robots»

Группа значений атрибута HTTP-EQUIV

«Content-Type»

«refresh»

«Content-Language»

Пример HTML:

Задачи

Итоговое задание [10-14]

Ключевые слова

Индексация веб-страницы

Автоматическая перезагрузка страницы

Автозагрузка новой страницы

Семантические элементы HTML5

Описание HTML5-элементов

1. Элемент <header>

2. Элемент <nav>

3. Элемент <article>

4. Элемент <section>

<article> внутри <section>

5. Элемент <aside>

6. Элемент <footer>

7. Элемент <address>

8. Элемент <main>

9. Элемент <figure>

10. Элемент <figcaption>

11. Элемент <time>

12. Элемент <mark>

13. Элемент <bdi>

14. Элемент <wbr>

15. Элементы для описания Восточно-Азиатских символов

Справочник HTML | HTML теги

Добавить комментарий Отменить ответ