Справочник по 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> |
Новые структурные теги, появившиеся в HTML, фактически, представляют из себя <div></div>. Главная их цель — улучшить семантику сайта.
| Тег | Описание |
|---|---|
| <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> |
|
| Тег | Описание | Пример (код) | Пример (отображение) |
|---|---|---|---|
| <img> | Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. | <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Котик_любит_html.jpg" alt="Котик =*.*="> |  |
