что такое универсальные атрибуты
Атрибуты элементов
Чтобы расширить возможности отдельных элементов применяются атрибуты. Есть два типа атрибутов: атрибут со значением и логический атрибут, у которого нет значения. Атрибуты пишутся внутри открывающего тега, несколько атрибутов перечисляются через пробел, порядок их значения не имеет.
Атрибут со значением
Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:
Здесь буквой E обозначается название произвольного элемента. Для самозакрывающих элементов всё будет аналогично, кроме содержимого и закрывающего тега.
Вместо двойных кавычек («значение») можно писать одинарные кавычки (‘значение’) или вообще опустить кавычки (значение). Однако хорошим тоном будет всегда писать значения атрибутов в кавычках, потому что их отсутствие может привести к неявным ошибкам. Приведём небольшой пример.
В данном примере первая строка написана правильно со всеми кавычками, а в следующей строке у атрибута alt кавычки отсутствуют. Поскольку пробел отделяет один атрибут от другого, то браузер в качестве значения alt возьмёт только первое слово («Вид»), а слово «заголовка» будет воспринимать как новый атрибут. Но так как подобного атрибута не существует, то это приведёт к ошибке.
Каждый атрибут должен быть единственным и не должен повторяться ( alt писать можно, alt alt нельзя).
В примере 1 показано добавление картинки на страницу с помощью элемента с разными атрибутами.
Пример 1. Использование атрибутов
Логические атрибуты
У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:
В примере 2 показано применение логического атрибута для аудиоплеера.
Пример 2. Использование логического атрибута
Логические атрибуты допустимо записывать в трёх видах: без значения, с пустым значением и значением, совпадающим с именем атрибута. Все варианты равнозначны, но желательно придерживаться одной выбранной формы записи.
Порядок атрибутов
Порядок атрибутов в элементе не имеет значения и на результат отображения элемента не влияет. Также допустим перенос атрибутов на другую строку. Следующие записи по своему действию равноценны.
Универсальные атрибуты
Что такое атрибуты данных?
Что такое атрибуты?
HTML-элементы могут иметь атрибуты, которые используются для различных целей: размещения информации, указания типа элемента, его стилей и т.д.
Не рекомендуется создавать собственные атрибуты или применять существующие для несвязанных функций.
Из-за этого снижается валидность кода.
Синтаксис
Пользовательские атрибуты HTML позволяют размещать в них свою собственную информацию. Вот пример:
Атрибуты данных часто называют дата-атрибутами, так как в их названии используется слово data-*.
Можно ли использовать только атрибут data?
Это, скорее всего, не повлияет на работоспособность кода. Но вы не сможете использовать API JavaScript, о котором мы расскажем позже.
Чего нельзя делать с атрибутами данных?
Если контент должен быть виден на странице, помещайте его не только в атрибуты данных, но и в содержимое блоков.
Стилизация с помощью атрибутов данных
С помощью CSS можно выбирать HTML-элементы на основе атрибутов и их значений.
При использовании атрибутов data-* вы получаете возможность использовать логику «включено/выключено», а также выбирать элементы на основе значения атрибута.
Специфика выбора атрибутов
Мы часто рассматриваем специфику применения стилей, как значение из четырех частей:
встроенные стили, идентификаторы, классы/атрибуты, теги.
Таким образом, селектор только атрибута выглядит как 0, 0, 1, 0. Приведенный ниже селектор:
… выглядит как 0, 0, 2, 1.
2, потому что имеется один класс (.card) и один атрибут ([data-foo=»bar»]). 1 – потому что есть один тег (div).
Значения атрибутов без учета регистра
Если необходимо исправить несоответствия регистра в атрибутах данных, в селекторе атрибутов для этого есть вариант без учета регистра.
Это строчная буква i внутри скобок.
Использование атрибутов данных для визуализации
CSS позволяет извлечь значение атрибута данных и отобразить его.
Пример использования стиля
Вы можете использовать атрибуты данных, чтобы указать количество столбцов в сетке.
Доступ к атрибутам данных в JavaScript
Можно получить доступ к значению атрибута с помощью универсального метода getAttribute().
Но атрибуты данных также имеют собственный API. Допустим, что у вас есть элемент с несколькими атрибутами данных:
Если есть ссылка на этот элемент, вы можете устанавливать и получать такие атрибуты:
Обратите внимание на использование camelCase в последней строке. API автоматически преобразует атрибуты кебаб-стиля в HTML.
Он также предоставляет доступ к встроенным наборам данных:
JSON внутри атрибутов данных
А почему бы и нет? Это просто строка, и ее можно отформатировать как допустимый формат JSON. Вы можете восстановить эти данные и при необходимости проанализировать их.
Сценарии использования JavaScript
Можно использовать атрибуты данных для помещения в HTML-код информации, которая может понадобиться JavaScript для выполнения определенных задач.
Допустим, что у вас есть кнопка «Мне нравится»:
У этой кнопки есть обработчик клика. Он выполняет Ajax-запрос к серверу, чтобы при клике увеличить количество лайков в базе данных. Он знает, какую запись обновлять, поскольку получает ее из атрибута данных.
Поддержка браузерами
Число указывает на то, что браузер поддерживает функцию, начиная с этой версии.
Десктопные
Мобильные
Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!
Что такое атрибуты тегов html и как ими пользоваться?
И снова я всех приветствую, мои дорогие друзья. Спешу поделиться с вами радостной новостью! С сегодняшнего дня я в отпуске до 1 июля. В общем круто, теперь можно пару недель передохнуть, хотя и отдыхать особо некогда. Ну да ладно. У нас с вами другие задачи. Нам нужно изучать дальше основы сайтостроения.
В прошлой статье я вам рассказывал про теги в html, как ими пользоваться и т.д. А сегодня я вам расскажу о еще одной неотъемлемой части в сайтостроении, а именно про атрибуты тегов html. И конечно же по традиции мы рассмотрим их на живых примерах и испробуем это на нашем сайте с Лукоморьем, который мы заманьячили в прошлой статье.
Атрибут — это специальное дополнение к тегу, которое расширяет его возможности и может менять свойства содержимого. И если тег всегда фиксированный, то атрибут может иметь множество значений. Например, в теге мы можем поставить атрибуты цвета текста, его размера, шрифта и т.д. Но фонт мы подробнее рассмотрим в другой статье.
Различают универсальные и неуниверсальные атрибуты. Универсальные подходят практически для любых тегов, а неуниверсальные подходят для одного или нескольких, но далеко не для всех.
Атрибут записывается внутри тега после его значения, но до закрывающей угловой скобки. Сначала ставится сам атрибут, затем знак равенства, а потом само значение в кавычках. Выглядит это так:
Align
Как вы уже поняли, этот атрибут означает выравнивание текста. Ставится он обычно в тех тегах, которые отвечают за сам контент (текст, картинки и т.д.). В общем его можете ставить в заголовках (
), в абзацах (
Возможные значения атрибутов:
Попробуйте попрактиковаться и посмотрите как будет меняться расположение ваших элементов.
Title
Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег
Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.
Несколько значений
В одном теге может находиться сколько угодно атрибутов. Главное, чтобы они соответствовали данной метке. Вот вам пример:
Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?
Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.
Живой пример
Если у вас нету выполненного файла из предыдущего занятия, то возьмите его здесь и проставьте все нужные атрибуты, чтобы получилось всё по заданию.
И по традиции в начале всё сделайте сами. А если не получится, то смотрите действия, которые я написал ниже.
После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.
Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег
Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.
Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс » HTML5 и CSS3 с нуля до профи «. Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.
Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!
Урок 2. HTML: Понятие, стандарты, тэги и атрибуты
HTML (HyperText Markup Language) – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
Теги способны нести как структурный смысл (например, показать, что перед нами таблица некоторой размерности с заголовком), так и семантический (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).
Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML ), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей.
В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера).
До этого 17 лет главенствующим стандартом являлся HTML 4 (с 1997 года). Он встречается и сегодня на ряде сайтов. Определить его можно на основании так называемого доктайпа.
) разработчик вполне может написать по своему усмотрению:
Верстать код сайта на основании стандарта XHTML не обязательно, так как HTML5 и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).
Охарактеризуем специфику HTML5 :
– добавлены семантические элементы (
Основное меню сайта заключают в тег nav. Содержит ссылки на разделы сервиса;
11. Некий блок сайта
Отдельный раздел документа, не обязательно независимый. Представляет некую тему с содержимым, которые требуется выделить в изолированный блок;
12.
Позволяет браузеру и поисковым системам понять, что заключенные в тег данные представляют собой дату. Например:
HTML-теги, без которых в SEO никуда
Мы привыкли, что большинство манипуляций с HTML-кодом выполняет программист. Так и должно быть. Но это ни в коем случае не освобождает сеошника от необходимости знать базовые HTML-теги. Как минимум — для правильной постановки ТЗ, а как максимум — для понимания, как теги влияют на SEO.
Какие теги и атрибуты важны для продвижения, как их правильно оформлять и зачем они нужны? Мы прошлись по самым важным для сеошников и диджитал-маркетологов тегам и составили список, чтобы вы могли освежить свои знания или же разобраться в основах HTML с нуля.
База — коротко о важном
HTML-код — это язык, с помощью которого страница сообщает браузеру, какие элементы она содержит, и что нужно выводить на экран.
HTML — это основа большинства веб-страниц и одна из важнейших частей технического SEO. С помощью элементов HTML SEO-специалисты могут предоставлять информацию о страницах как пользователям, так и краулерам. Таким образом, можно понять, какая структура страницы и порядок ее содержимого, а также как одна страница связана с другими.
Простыми словами, если зайти на страницу сайта, вы увидите сверстанный текст, с разделами и подзаголовками, картинками и ссылками. Но для браузера и поисковых систем такая страница представляет собой просто строки HTML-кода с определенными элементами.
Мы уже затронули термины «элемент HTML» и «тег», но есть также метатеги и атрибуты. Вы легко можете запутаться, если не знаете, в чем разница.
Поэтому давайте разберем основные термины, которые мы будем часто использовать в этой статье.
Структура элемента HTML
HTML-код состоит из элементов, каждый из которых может быть тегом или метатегом. Если у него есть дополнительные характеристики, это атрибуты.
В данном случае это заголовок, который обозначается в коде с помощью открывающего тега
Тег — это элемент языка HTML. С его помощью разграничивают начало и конец каждого элемента. Теги определяют, как браузеры форматируют и отображают содержимое страницы. Например, если мы хотим подчеркнуть текст на странице, используется тег . Теги могут быть парными, один из них открывающий, а другой — закрывающий (например, …), или одиночными (например,
или ).
Метатег — это разновидность тега. С его помощью поисковики и браузеры получают техническую информацию о странице сайта — описание страницы, ключевые слова, кодировку документа, правила индексирования для поисковиков и другие. Все метатеги должны находиться в теге документа. Интересно, что description и keywords являются метатегами, а title — тегом.
Атрибут — дополнительная характеристика тега или метатега. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента.
Например, ранее мы говорили о теге, который добавляет на страницу картинку. А вот его атрибут alt задает альтернативный текст для изображения в случае, если оно не будет отображаться.
Чем теги отличаются от атрибутов
Многие не видят разницы между терминами «тег» и «атрибут». Но отличия есть. Давайте разбираться с терминологией.
Вот пример элемента HTML, в котором можно выделить три части:
открывает тег, «Добро пожаловать в мой блог о SEO» — это содержание тега, а
Элемент HTML в приведенном выше примере — это видимый заголовок на странице блога. Теперь давайте проведем различие.Если теги должны иметь начальный и конечный элементы для правильного функционирования, то атрибуты нет — они добавляются к элементам HTML как модификаторы, например:
Обратите внимание, что существуют также пустые элементы, такие как
, у которых нет содержания или закрывающего тега.
Зачем теги поисковикам и юзерам
Что такое теги и атрибуты понятно, но зачем они нужны поисковым системам, браузерам и юзерам? Поисковики используют теги, чтобы получить информацию о содержимом страницы и включить ее в результаты поиска.
Прямое тому подтверждение — сниппет в выдаче, который обычно формируется с помощью тега title и метатега description. Но если заголовок и описание страницы будут составлены некорректно (не отвечают действительности, переспамлены ключами и т. д.), Google и Яндекс заменят их на более подходящие, взятые из разметки и содержания страницы.
В справках Search Console и Вебмастера указаны списки метатегов, которые поддерживает Google и Яндекс соответственно. Обязательно ознакомьтесь с ними, если хотите узнать больше о каждом HTML-теге.
Теги помогают браузеру считывать информацию о странице. Благодаря этому текст, картинки и ссылки на наших мониторах отображаются именно так, как указано в HTML-коде. Сложно представить, если бы нам приходилось «вылавливать» текст на сайте из кода.
Теперь, когда мы разобрались с основными понятиями HTML, давайте перейдем к самому интересному: тегам и атрибутам, которые важны для поисковой оптимизации.
3 основных HTML-тега
Если вы хотите создать страницу, которая будет полезна людям и, что более важно в контексте этой статьи, поисковикам, вы должны добавить в код три ключевых HTML-тега.
Тег указывает, что страница является веб-страницей
Тег — это самый первый тег, который вы должны добавить в код своей страницы. Он указывает поисковым системам, что данная страница — это веб-страница.
Хоть сам по себе не является HTML-тегом (поэтому у него нет никаких атрибутов), он предоставляет браузерам очень важную информацию, которая позволяет узнать, согласно какому стандарту нужно отображать страницу.
Вот как используют тег в коде:
Таким образом, браузер поймет, что страница создана на HTML. И у него точно не возникнет проблем с обработкой кода и верным отображением страницы.
Тег содержит метаданные страницы
Тег представляет самый первый раздел страницы и содержит информацию, которая не отображается напрямую на странице в браузере.
Важно: внутри тега размещаются одни из ключевых SEO-тегов.
Элемент находится между тегами и и служит контейнером для метаданных. Как правило, метаданные определяют заголовок документа, его набор символов, стили, скрипты и т. д.
Нет смысла показывать вам, как этот код будет выглядеть в действии, потому что нет никакого контекста. Поэтому вот пример того, как мы использовали тег script, чтобы добавить виджет HelpCrunch на наш сайт:
Прежде чем мы перейдем к особенностям обработки JavaScript поисковиками, ознакомьтесь с таблицей ниже. Она даст представление о том, как можно использовать внешние скрипты на своих страницах и какие атрибуты вам в этом помогут.