Атрибуты HTML-тегов — шпаргалка
С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?
Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение”
lang=”en” Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
<p align=”center”>Абзац</p>
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибуты
Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
<a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a>
- class позволяет связать тег с заранее заданным с помощью CSS оформлением.
Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса. - С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
- При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <menu>, а атрибуту contextmenu присваивается его идентификатор.
- dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
- draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
- dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
- hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.
- id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
- lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
- spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
- style позволяет задать оформление элемента с помощью CSS-кода.
- tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.
- title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
Значениями выступают коды языков (русский — ru, английский — en и т. п.).<a title=”Ссылка, ведущая на Яндекс” href=”http://yandex.ru”>Поиск</a>
- translate разрешает (yes) или запрещает (no) перевод содержимого тега.
- align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег <img>) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутов
В качестве примера рассмотрим строку HTML-кода:
<p contenteditable=”true”>Этот текст можно редактировать</p>
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
<p> — открывающий тег контейнера, хранящего абзац.
</p> — закрывающий тег.
Между символами > и < расположен текст Этот текст можно редактировать. Это — надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable=”true” — это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable=”true”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true, написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение”
contenteditable=”true”Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
0 — полноценный платный курс;полный список тегов и значений — Топвизор
Содержание
Веб-страница — это HTML-код, состоящий из набора специальных тегов. По-другому этот код называют «исходным». Благодаря ему браузеры отображают страницу в таком виде, в каком мы её видим.
Помимо этого в HTML-коде есть элементы, которые не видны пользователю, но важны для SEO-продвижения.
В этой статье расскажем, на какие элементы в исходном коде обращать внимание SEO-специалисту и как эти элементы влияют на продвижение страницы в поиске.
Как открыть исходный код в разных браузерах и на мобильных устройствах
Что такое HTML-код страницыВеб-страница — это и есть HTML-код.
Откройте исходный код любой страницы в интернете и вы увидите вот что:
Если рассмотреть HTML-код, то станет понятно, что это набор различных тегов со своими атрибутами и значениями этих атрибутов.
Все эти элементы вместе говорят браузеру, как нужно отображать страницу, какие элементы на ней есть.
Например, тег <h2></h2> говорит о том, что внутри него заголовок. Тег <img> — о том, что внутри изображение, а тег <a></a> — о том, что внутри ссылка.
Сравнение: как элементы выглядят на странице и в кодеНо кроме этого с помощью HTML мы можем «общаться» и с поисковыми роботами. Обратите внимание на эту часть кода:
Метатеги в HTML-кодеВсё, что написано внутри тега <meta> (метатега) — это информация, которую SEO-специалисты указывают для поисковой системы.
Мы можем подсказывать поисковикам, нужно или не нужно индексировать страницу, как часто её индексировать, какие ключи есть на странице, о чём она, есть ли на ней специальная разметка и какая и т.
Теги <meta> всегда вписываются внутри тега <head></head>.
Чтобы мы с вами синхронизировались в терминах, давайте посмотрим, из чего может состоять элемент HTML-кода:
Из чего состоит элемент HTML-кодаНе у всех тегов могут быть атрибуты и значения атрибутов. Но в целом тег и всё, что внутри него, называется элементом HTML-кода.
Сокращённо структуру HTML-кода можно представить так:
<!DOCTYPE HTML>
<html>
<head>
набор важной информации для браузера и поисковиков
</head>
<body>
всё, что должен видеть пользователь на странице
</body>
</html>Как видно, основные теги в структуре HTML — это <head> и <body>. Внутри них располагаются все другие элементы.
В теге <head> собрана вся служебная информация для поисковых систем: <meta>, Title, а также счётчики Метрики и Analytics, пиксели соцсетей. Вся информация располагается между открывающим и закрывающим тегом <head></head>.
В теге <body> собрана вся отображаемая на странице информация: заголовки и подзаголовки, абзацы текста, таблицы, изображения, ссылки, любые блоки — всё, что должен видеть пользователь.
Подробнее об элементах внутри <head> и <body> поговорим далее.
Полезные для SEO теги и атрибуты
Тег titleВнутри тега <title></title> прописывается Title страницы. Это важный SEO-тег.
Он отображается на вкладке в браузере, но кроме этого может отображаться на:
- странице поисковой выдачи в сниппете;
- в описании ссылок при репостах.
Google и Яндекс говорят, что это важный элемент результата поиска и что Title даёт представление о содержании страницы и её релевантности поисковому запросу.
Title — это один из тех элементов, на основании которого поисковики будут ранжировать страницу. Поэтому SEO-специалисты уделяют большое внимание тому, что будет написано в Title, какие ключи в нём использовать.
В документе может быть только один Title, и находиться он может только внутри контейнера <head></head>. В HTML-коде он выглядит так:
<!DOCTYPE HTML>
<head>
<title>Самый лучший заголовок</title>
</head>Тег metaВся служебная информация для поисковиков и браузеров содержится в этом теге. По-другому её называют метаданные.
Внутри тега <meta> прописываются различные атрибуты. Чаще всего используются два основных атрибута — name и content.
Атрибут name в SEO мы используем, чтобы указать, какой именно метатег мы сейчас указываем. А с помощью атрибута content передаём информацию, которая должна быть связана с этим метатегом. Эти атрибуты используются вместе.
name=»description»
Это один из самых важных метатегов для SEO.
В этом метатеге мы указываем описание страницы. Яндекс говорит, что содержимое метатега description — один из источников, на основе которых формируются описания страниц сайта в результатах поиска.
Вот как он выглядит в коде:
<meta name="description" content="Как собрать семантику с помощью Вордстат, как пользоваться операторами, зачем смотреть частоту и как автоматизировать работу.">
С одной стороны, описания страниц в сниппетах формируются поисковиками автоматически, на основе содержания страниц.
Google Справка: «Описания в результатах поиска генерируются автоматически и отражают тот контент с вашей страницы, который точнее всего соответствует поисковому запросу».
Но если мы напишем информативный description, который точно отражается содержание страницы, то поисковики могут «подтянуть» его в сниппет практически без изменений.
Яндекс.Справка: «В description следует добавить полезный и привлекательный текст. Длина описания ограничена шириной экрана устройства, которое использует пользователь».
name=»robots»
В коде этот метатег выглядит так:
<meta name="robots" content="noindex">
Здесь значение атрибута name — «robots», а значение атрибута content — «noindex».
Получается, что с помощью этого метатега мы привлекаем внимание поисковых роботов (robots) и говорим им (content), что эту страницу индексировать не нужно (noindex).
name=»keywords»
Другой пример важного для SEO метатега — keywords или ключевые слова. Например:
<meta name="keywords" content="wordstat, Яндекс.Вордстат, как пользоваться вордстатом">
Здесь значение атрибута name — «keywords», а значение атрибута content — «wordstat, Яндекс.Вордстат, как пользоваться вордстатом». Получается, мы показываем поисковым роботам, что в этом метатеге содержатся ключевые слова страницы (keywords), и говорим (content), что эти слова такие: wordstat, Яндекс.Вордстат, как пользоваться вордстатом.
Несмотря на то, что об актуальности метатега keywords идут споры, Яндекс говорит, что может учитывать его при определении соответствия страницы поисковым запросам.
name=»viewport»
Метатег viewport сообщает браузеру, что у вас есть адаптивная версия сайта под разные устройства, и указывает, как правильно изменить размеры элементов страницы в соответствии с размером экрана пользователя.
Адаптация под мобильные устройства — это один из факторов ранжирования, поэтому этот метатег важен для SEO.
Обычно код выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1">Тег link
Этот тег почти всегда добавляется внутри тега <head>. Он устанавливает связь текущей веб-страницы с другими веб-документами (страницами, стилями, шрифтами). Здесь работают в связке основные атрибуты rel и href.
Атрибут rel указывает род отношений текущей страницы к другой странице, а href содержит ссылку на эту «другую» страницу.
Важные для SEO значения атрибута rel — canonical и alternate.
rel=»canonical»
Используется для того, чтобы указать канонический (основной) адрес страницы.
Как говорит Google, если на сайте есть разные страницы с практически одинаковым контентом, например, версии для мобильных устройств и компьютеров, он может посчитать их дублями (копиями).
Для это мы указываем на страницах канонический URL основной страницы. Так мы можем помочь поисковой системе понять, какая из этих страниц основная, а какие — её копии.
Что будет, если не указать canonical — Яндекс.Справка
Для чего выбирать канонический URL — Google Справка
В коде тег link с атрибутом rel=»canonical» выглядит так:
<link rel="canonical" href="https://topvisor.com/ru/practice/how-not-to-miss-deadlines/">
С помощью этого атрибута, поисковики могут объединить группы страниц с одинаковым каноническим URL и ранжировать в поиске не дубли страницы, а канонический URL.
rel=»alternate»
Так же, как и canonical, используется для предотвращения появления дублей, но в том случае, если одна и та же страница может быть доступна по разным URL.
Alternate указывает на разные версии страницы, например, на разных языках или на мобильную версию. В коде это выглядит так:
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.Тег a
site.com/dress/summer-dress/">Этот тег указывается внутри тега <body></body>. В теге <a> всегда находятся ссылки. Если вы видите на странице какую-либо ссылку, то в коде она точно будет размечена тегом <a>.
Внутри этого тега всегда будет атрибут href, который содержит саму ссылку. Кроме этого иногда внутри этих ссылок нам может понадобится поставить дополнительные атрибуты, важные для SEO.
rel=»nofollow»
Когда поисковые роботы индексируют вашу страницу, они учитывают и ссылки, которые вы на ней указали. Поисковик пытается установить связь вашего сайта со страницами, на которые вы ссылаетесь.
Если вы не хотите, чтобы поисковые роботы устанавливали такую связь, то сказать им об этом можно с помощью значения атрибута nofollow. В коде это выглядит так:
<a href="https://taplink.cc/dasha_thinks" rel="nofollow">https://taplink.cc/dasha_thinks</a>
rel=»sponsored»
Используется для рекламных и партнёрских ссылок.
Пример в коде:
<a href="https://site.com" rel="sponsored">Текст ссылки</a>
rel=»ugc»
Этим значением должны быть размечены ссылки, созданные пользователями. Это нужно для того, чтобы предотвратить появление спама на сайте и исключить его негативное влияние на ранжирование.
О влиянии спамных ссылок на SEO — Google Справка
Тег img — атрибут ALT
Тег <img> — стандартный тег HTML. У него есть важный для SEO атрибут — ALT.
Помимо того, что ALT важен для пользователей, он имеет значение и для SEO, потому что помогает роботам индексировать картинки. По словам Яндекса, с помощью ALT поисковой системе проще понять, что представляет собой изображение.
Описание картинки должно быть информативным и отражать то, что на ней изображено. Это поможет поисковому роботу понять, релевантно ли изображение поисковому запросу пользователя. По этой причине в ALT можно добавлять одну из ключевых фраз страницы. Пример в коде:
<img src="https://yastatic.
net/q/logoaas/v2/Справка.svg" alt="Справка">Теги заголовков h2 – h6
h2 — это тег главного заголовка контента. Его видит пользователь, когда заходит на страницу.
Пример заголовка h2 на страницеУ всех заголовков страницы есть своя иерархия: один главный заголовок — h2, затем заголовки второго уровня h3 и заголовки третьего уровня h4. Поисковому роботу будет легче разобраться со структурой документа, если все заголовки будут размечены в соответствии с этой иерархией.
Если, например, на странице два главных заголовка или нарушена вложенность заголовков (внутри h4 вписаны не h5, а h3), то это может сказаться на ранжировании страницы.
Конспект
- Базовые понятия:
- тег и всё, что внутри него, называется элементом HTML-кода;
- метатеги содержат основную информацию для браузера и поисковых систем;
- с помощью атрибутов и их значений мы можем указать дополнительные условия для элементов кода, которые важны для SEO.
- Внутри тега <head></head> обращайте внимание на эти теги:
- <title> — основной SEO-заголовок веб-страницы;
- <meta> — метаданные, важные для поисковой выдачи;
- <link> — устанавливает связь текущей веб-страницы с другими веб-документами (страницы, стили, шрифты).
- Внутри блока <body></body> обращайте внимание на эти теги:
- иерархия заголовков от <h2> до <h6>;
- атрибуты тега <a> — тег ссылок;
- альтернативный текст тега <img>.
Справочник: полезные теги HTML и их атрибуты
Используйте эту справочную страницу для определения различных тегов HTML.
| Тег тела и атрибуты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ТЕЛО>. | Содержит просмотренную часть документа | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ТЕЛО bgcolor="color"> | Устанавливает цвет фона в шестнадцатеричном коде | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает изображение в качестве фона страницы (обои) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает цвет обычного текста в шестнадцатеричном коде | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Указывает цвет непросмотренных ссылок по умолчанию в шестнадцатеричном коде | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ТЕЛО alink="цвет"> | Указывает цвет ссылок при клике в шестнадцатеричном коде | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ТЕЛО vlink="цвет"> | Указывает цвет ссылок для перехода в шестнадцатеричном коде | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Тег шрифта и атрибуты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
. | Изменяет атрибуты шрифта для текста внутри тегов | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Устанавливает размер шрифта от 1 до 7, где 1 — самый маленький, а 7 — самый большой | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Устанавливает начертание шрифта | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Задает цвет шрифта с помощью шестнадцатеричного кода | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Тег изображения и атрибуты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Встраивает изображение в документ в месте расположения тега | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Добавляет изображение с текстовым описанием | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Выравнивает изображение по левому, правому краю, центру, нижнему или верхнему краю | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает размер рамки вокруг изображения | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает высоту изображения | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает ширину изображения | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает горизонтальное поле вокруг изображения | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает вертикальное поле вокруг изображения | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Назначает изображение картой изображения на стороне клиента | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Тег привязки и атрибуты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<А>. | Обозначает источник и место назначения гиперссылки | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Создает гиперссылку | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Ссылки на целевое местоположение на текущей странице | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Ссылки на целевое местоположение на странице за пределами вашего сайта | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Устанавливает целевое местоположение в документе | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Создает ссылку mailto | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Дополнительные атрибуты: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Указывает место размещения связанного документа | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
. | Устанавливает связь между документом, на который делается ссылка, и текущей страницей | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | Устанавливает обратную связь между текущей страницей и документом, на который есть ссылка | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Табличные теги и атрибуты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ТАБЛИЦА>... | Создает таблицу | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
.. 
.. 
.. 
..
..
.. 
.. 
Все, что вам нужно помнить, это то, что все теги с содержимым между ними должны быть закрыты в формате открывающий тег → контент → закрывающий тег. Строго говоря, это не всегда требование, но это соглашение, которое мы используем в этих руководствах, потому что это хорошая практика, которая приводит к более чистому и легкому для понимания коду.