Атрибуты HTML предоставляют дополнительные возможности для настройки поведения и внешнего вида элементов веб-страницы. Они указываются внутри открывающего тега элемента и позволяют модифицировать его свойства.
С помощью атрибутов можно управлять различными характеристиками элементов, включая цвет, размеры, положение и другие параметры отображения. Это обеспечивает точный контроль над визуальным представлением контента.
Правильное использование атрибутов является важным аспектом создания веб-страниц, которые сочетают эстетическую привлекательность с функциональностью и обеспечивают пользователям комфортный опыт взаимодействия.
Атрибуты HTML
Все HTML-элементы имеют атрибуты — модификаторы, которые либо определяют, как работает элемент, либо добавляют дополнительную функциональность. Они размещаются внутри начального тега.
Тег <img> — один из примеров HTML-тегов, которые можно изменять с помощью атрибутов. Тег <img> используется для вставки изображений и требует обязательного атрибута src, который указывает путь к изображению. Это обязательный атрибут, потому что без него браузер не сможет отобразить картинку.
С другой стороны, style — необязательный атрибут. Например, по умолчанию текст на странице отображается чёрным цветом. Но если добавить style=»color:red;» к тегу абзаца <p>, цвет текста изменится на красный.
Имя атрибута
Атрибут состоит из двух частей: имени и значения, разделённых знаком равенства (=).
Имя — это первая часть, которая указывает, о каком модификаторе идёт речь. Например, тег ссылки <a> имеет атрибут href, который указывает URL страницы, на которую ведёт ссылка. href расшифровывается как hypertext reference — «гипертекстовая ссылка», и он сообщает браузеру, что далее следует гиперссылка.
Значение атрибута
Значение атрибута — это вторая часть, которая идёт после знака равенства и заключается в кавычки. Значение указывает, что именно делает атрибут. В примере href=»/design.html» значением атрибута href является «/design.html» — это адрес ссылки, на которую браузер перенаправит пользователя при нажатии.
Вы могли заметить, что в этом примере ссылка не начинается с https://www — это потому, что страница, на которую ведёт ссылка, размещена внутри того же сайта.
Атрибут title
Атрибут title добавляет всплывающие подсказки (tooltips). Вы можете добавить этот атрибут к различным элементам: тексту, заголовкам, изображениям, ссылкам и т. д. Такие атрибуты называются глобальными.
Когда вы наводите курсор мыши на элемент с атрибутом title, появляется всплывающий текст с подсказкой. Хотя этот атрибут не обязателен, он позволяет при необходимости добавить дополнительную информацию.
Атрибут href
Как вы, вероятно, знаете, ссылки — это основа Интернета. Тег <a> определяет ссылку и требует атрибута href (hypertext reference), чтобы указать, куда эта ссылка ведёт.
Существует два типа ссылок: локальные и внешние. Локальные ссылки ведут на страницы внутри вашего сайта. Они указываются с помощью относительных URL-адресов, которые не содержат часть https://www. Главное преимущество локальных ссылок — они не перестают работать, даже если вы измените домен.
Внешние ссылки ведут на внешние сайты, например google.com, и требуют так называемых абсолютных URL — полных веб-адресов с https://www.
Атрибут src
Может ли Интернет существовать без картинок с котиками? Именно так было в его тёмные текстовые времена, но сейчас трудно представить себе веб-страницу без изображений.
Тег <img>, который позволяет вставлять (или, как говорят, встраивать) изображения на страницу, требует обязательного атрибута src (сокращение от source — источник). Он указывает путь к отображаемому изображению. Как и в случае со ссылками, вы можете использовать локальные изображения, хранящиеся на вашем сайте, или внешние из Интернета. В большинстве случаев лучше использовать локальные изображения, поскольку вы не контролируете, когда внешние изображения могут изменить свой URL или исчезнуть вовсе.
Атрибуты width и height
Атрибуты height и width сообщают браузеру точный размер изображения в пикселях (px) и ускоряют процесс загрузки.
Браузер сначала загружает текст, а затем файлы изображений. Если браузер знает размеры изображения, он может зарезервировать под него пространство при построении макета страницы. Если вы не укажете размеры изображения, макет страницы будет смещаться по мере загрузки — как вы, вероятно, догадываетесь, это сильно мешает пользователям, особенно если они уже начали читать статью. Ещё один минус — без указанных размеров браузеры могут растягивать или сжимать изображения как придётся.
Атрибут alt
Атрибут alt не является обязательным для тега <img>, но он очень важен. Он предоставляет альтернативный текст для изображения, если по какой-то причине картинка не загрузится.
Атрибут alt важен по нескольким причинам. Во-первых, он необходим для SEO, и его отсутствие приведёт к провалу теста валидации W3C. Во-вторых, это единственный способ для людей, использующих экранные читалки, понять, что изображено на картинке, которую они не могут увидеть.
Используйте этот атрибут всегда!
Атрибут style
Атрибут style помогает — вы угадали — стилизовать HTML-элементы. Это глобальный атрибут, то есть его можно применять ко многим HTML-элементам.
Атрибут style добавляет элементы другого языка — CSS. HTML задаёт структуру контента, а CSS описывает стиль, оформление, макет и т. д. Значение атрибута style — это часть, которая следует за знаком равенства и заключается в кавычки — имеет свою структуру.
Например, атрибут style=»color:red;» окрасит текст абзаца в красный цвет. Здесь color — это CSS-свойство, а red — его значение. Между ними ставится двоеточие, а после значения — точка с запятой.
Атрибут lang
Хотя его отсутствие не «сломает» вашу страницу, атрибут lang внутри тега <html> сообщает поисковым системам и браузерам, на каком языке написана страница, чтобы возвращать результаты, ориентированные на нужный язык.
Также вы можете указать страну, если язык имеет несколько вариантов. Для американского английского атрибут будет выглядеть так: lang=»en-US», где первые две буквы обозначают язык, а две после дефиса — страну.
Полный список кодов языков и стран можно найти на сайте W3Schools.
Добавление атрибута title
Атрибут title — это глобальный атрибут с довольно запутанным названием. Вместо того чтобы задавать заголовок, он предоставляет дополнительную информацию об элементе. Он отображается в виде всплывающей подсказки, когда пользователь наводит курсор мыши на элемент. Подсказки очень контекстны и конкретны. Добавляйте их к таким элементам, как иконки, текстовые ссылки, кнопки и т. д., чтобы дать больше информации об элементе.
Добавление атрибута href
Все ссылки должны иметь атрибут href — без него они не выполняют свою функцию. Тег <a> без атрибута href — это как дом без дверей и окон: построить можно, но смысла в этом мало.
Добавление атрибута src
Тег <img> обычно включает несколько атрибутов, таких как alt (альтернативный текст) и width/height (размеры изображения). Хотя отсутствие этих атрибутов не препятствует отображению изображения, это нарушает рекомендации по доступности и семантической разметке.
Атрибут src, указывающий путь к файлу изображения, является обязательным. Без него браузер не может определить источник загрузки графического контента, и изображение не будет
Установка языка страницы в теге <html>
Чтобы задать язык страницы по умолчанию, используйте атрибут lang внутри тега <html>. Если указать lang внутри тега <body>, он не будет распространяться на содержимое раздела head документа.
Также можно указывать язык для отдельных частей контента. Например, если у вас есть абзац на японском языке, используйте атрибут lang в теге этого абзаца, чтобы браузер корректно его отобразил.
Используйте атрибут alt для альтернативного текста
Атрибут alt предоставляет альтернативный текст, если браузер не может загрузить изображение. Он также позволяет поисковым системам индексировать контент, благодаря чему ваши изображения могут появляться в результатах поиска по ключевым словам из alt-текста.
Старайтесь, чтобы alt-текст был короче 125 символов, так как многие экранные читалки прекращают чтение после этого. Нет необходимости писать «изображение…» или «фотография…» — вспомогательные технологии сообщат об этом сами. Сразу переходите к описанию и будьте конкретны.
Укажите ширину и высоту изображения
Если вы хотите уменьшить размер или изменить пропорции изображения, использование атрибутов height и width — не лучший способ. В этом случае браузер всё равно загрузит оригинальный файл изображения и просто отобразит его в уменьшенном или растянутом виде. Это может исказить изображение и замедлить загрузку страницы. Вместо этого лучше предварительно изменить размер изображения и обрезать его в графическом редакторе перед загрузкой на сайт.
Используйте атрибут style
Вы можете изменять цвет шрифта, его размер и гарнитуру как для заголовков, так и для основного текста. В этом примере атрибут style находится внутри тега <h1>, что означает, что он влияет именно на заголовок, а не на текст страницы в целом.
Используйте правильный формат файла
При вставке изображения убедитесь, что ссылка ведёт к файлу в поддерживаемом формате. Наиболее распространённые форматы изображений, поддерживаемые HTML: APNG, AVIF, GIF, JPEG, PNG, SVG и WebP. Если ссылка ведёт к неподдерживаемому формату или к совершенно другому типу файла, например MP4 (для видео), браузеры не смогут его отобразить.
Используйте атрибут title для всплывающих подсказок
Атрибут title добавляет всплывающие подсказки при наведении курсора. Обычно они содержат дополнительную информацию об элементе. Помните, что такие подсказки, скорее всего, будут недоступны для пользователей сенсорных устройств, вспомогательных технологий и людей с когнитивными нарушениями. Используйте подсказки только при необходимости и только для несущественной информации, чтобы даже в случае их недоступности пользователь всё равно мог понять контент.
Используйте атрибут href для указания ссылки
По умолчанию браузеры подчёркивают ссылки, отображают непосещённые ссылки синим цветом, а посещённые — фиолетовым. Помните, что если в теге <a> отсутствует атрибут href, элемент не будет являться гиперссылкой. Кроме того, с помощью ссылок можно перенаправлять пользователей на адреса электронной почты вместо веб-страниц. Например, запись <a href=»mailto:email@gmail.com»>Отправить email</a> откроет почтовый клиент для отправки письма.