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

HTML5 logo and wordmark.svgСправочник по HTML



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

Создан с учетом рекомендаций и стандартов HTML5. Тем не менее, здесь размещены осуждаемые и устаревшие теги.

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

Декларативные тегиПравить

Тег Описание
<!DOCTYPE> Дает информацию браузером, что страница придерживается HTML5
Тег Описание Пример
<!-- --> Комментарий к коду. Не показывается конечным пользователям <!-- Только для разработчиков-->

Структурные тегиПравить

Данные теги определяют так называемый "скелет" html-документа

Стандартные теги
Тег Описание
<html></html> Контейнер, содержащий в себе весь код за исключением <!DOCTYPE>
<head></head> Тег содержащий разную техническую информацию, нужная браузерам

и поисковым системам.

<body></body> Тег, в который помещается все видимое содержание сайта

Теги, которые обычно содержаться в теге <head></head>

Тег Описание Пример


Структура сайта при HTML5

Новые структурные теги, появившиеся в HTML, фактически, представляют из себя <div></div>. Главная их цель - улучшить семантику сайта/

Новые структурные теги в HTML5
Тег Описание
<header></header> Шапка сайта (аналогично работе /Шапка в Википроектах).

В него помещается лого и название сайта

<nav></nav> Навигационная панель - для удобства перемещения по сайту
<section></section> Блок для основного контента. Состоит из более мелких блоков

<article></article>

<article></article> Блок для отдельных статей. Должен помещаться в <section></section>

и содержать в себе статью

<aside></aside> Блок для дополнительной важной информации: карта сайта, некие

рекомендации, метки.

<footer></footer> Подвал сайта (аналогично работе /Подвал в Википроектах).

В него обычно помещаться контактная информация и информация о

копирайте.

Текстовые тегиПравить

Основные теги
Тег Описание Пример
<span> </span> Универсальный тег для текста. Позволяет встраиваться в другие теги
<p></p>
<a></a>
<br />
Теги форматирования текста
Тег Описание Пример (код) Пример (отображение)
<i> </i> Делает текст курсивным(italic) <i>Вики</i> Вики
<b> </b> Делает текст жирным (bold) <b> Вики </b> Вики
<u> </u>

<ins></ins>

Подчеркивает текст <u> Вики </u> Вики
<tt> </tt> Делает текст моноширинным <tt>Вики </tt> Вики
<strong></strong>

<em></em>

<dfn></dfn>

Акцентирует текст - делает его жирным

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

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

<strong>Вики</strong> →Вики

<em>Вики</em> →Вики

<dfn>Вики</dfn> → <dfn>Вики</dfn>

ВикиВики

<dfn>Вики</dfn>

<s> </s>

<strike></strike>

<del></del>

Делает текст зачеркнутым

тег <s> - краткая форма записи <strike>

<s>Вики</s> → Вики
<small></small>

<big> </big>

Делает текст меньше

Делает текст больше

<small>Вики</small> →

<big>Вики</big> →

ВикиВики
<sup></sup>

<sub></sub>

Отображает текст в верхнем индексе (степень)

Отображает текст в нижнем индексе (индекс)

<sup>Вики</sup> →

<sub>Вики</sub> →

Вики ВикиВики Вики
<abbr></abbr>

<acronym></acronym>

Обозначает текст как аббревиатуру

Обозначает текст как акроним

<abbr>WMF</abbr> →

<acronym>WMF</acronym> →

WMF<acronym>WMF</acronym>
<q></q> Делает текст в цитатой <q>Википедия - свободная энциклопедия</q> → Википедия - свободная энциклопедия
<h6></h6>

<h5></h5>

<h4></h4>

<h3></h3>

<h2></h2>

<h1></h1>

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

(Самый большой - <h1>, самый маленький - <h6>

<h6>Вики</h6>

<h5>Вики</h5>

<h4>Вики</h4>

<h3>Вики</h3>

<h2>Вики</h2>

<h1>Вики</h1>

Вики
ВикиПравить

ВикиПравить

ВикиПравить

ВикиПравить

ВикиПравить

Теги для работой с объектамиПравить

Данные теги используются для создания различных объектов в HTML: таблицы, изображения и т.д.

Теги для создания таблицы
Тег Описание Пример (код) Пример (отображение)
<table></table> Контейнер таблицы
<th></th> Используется для создания заголовка в таблице (аналогичен <td></td>)
<tr></tr> Используется для создания строки в таблице
<td></td> Используется для создании ячейки в строке(то есть - в <tr></tr>
Изображения
Тег Описание Пример (код) Пример (отображение)