Name already in use
Тег, тэг (tag) — именованная метка, дескриптор.
HTML-страница состоит из элементов. Теги используются для указания типа этих элементов.
Большинство тегов — парные. Один — открывающий <tagName> , другой — закрывающий </tagName> . Между тегами распологается контент, который необходимо отобразить.
Некоторые элементы не могут содержать контент, поэтому их теги являются самозакрывающимися. <tagName />
Элементы могут содержать характерные им атрибуты в теге <tagName attribute=»value»> .
Одни элементы могут являться частью других элементов, поэтому определённые тэги могут быть вложенными.
Комментарий имеет следующую структуру.
Парные и одиночные теги
Парные теги имеют открывающий и закрывающий тег, перед именем закрывающиего ставится слэш / :
Одиночные теги не имеют закрывающего тега:
Блочные и строчные теги
Соотвуствуют блочным и строчным элементами.
Блочные элементы могут хранить другие блочные элементы ( <p> не может хранить блочные), строчные элементы и текст. ( <div> , <p> )
Строчные элементы обычно хранят только текст (текст, изображение), не могут содержать строчные и блочные элементы. ( <span> , <img> )
Блочные теги создают разрыв строки, строчные — не создают.
Теги верхнего уровня
Теги верхнего уровня отвечают за создание HTML-документа.
Теги заголовка документа отвечают за настройки страницы (описание, подключение скриптов и стилей) и не видны пользователю (кроме title ).
Тело документа отвечает за содержательную часть документа, отображаемую в браузере.
Теги <html> и <body> считаются необязательными в коде, но их желательно писать всегда.
Пользователь видит глазами блоки страницы, но браузеры слепы.
Семантические теги добавляют семантику (смысловое значение) содержимому страницы.
С помощью этих тегов барузерам проще индексировать страницу, отделить важный контент от дополнительной информации.
Все семантические теги можно использовать неоднократно.
Устаревшие тэги (obsolete) были ранее запрещены и удалены или могут быть удалены из браузеров в любой моменты (хотя некоторые браузеры до сих пор могут их поддерживать).
Фреймы и встроенные фреймы
Фреймы разделяли окно браузера на отдельные, расположенные рядом области, в каждую из которых загружалась самостоятельная веб-страница. Они устарели и не поддерживаются в HTML5.
Встроенные (плавающие) фреймы встраивают новый независимый HTML-документ в текущий.
Широко используются для вставок медиа (google-карты, аудио и видеоплееры, примеры кода), для аутентификации и платёжных транзакций, в большинстве остальных случаев лучше их не использовать.
Основным отличием фреймов и встроенных фреймов является то, что встроенные фреймы вставляются в страницу как есть, а в случае фреймов документ разбивает окно браузера на несколько маленьких панелей, в каждой из которых хранится отдельный документ.
Синтаксис фреймов (уже не поддерживается)
Устаревший синтаксис фреймов:
Синтаксис встроенных фреймов
Вставки видео из Youtube:
Встроенный фрейм можно использовать как место, где должна открыться гиперссылка, по которой переходит пользователь:
Преимущества и недостатки фреймов
- Встраиваемая веб-страница не зависит от родительсокго веб-документа, что наделяет <iframe> некоторой безопастностью.
- Быстро и просто изменяются размеры размещённых веб-страниц (как размеры обычного блока).
- Удобно встраивать контент с других сайтов.
- Фреймы скрывают адрес страницы и показывать только адрес сайта (пользователю не понятно, где он находится; нельзя добавить страницу в закладки или поделиться ссылкой).
Элемент <!DOCTYPE> предназначен для указания типа документа, он не является HTML-тегом и должен находиться в начале файла.
Существует несколько версий HTML и XHTML. Чтобы браузер понимал, как правильно интерпретировать документ, необходимо указать его тип.
Document Type Definition (DTD, определение типа документа) — язык, использующийся для записи синтаксических правил SGML-подобных языков разметки (HTML, XML, SGML, GML).
DTD определяет структуру документа, список валидных элементов и их атрибутов.
Отрывок из DTD-файла для HTML 4.01
HTML 4.01 базировался на SGML, поэтому его Doctype ссылался на DTD.
Разработчики HTML5 отказались от использования DTD, поскольку посчитали его слишком ограниченным инструментом как для валидации, так и для описания всех возможностей HTML5. Например, в DTD невозможно правильно описать пользовательские атрибуты ( data-* ), поскольку в DTD каждый атрибут должен быть описан отдельно. Бесконечное количество вариантов — бесконечное описание. В итоге разработчики решили использовать свои валидаторы.
- Элемент верхнего уровня: в HTML — <html> , в SVG — <svg> .
- Публичность: публичный ресурс — PUBLIC , системный локальный — SYSTEM . HTML , XHTML — всегда PUBLIC .
- Регистрация: зарегистрирован ли разработчик текущего DTD в международной организации по стандартизации (ISO). + — да, — — нет. W3C не зарегистрирован.
- Уникальное название организации, разработавшей используемый DTD.
- Тип описываемого документа. DTD .
- Уникальное имя описания документа в DTD.
- Язык описания.
- URL документа формата DTD.
- HTML 5. Воспринимает все типы документов, DTD не требуется. Рекомендуемый вариант.
- HTML 4.01
- XHTML 1.1
- MathML
На данный момент существует три режима браузеров
- Режим совместимости (Quirks mode).
- Режим стандартов (Standards mode).
- Режим почти стандартов (Almost standards mode).
Режим может оказывать влияние на разметку (layout), парсинг и валидацию HTML и CSS, DOM API.
Введение режимов позволило решить следующие проблемы:
- устаревшие сайты могут ещё достаточно долго поддерживаться, не переписывая кодовую базу под новые стандарты
- разработчики, знающие свои целевые стандарты, могут сами выбрать режим, изменяя Doctype.
Для проверки текущего режима в браузерах имеется свойство document.compatMode , которое выдаёт CSS1Compat , если установлен режим стандартов или режим почти стандартов, и BackCompat , если установлен режим совместимости.
В случае отсутствия Doctype или невалидного Docktype все браузеры переходят в режим совместимости, режим «причуд» (Quirks Mode). Режим совместимости предназначен для отображения веб-страницы подобно старым браузерам (для которых html-страницы до введения Doctype). В этом случае каждый браузер заменяет современную функциональность своими заглушками и происходят различные причуды (quirks), варьирующиеся от «ничего не происходит» до «всё падает с ошибками».
Пример невалидного Doctype, переводящего браузер в режим совместимости.
Пример валидного Doctype, переводящего браузер в режим совместимости (слишком старая версия HTML).
Наличие валидного Doctype последних версий выступает гарантией того, что современные браузеры обработают документ одинаково: в режиме стандартов (Standards mode).
Использование режима стандартов важно для поддержки современных возможностей браузеров по типу <video> и <canvas> .
Пример Doctype, переводящего браузер в режим стандартов с использованием нового браузерного валидатора.
Пример Doctype, переводящего браузер в режим стандартов с использованием старого валидатора, опирающегося на DTD-файл.
Режим почти стандартов
Режим почти стандартов (Almost standards mode) очень похож на режим стандартов, но имеет один quirk, касающийся случаев, когда картинка является единственным контентом какого-то блока (например, клетки таблицы (table cells)). Такие картинки в режиме стандартов являются встроенными элементами (inline), что создаёт дополнительный странный отступ снизу, зарезервированный для специальных символов, которых нет у картинок. Этот отстут можно было убрать только сделав картинку блочным элементов. Это не понравилось некоторым создателям браузеров и они решили ввести режим почти стандартов, исправляющий этот баг.
Пример Doctype, переводящего браузер в режим почти стандартов
HTML сам по себе не является полноценным языком программирования, поскольку в нём нет условных операторов, переменных циклов и других возможностей, характерных другим языкам. HTML-разметка является не более, чем простым текстом (строкой).
В наши дни веб-страницы являются достаточно динамичными, что достигается посредством изменения HTML на клиенте. Этой задачей занимается JavaScript, который работает с DOM (древовидным представлением HTML). Каждому HTML-элементу ставится в соответствие DOM-элемент. В DOM имеется множество методов, позволяющих искать, добавлять и удалять DOM-элементы, получать и изменять их атрибуты, стили, подписываться на события и делать многие другие вещи.
Если на сервере появляется необходимость работать с HTML, то чаще всего подразумевается генерация HTML (строки) для передачи на клиент, который в дальнейшем будет манипулировать ей при помощи JavaScript. В таком случае нет необходимости в методах, которые предлагает DOM API.
Генерируемый на сервере HTML обычно зависит от некоторых переменным.
В простейшем случае можно воспользоваться шаблонными строками, которые позволяют использовать переменные.
Тем не менее, такие «строки» могут сильно разрастаться: много переменных, условных операторов и строк кода в целом. Работать с ними становится затруднительно.
На помощь приходят шаблонизаторы (Template Engines). Они позволяют эффективно работать с HTML как со строкой, предоставляя возможности использования переменных, условий, циклов и многого другого. Достигается это посредством использования специального синтаксиса внутри строки, который распознаётся шаблонизатором и заменяется на обычные символы.
Самыми популярными на данный момент шаблонизаторами являются Handlebars и Mystache
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title .
abbr часто используется совместно с тегом dfn , идентифицирующим понятие или термин:
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
Для определения аудио-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type ).
Текст между <audio> и </audio> отображается только в случае, когда браузер не поддерживает элемент audio .
В настоящее время поддерживается три формата аудио: MP3 , WAV и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления (без этого атрибута элемент audio , скорее всего, не будет отображаться на странице)
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с аудио с помощью JavaScript
- src — путь к аудиофайлу
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Для определения видео-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type ).
Текст между <video> и </video> отображается только в случае, когда браузер не поддерживает элемент video .
В настоящее время поддерживается три формата видео: MP4 , WebM и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с видео с помощью JavaScript
- src — путь к видеофайлу
- poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
- width — ширина элемента в пикселях
- height — высота элемента в пикселях
DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video .
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
- href — основной путь
- target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank , _parent , _self и _top
blockquote и cite
Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite .
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Атрибут id тега datalist должен совпадать с атрибутом list тега input .
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
dl , dt и dd
Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt , определяющим понятие или термин, и dd , определяющим описание термина.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
Тег details определяет раскрывающийся список с дополнительной информацией. Он часто используется для создания интерактивных виджетов, которые можно открывать и закрывать без использования JavaScript . В открытом состоянии он расширяется и показывает скрытый контент.
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Для отображения заголовка details используется тег summary .
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
Индикатором активного состояния dialog является атрибут open .
Для управления объектом Dialog с помощью JavaScript используются такие методы как show() , close() и showModal() , а также свойство open .
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
Для добавление подписи к figure используется тег figcaption .
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Для обеспечения доступности совместно с meter рекомендуется использовать тег label .
- value — текущее числовое значение между min и max
- min — нижняя числовая граница диапазона
- max — верхняя числовая граница диапазона
- low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min , но меньше high и max
- high — нижняя числовая граница верхнего предела диапазона
- optimum — оптимальное числовое значение между min и max . Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low , значит, предпочтительным является нижний диапазон
- form — определяет элемент form , с которым связан meter
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Для обеспечения доступности совместно с progress рекомендуется использовать тег label .
- max — максимальное значение. По умолчанию равняется 1
- value — текущее значение
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
- for — определяет связь между результатом и элементами, используемыми для его выичсления
- form — определяет элемент form , которому принадлежит output
- name — название элемента output
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
Элемент picture содержит два тега: один или более source и один img .
Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source .
Путь к изображению указывается в атрибуте srcset , а медиа-запрос — в атрибуте media .
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Контент внутри template может быть отрендерен с помощью JavaScript .
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript . Он может использоваться как в теге head , так и в теге body . В первом случае noscript может содержать только такие теги как link , style и meta .
Другие теги в форме шпаргалок
Семантическое "секционирование" страницы
Стилизация текста
Форма
Символ / означает или .
Поля для ввода данных
- accept — MIME-тип принимаемых файлов (только для type="file" ). Значения: расширение, например, .png , audio/* , video/* , image/* , медиа тип, например, json
- alt — подпись
- autocomplete — on / off
- autofocus
- checked — только для type="checkbox" или type="radio"
- disabled
- form
- formaction — только для type="submit" или type="image"
- formenctype — только для type="submit" или type="image" . Значения: application/x-www-form-urlencoded , multipart/form-data , text/plain
- formmethod — только для type="submit" или type="image" ( get / post )
- formnovalidate — отключает проверку элементов формы
- formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type="submit" или type="image" ). Значения: _blank , _self , _parent , _top , название фрейма
- height — высота в пикселях (только для type="image" )
- list
- max — максимальное значение (число или дата)
- maxlength — максимальная длина строки (количество символов)
- min — минимальное значение (число или дата)
- minlength — минимальная длина строки (количество символов)
- multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
- name
- pattern — регулярное выражение для проверки значения поля
- placeholder
- readonly
- required
- size — количество символов, определяющее ширину поля
- src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type="image" )
- step — интервал (шаг) между min и max
- type
- value
- width — ширина поля в пикселях (только для type="image" )
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area , но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas , предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Таблица основных тегов html с примерами
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
<!—. —> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<body bgcolor=?> — цвет фона документа в формате RGB.
<body text=?> — цвет текста.
<body link=?> — цвет гиперссылок.
<body vlink=?> — цвет гиперссылок, по которым уже переходили.
<body alink=?> — цвет гиперссылок при нажатии.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
<h1></h1>. <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> — надстрочное начертание символов.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<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>.
<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.
<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.
<hr size=?> — устанавливает высоту линии.
<hr width=?> — устанавливает ширину линии.
<hr noshade> — убирает тень у линии.
<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
<thead></thead> — определяет заголовок.
<tbody></tbody> — отмечает тело таблицы.
<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> — создаёт большие поля для ввода текста.
Оптимизация для новичков: HTML-теги и атрибуты в SEO
Первый этап продвижения сайта — его внутренняя оптимизация, важнейшей составляющей которой считается работа с кодом. Поэтому каждый SEO-специалист должен знать основные теги и атрибуты языка HTML, уметь оптимизировать их.
Не все понимают, на чем нужно сфокусировать свое внимание в первую очередь и как правильно использовать тот или иной элемент. В этом посте мы расскажем о тегах и атрибутах, о которых важно помнить начинающему SEO-специалисту.
Теги и атрибуты как составные части языка HTML
Теги и атрибуты составляют основу HTML — языка гипертекстовой разметки. Последовательность тегов и их атрибутов задает структуру документа. Интерпретируя язык разметки, браузер «понимает», о чем страница и как должен отображаться ее контент (текст, картинки, видео).
Теги задают каркас страницы, атрибуты расширяют или модифицируют действия тегов. Они описываются внутри открывающего тега в виде коллекции «имя=»значение»». Например: <meta name=»description»>.
Существует два типа тегов: парные и одиночные. Парные (или контейнерные) теги состоят из пары — открывающий и закрывающий тег <. >. </. >. Одиночные теги состоят лишь из одного открывающего тега. Например, тег <img>.
Стандартно структура HTML-документа содержит такие элементы:
- <!DOCTYPE> указывает на тип текущего документа. В нашем случае HTML;
- тег <html> отмечает границы документа, в нем содержатся обязательные теги <head> и <body>;
- тег <head> — контейнер, в него помещается информация для браузеров и поисковых систем. Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title>, с помощью которого устанавливают заголовок вкладки браузера;
- тег <body> определяет видимую часть документа, которая отображается в окне браузера. К такой информации относится текст, изображения, результат работы скриптов и другое.
Сперва рассмотрим набор тегов, помещающихся в блоке <head>. Они наиболее значимы для специалиста по поисковой оптимизации.
Что такое тег <title>
Тег <title> один из важнейших в поисковом продвижении, отвечает за наименование документа. Текст в этом теге — заголовок страницы в результатах поисковой выдачи, окна браузера и ссылки в закладках. <title> помогает понять пользователям и поисковым роботам, о чем данная страница. Он влияет на ранжирование документа в поисковой выдаче.
Пример кода:
Где пользователь может увидеть ваш <title>:
Зачем нужны метатеги
Помимо тега <title>, в <head> располагаются теги типа <meta>, которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.
Meta description
Текст метатега description — это краткое описание контента страницы. Информация из этого тега напрямую не влияет на ранжирование страницы. При этом большинство поисковых систем использует содержимое метатега description при образовании сниппета. Цепляющий description, который к тому же отвечает на запрос пользователя, поможет привлечь человека на ваш сайт.
Пример кода:
Meta robots
Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.
Пример кода:
Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».
Основные значения атрибута content:
- index — страница доступна для индексации;
- noindex — запрет добавления страницы в индекс;
- follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
- nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
- all — инструкция, аналогичная «index, follow», противоположная настройка: «none».
Наличие метатега robots в коде сайта не обязательно. Если meta robots отсутствует, страница открыта для индексации и переходить по ссылкам разрешено.
Meta charset
Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока <head> до элементов, которые содержат текст, включая тег <title>.
Пример кода:
Многие браузеры научились распознавать кодировку документа автоматически, но все же рекомендуется прописать короткую строку, чтобы избежать возможных проблем с выводом информации на странице.
Meta viewport
Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:
Если этот элемент отсутствует, мобильные браузеры по умолчанию используют версию страниц для компьютера и пытаются оптимизировать контент собственными силами, подгоняя содержимое под размер экрана. Из-за этого контент страницы может выглядеть непропорционально, и посетителям сайта придется выполнять лишние действия, чтобы прочитать описание товара, посмотреть картинку, видео. Поисковые системы считают такой сайт не адаптированным для мобильных устройств и будут понижать его в результатах поиска.
Meta keywords
Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.
Пример кода:
Когда использовать теги link
В блоке <head> также располагаются теги <link>, которые устанавливают связь данного документа с другими веб-страницами. Рассмотрим такие атрибуты тега «link»: «canonical», «next / prev», «alternate».
Атрибут canonical
Атрибут «rel=»canonical»» используют для решения вопросов с дублирующимся контентом: когда на сайте есть близкие или идентичные по содержанию страницы по разным url. Атрибут canonical указывает поисковым системам, какую из дублирующихся страниц индексировать и показывать в результатах поиска, при этом передавая ей ссылочный вес и другие характеристики дубликатов. Чтобы указать, какая из страниц каноническая, нужно в коде страницы-дубля разместить тег «link» с атрибутом «canonical», где в атрибуте «href» прописать адрес канонической страницы.
Пример кода:
Особенность canonical в том, что все дублирующиеся страницы остаются доступны для пользователей. Поэтому каноникализацию рекомендуется применять для страниц, которые нужны на сайте, но по определенным причинам являются дубликатами.
Атрибут alternate
Атрибут «rel=»alternate»» используется, чтобы указывать альтернативные версии страниц сайта, например, указывает на разные языковые версии или мобильную версию сайта. С его помощью поисковые системы определяют, какую версию страницы показывать тому или иному пользователю в результатах поиска.
Указать роботам на наличие нескольких языковых версий можно, разместив на всех страницах сайта фрагмент кода:
- вместо «xx» указываем код языка (в формате ISO 639-1), «YY» — региона (ISO 3166-1 Alpha 2);
- URL — абсолютный url альтернативной страницы.
Помните, что информация обо всех существующих версиях должна содержаться в коде каждой из них, то есть в коде каждой страницы должен содержаться собственный атрибут «rel=»alternate» hreflang=»xx-YY»», а также ссылки на все остальные версии.
Сообщить поисковым системам о мобильной версии сайта можно, используя атрибут «media». Как правило, версия для компьютеров размещается в домене www.example.com, а вариант сайта для мобильных устройств — в домене m.example.com.
Таким образом на обычной странице https://www.example.com/page-1 нужно добавить код:
На странице для мобильных устройств https://m.example.com/page-1 следует указать «canonical» на версию для компьютеров:
Оптимизация контента сайта
Видимый пользователю контент сайта помещается между тегами <body>. </body>. Уделяйте внимание его оптимизации. Контент с четкой структурой, разметкой легче воспринимается не только поисковыми роботами, но и пользователями, что улучшает поведенческие факторы.
Теги <div>, <span>, <table>
Теги <div>. </div> используют для создания каркаса страницы. <div> — это блочный элемент, предназначенный для управления содержимым определенных фрагментов документа, будь то текст, изображение, ссылка или другое. Особенность блочных тегов в том, что они начинаются с новой строки и занимают всю доступную ширину области, в которой размещены.
С помощью <div> можно задавать стили определенным объектам страницы. Аналогичным образом установить стили для определенной части информации на странице позволяют теги <span>. </span>. Отличие от <div> состоит в том, что <span> — это строчный элемент, поэтому его следует использовать для фрагментов контента, размещенных горизонтально, тогда как <div> отображает элементы друг за другом по вертикали.
Задать фрагменту документа стили можно двумя способами:
- использовать внешние таблицы стилей, подключенные с помощью тега <link>:
Нужный фрагмент текста связывается с определенным стилем посредством атрибутов «class» или «id».
- использовать атрибут «style», который применяется непосредственно в HTML-коде с указанием правил CSS, например:
Задавать стили с помощью атрибута следует в единичных случаях. Массовое добавление атрибута «style» к тегам лишь неоправданно увеличит размер кода и скорость его загрузки.
Элемент <table> служит для создания таблиц и является контейнером для элементов, которые определяют содержимое таблицы.
Прямого отношения к поисковой оптимизации перечисленные выше теги не имеют, но ошибки в разметке контента могут повлиять на валидность кода, то есть — соответствие структуры кода стандартам. Некорректная верстка исказит отображение страницы в браузере и может привести к неправильной интерпретации ее содержимого поисковыми системами. А это уже серьезная проблема для SEO-специалиста.
Заголовки H1 — H6
Существует множество тегов для оформления текстового контента сайта. Наиболее важные из них — теги заголовков «Н1 — Н6», и особенно — главный заголовок страницы — «Н1». Наряду с <title> значение этого тега сообщает пользователям и поисковым роботам о содержании конкретной страницы сайта. Также теги заголовков зачастую содержат основные тезисы текста, бегло просмотрев их, пользователь понимает, будет он читать текст целиком или нет.
Пример кода:
Внедряя заголовки, важно соблюдать их иерархию: после заголовка «Н1» должен следовать «Н2», если «H2» отсутствует, то «H3» и так далее.
Тег параграфа
Чтобы разделить текст на параграфы, нужно использовать теги <p>. </p>. Будьте предельно внимательны к первому абзацу, который иногда выводится в сниппет страницы в поисковой выдаче. Он должен мотивировать пользователя прочитать текст полностью и содержать ключевые слова.
Оформление списков
Поисковые системы положительно относятся к маркированным и нумерованным спискам в контенте страницы. Они помогают представить информацию в краткой и структурированной форме.
Для формирования списков используют теги:
- <ul>. </ul> — для создания маркированного списка;
- <ol>. </ol> — обрамляют нумерованные списки;.
- <li>. </li> — определяют элементы списка в маркированных и нумерованных списках.
Пример кода:
Теги акцентирования
Наиболее важные мысли в тексте можно выделять тегами <strong>. </strong> и <em>. </em>, которые отображают заключенный в них текст жирным начертанием и курсивом соответственно.
Аналогичного визуального эффекта можно добиться с помощью тегов <b>. </b> (жирный) и <i>. </i> (курсив).
Теги <i> и <b> — теги физической разметки и просто устанавливают начертание текста, в то время как <em> и <strong> — теги логической разметки и подчеркивают важность размеченного ими текста.
В любом случае увлекаться использованием этих тегов, а тем более выделять ими каждое второе ключевое слово, не рекомендуется — такой текст будет неудобно читать пользователям, а поисковые системы воспримут его как спам.
Оформление ссылок
Для создания ссылок используют тег <a>. Подробнее: в атрибуте «href» указываем адрес страницы, на которую происходит переход. Между тегами <a>. </a> прописываем кликабельную часть текста, при нажатии на которую будет осуществляться переход на другую страницу. Согласно рекомендациям поисковых систем, текст ссылки должен отличаться от остального контента страницы и быть заметным пользователю.
На странице сайта могут быть обнаружены нежелательные ссылки, когда вебмастер не может поручиться за качество документов, на которые ведет ссылка (например, она размещена в комментарии пользователя). Такие ссылки можно закрывать атрибутом «rel=»nofollow»», который укажет роботам, что конкретно по этой ссылке следовать и передавать указанной странице вес не нужно.
Пример кода:
Существует также возможность запретить индексирование размещенной на странице ссылки или другого фрагмента текста. Для этих целей Яндексом был разработан тег <noindex>. </noindex>. К сожалению, он не работает для Google.
Пример кода:
Тег <img>
Тег <img> добавляет изображение в HTML-документ. Обязательный атрибут — «src=»https://netpeak.net/ru/blog/optimizatsiya-dlya-novichkov-html-tegi-i-atributy-v-seo/URL»» определяет имя и местоположение файла изображения. При необходимости, картинку можно оформить ссылкой на другой файл. Для этого нужно поместить тег <img> в контейнер <a>.
С точки зрения SEO обязательны атрибуты картинок «alt» и «title».
Атрибут «title» — подсказка пользователю: когда он наводит курсор на изображение и видит описание того, что на картинке. Для поисковых систем это скорее вспомогательный тег, но в него все же стоит добавить ключевое слово.
Атрибут «alt» — это альтернативное текстовое описание изображения, которое выводится пользователю, если картинка не может быть загружена. Также содержимое тега «alt» помогает системам поиска картинок проиндексировать изображения с вашего сайта. Текст именно этого тега учитывается в поиске по картинкам, поэтому в него нужно добавлять ключевые слова.
Пример кода:
Также для картинок нужно указывать атрибут «width» (ширина) или «height» (высота). Лучше задать что-то одно, браузер автоматически подстроит второй параметр, чтобы пропорции не были искажены.
Рекомендуется задавать реальные размеры изображений. Если вы хотите разместить на странице небольшую картинку, просто уменьшите ее реальный размер в любом графическом редакторе. Тем самым вы уменьшите ее вес, что даст плюс к скорости загрузки.
Тег <script>
Тег <script>. </script> предназначен для подключения скриптов в HTML-документ. Есть два способа добавить код на страницу:
- подключить внешний файл с кодом, разместив в теге <script> путь к файлу скрипта с помощью атрибута src:
- разместить непосредственно сам код в теге <script>.
Предпочтительнее подход, при котором скрипты выносятся во внешний подключаемый файл. Этот метод позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, потому что внешний файл кэшируется браузером при первой загрузке, и в последующем браузер берет его из своего кэша.
Ускорить загрузку страниц помогут также атрибуты «defer» и «async» тега <script>. Браузер загружает и отображает веб-страницы постепенно, то есть одновременно читает и отображает уже обработанный HTML-код. Обнаружив скрипт, браузер сначала загружает и выполняет его, и лишь потом продолжает обработку оставшейся части страницы.
Решить эту проблему поможет использование атрибутов «async» или «defer». Они позволяют загружать скрипты асинхронно: браузер не ждет загрузки и отработки скрипта, а продолжает обрабатывать HTML-код.
«defer», в отличие от «async», сохраняет относительную последовательность загрузки скриптов на странице, поэтому скрипты будут загружаться в порядке их размещения в коде. Кроме того, они начнут загружаться лишь после полной загрузки HTML.
«Async» следует применять для скриптов, от которых не зависит отображение других элементов страницы, например, для подключения кодов аналитики. Defer — элементов, для которых не обязательна мгновенная загрузка.
Существует также тег <noscript>, содержащийся в нем текст будет выводиться пользователю, когда его браузер не поддерживает работу со скриптами или их поддержка отключена вручную.
В заключение отметим: нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию, и неправильное использование любого из них может привести к печальным последствиям. Главное — понять, когда, как и зачем их нужно внедрять. И делать контент, в первую очередь для людей, а не для поисковых роботов.
Выводы
- Теги и атрибуты — это основа языка HTML. Оптимизация сайта немыслима без базового знания языка гипертекстовой разметки.
- Основной фронт работ SEO-специалиста связан с оптимизацией тегов из блока <head> HTML-документа, ведь именно там располагается информация для браузеров и поисковых систем. В контейнере <head> помещаются тег <title>, метатеги, теги <link>. В них содержится информация о документе, помогающая поисковым системам понять о чем страница и как следует ее интерпретировать.
- Не менее важна оптимизация тегов и атрибутов, расположенных в <body>, поскольку информацию именно из этого блока видят на странице пользователи. Контент должен быть структурирован, а код валидным, что служит залогом правильного отображения сайта в любом браузере.
- Нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию и неправильное применение любого их них может привести к печальным последствиям. Главное — понять, как и зачем их нужно использовать. И делать контент в первую очередь для людей, а не для поисковых роботов.
Начала карьеру в Netpeak в 2016 году. Специалист отдела по работе с крупными проектами.