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

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



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

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

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

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

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

Структурные теги

править

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

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

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

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

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

Тег Описание Пример
<title></title> Тег, в котором определятся заголовок документа <title>Справочник по HTML — Викиучебник</title>
<meta> Этот тег определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. <meta charset="utf-8">
<script></script> Тег предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. <script type="text/javascript" src="wikibooks_html.js"></script>


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

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

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

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

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

<article></article>

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

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

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

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

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

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

копирайте.

Текстовые теги

править
Основные теги
Тег Описание Пример
<span></span> Универсальный тег для текста. Позволяет встраиваться в другие теги <span>Текст</span>
<p></p> Тег определяет текстовый абзац. Является блочным элементом. <p>Текст</p>
<a></a> Тег является ссылкой. Задать куда идёт ссылка, можно через параметр "href". <a href="wow.html">Ссылка на wow.html</a>
<br /> Тег устанавливает перевод строки в том месте, где этот тег находится. <p>Текст... <br /> ...А этот текст на новой строке</p>
Теги форматирования текста
Тег Описание Пример (код) Пример (отображение)
<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>

Вики

Вики
Вики

<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
<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> Контейнер таблицы <table border="1"></table> нету
<th></th> Используется для создания заголовка в таблице (аналогичен <td></td>) <table border="1"><tr><th>Монетки</th></tr></table>
Монетки
<tr></tr> Используется для создания строки в таблице <table border="1"><tr></tr></table> нету
<td></td> Используется для создании ячейки в строке(то есть — в <tr></tr> <table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>США</td><td>Россия</td><td>Украина</td></tr></table>
123
СШАРоссияУкраина
Изображения
Тег Описание Пример (код) Пример (отображение)
<img> Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Котик_любит_html.jpg" alt="Котик =*.*=">
Котик =*.*=