Теги - это слова языка HTML. С их помощью можно превратить простой поток текста в красиво оформленный документ с понятной структурой. Полный список HTML-тегов содержит около сотни пунктов, однако, на практике постоянно используется гораздо меньше. Они выполняют разные функции - от построения визуального каркаса страницы и форматирования текста до подключения сторонних файлов и соответствия оформления официальным правилам интернета.
Структура документа
Чтобы веб-страница адекватно отображалась браузером и хорошо воспринималась роботами, она должна иметь определенную структуру.
Самым первым тегом документа должен быть <!DOCTYPE>, объявляющий, к какому типу он относится. Именно в соответствии с доктайпом браузер будет визуализировать верстку. Самым популярным типом является стандарт HTML5, который объявляется следующим образом:
<!DOCTYPE html>Страница должна иметь корневой элемент, оборачивающий все ее содержимое. Эту функцию выполняет тег html.
Вся служебная информация размещается внутри секции head, а собственно контент, который будет виден пользователю может быть заключен в тег body.
<!DOCTYPE html>
<html>
<head>
<!-- служебная информация -->
</head>
<body>
<!-- содержимое страницы -->
</body>
</html>Использование тега body необязательно, однако, считается хорошей практикой. Это позволяет четко определить структуру веб-страницы, обозначить начало и конец контентной части.
Каждый тег является полноценной секцией с содержимым, поэтому имеет открывающую и закрывающую части.
Служебная информация
Внутри тега head прописываются данные, которые не видны пользователю, но важны для веб-документа.
Заголовок страницы, который будет отображаться во вкладке браузера, указывается в теге title.
<head>
<title>FB.ru</title>
</head>
Разнообразная полезная служебная информация может быть представлена в виде мета-тегов, не имеющих закрывающей части. Метаинформация описывается атрибутами тега meta:
name- имя описываемого свойства;content- его значение;http-equiv- указание на то, что данный метатег должен быть преобразован в HTTP-заголовок;charset- кодировка, в которой документ был сохранен.
Ниже представлен список html-тегов с атрибутами, которые могут пригодиться для передачи важных данных:
<meta charset="utf-8"> | Кодировка веб-страницы |
|
| Описание содержимого документа и ключевые слова для сео-робота |
|
| Создатель страницы и авторские права |
|
| Электронная почта или сайт автора |
<meta name="Revisit-After" content="5 days"> | Сообщение поисковому роботу о том, что через пять дней страница изменится и ее снова нужно будет проиндексировать |
<meta http-equiv="expires" content="Sun, 25 Feb 2018 23:59:59 GMT+03:00 "> | Указывает браузеру, как долго следует хранить веб-документ в кэше |
|
| Команды для сео-робота, разрешающие или запрещающие индексировать страницу и прослеживать ссылки на ней. Возможные значения:
|
<meta http-equiv="Refresh" content="8, URL="http://www.site.ru"> | Перенаправление на другой URL через указанное количество секунд |
Подключение файлов
Для полноценной работы веб-странице зачастую требуются дополнительные ресурсы, например, стили и скрипты. Они могут быть подключены из сторонних файлов или определены в самом документе.
Стили должны быть указаны внутри тега head, чтобы обеспечить правильное отображение страницы. Для подключения файла стилей используется незакрывающийся тег link с атрибутами href="адрес файла" и rel="stylesheet", который указывает браузеру, что загруженный файл является таблицей CSS. Определение стилевых правил внутри самой страницы должно быть сделано в теге style.
Подключение скриптов в служебной секции может тормозить загрузку, поэтому их часто объявляют в самом низу документа перед закрывающим тегом body. Для указания адреса файла используется атрибут src. Кроме того, скрипт может быть написан внутри самого тега, но чтобы браузер увидел его, адрес указывать не следует.
Пример подключения файлов:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<script src="script.js"></script>
</body>
</html>Пример определения скриптов и стилей внутри страницы:
<html>
<head>
<style>
h1 { color: green; }
h2 { color: blue; }
</style>
</head>
<body>
<script>
var header = document.getElementById('header');
header.style.border = "2px solid red";
</script>
</body>
</html>Разметка страницы
Чтобы визуально разбить сплошной поток неформатированного текста на смысловые группы, создать колонки и отдельные секции, используются структурные HTML-теги. Они формируют блочные контейнеры, для которых можно установить любое оформление с помощью CSS.
Самый популярный тег гипертекстовой разметки - это, без сомнения, div. Он не несет никакой семантической нагрузки и может использоваться для группировки любых сегментов контента.
Кроме этого, существует несколько семантических структурных тегов, введенных стандартом HTML5. Они помогают придать их содержимому определенную смысловую нагрузку, обозначив его, например, как блок навигации или подвал сайта.
Список HTML-тегов, имеющих семантическое значение на уровне целой страницы:
| Тег | Семантика |
header | шапка сайта, обычно содержит название, контактные данные и основное меню |
main | основной контент |
footer | подвал сайта |
nav | блок навигации |
article | выделяет независимую область контента, например, отдельную статью или комментарий |
section | логический раздел веб-страницы с заголовком |
aside | боковая панель, содержащая дополнительную информацию |
Кроме того, новый стандарт позволяет семантически группировать медиа-контент с подписью с помощью тегов figure и figcaption.
<figure>
<img src="elefant.jpg" alt="" />
<figcaption>Африканский слон</figcaption>
</figure>Теги заголовков
Для выделения заголовков разных уровней существует целая группа тегов от <h1> до <h6>. Буква h - первая буква слова header, а индекс рядом с ней - уровень заголовка.
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>На практике чаще всего используются первые три типа.
Оформление гиперссылок
Гиперссылки, связывающие разные страницы, - это основа Всемирной паутины, поэтому их оформлению в HTML уделяется отдельное внимание. Ссылки должны выделяться на фоне остального текста, по умолчанию они имеют синий цвет и подчеркивание. Такое оформление обеспечивает тег <a>.
Полный список атрибутов HTML-тега гиперссылки:
- все универсальные атрибуты, такие как class, id, style;
- href - адрес страницы, на которую будет осуществлен переход;
- target - указывает, где именно следует открыть новую страницу. По умолчанию целевой является текущая вкладка, значение
blankопределяет открытие новой вкладки. - download - вместо перехода произойдет загрузка указанного файла на компьютер пользователя;
- rel - предназначен для поисковых систем, со значением
nofollowзапрещает переход робота по ссылке; - type - указывает MIME-тип целевого файла.
Медиаконтент
Веб был бы очень скучным без картинок, видео и прочего медиаконтента. В стандарте HTML есть несколько тегов для его вставки на страницу.
Для размещения изображений предназначен тег img со следующими специфическими атрибутами:
src- адрес картинки;alt- альтернативный текст, который будет отображен, если в процессе загрузки изображения возникнет ошибка;width,height- размеры.
Встраиваемые объекты могут быть размещены внутри тегов object или embed, кроме того, стандарт HTML5 ввел специальные теги video и audio. Они обладают внушительным списком атрибутов, контролирующих отображение и воспроизведение медиаконтента.
Тег iframe создает отдельный плавающий фрейм, в который может быть загружен другой веб-документ.
Canvas позволяет создавать различные изображения и динамически манипулировать ими с высокой эффективностью с помощью JavaScript.
Форматирование текста
Список HTML-тегов, предназначенных для форматирования текстового контента, очень велик.
b,strong- жирное начертание;i,em,dfn- курсив;q,blockquote- выделение цитат;code,kbd- моноширинный шрифт;del,s- зачеркивание;ins,u- подчеркивание;mark- выделение желтым;sub- подстрочный индекс;sup- надстрочный индекс;small- текст меньшего размера по сравнению с текущим.
Принудительные переносы можно расставить с помощью тега <br>. <wbr> подскажет браузеру возможные места разрыва строки. Кроме того, существует тег <pre>, к контенту которого не применяется форматирование, сохраняются все пробелы и переносы.
Оформить текст в виде абзацев поможет тег <p>, а разделить их тонкой серой линией - <hr>.
Интерактивные элементы
Очень важны для работы интернет-сайтов формы и различные интерактивные элементы. Они позволяют получать и передавать необходимые данные, взаимодействовать с пользователем, создавать динамический контент.
Один из самых важных элементов форм - поле ввода, представленное тегом <input>. Оно может принимать множество разных форм в зависимости от значения атрибута type.
Другие элементы форм:
button- кнопка;select- выпадающий список;textarea- многострочное поле ввода;label- подпись для поля.
Тег form группирует интерактивные элементы и обеспечивает отправку данных на сервер, а fieldset - объединяет связанные по смыслу поля в группы.
Оформление списков
В HTML есть три вида списков: маркированный, нумерованный и список определений.
Список определений состоит из:
- контейнера -
<dl>; - названия термина -
<dt>; - описания термина -
<dd>.
<dl>
<dt>Термин 1</dt>
<dd>Описание первого термина</dd>
<dt>Термин 2</dt>
<dd>Описание второго термина</dd>
</dl>HTML-тег нумерованного списка - <ol> (ordered list), маркированного - <ul> (unordered list). Их пункты оборачиваются в тег <li> (list item).
<ul>
<li>каждый</li>
<li>охотник</li>
<li>желает</li>
<li>знать</li>
<li>где</li>
<li>сидит</li>
<li>фазан</li>
</ul>Форматирование таблиц
Еще одним важным элементом веба являются таблицы, позволяющие систематизировать и удобно преподнести большие объемы информации.
Список HTML-тегов таблиц:
- table - контейнер таблицы;
- thead - шапка, обычно содержащая заголовки;
- tbody - тело таблицы с основными данными;
- tfoot - футер, в котором подводятся итоги;
- tr - ряд ячеек;
- td - обыкновенная ячейка;
- th - ячейка заголовка, имеет собственное оформление по умолчанию;
- col - позволяет выделить колонку таблицы и применить к ней стили;
- colgroup - группа колонок;
- caption - подпись к таблице.
Этот неполный список HTML-тегов с описанием демонстрирует, как широки возможности гипертекстовой разметки при оформлении веб-страниц. Верстальщик может представить любую информацию в удобном для пользователя виде и при этом обеспечить хорошее восприятие страницы поисковыми роботами, что очень важно для ее продвижения.
