html
Основы

Глобальные атрибуты

HTML
Основы

Обновлено

23.08.2023

Просмотров

432

Время прочтения

25 мин.

Сложность

В HTML очень много различных атрибутов. Настолько много, что запомнить их все, а также их значения разработчику не под силу. Тут же есть и хорошая новость: запоминать их нам и не нужно. Необходимо лишь понимание их работы, а посмотреть названия атрибутов и их значений всегда можно в справочнике.

Мы разделим атрибуты на две большие группы и будем изучать их именно таким образом. Первая группа это глобальные атрибуты, то есть те, которые подходят для всех HTML-элементов. Вторая группа это индивидуальные атрибуты, то есть те, которые мы можем указывать только для определённых тегов. В данном уроке мы расскажем о глобальных атрибутах, а про индивидуальные (ещё их называют собственными) пойдёт речь в уроках, рассказывающих о конкретных тегах.

Прежде чем начать изучать атрибуты, стоит сделать одно очень важное замечание. Значения атрибутов в HTML регистрозависимы, то есть Moscow и MOSCOW это два разных значения. Запомните и не забывайте об этом никогда, это вам пригодится уже при изучении форм в HTML, а ещё больше в дальнейшем при изучении JavaScript.

class
— это список разделённых пробелами классов (псевдонимов) элемента. Классы позволяют нам через CSS и Javascript обращаться к элементам и изменять стиль их отображения, содержимое и т.д. Классов у элемента может быть несколько, а точнее — сколько угодно. Ограничений нет, но нужно руководствоваться здравым смыслом. Большое количество классов может вас запутать. Пример, где элемент имеет два класса, product-card и unavailable_product:

                
<div class="product-card unavailable_product"> </div>

Согласно спецификации W3C имена классов должны обязательно начинаться с символа латинского алфавита (и только с него!), могут содержать цифры, символы дефиса (-), нижнего подчёркивания (_). Классы, в написании которых использованы прочие символы ($@%^& и т.д.), считаются не валидными и не будут работать надлежащим образом. CSS стили в таком случае не применятся, а Javascript код отобразит ошибку. Следующие классы будут валидными:

user_card
user-card
width50
width_50
w5_h20

А следующие нет:

50-width
50/width
calculated_%
currency-$

Отдельно напомним, что, поскольку классы являются обычными атрибутами, они регистрозависимы. Следующие два тега обладают разными классами:

                
<span class="welcome-text">Добро пожаловать!</span> <span class="Welcome-text">Добро пожаловать!</span>

Казалось бы, различия всего лишь в регистре символа, но для компьютера и браузера это разные строки и, соответственно, разные классы. Будьте внимательны!

contenteditable
— атрибут, указывающий на то, может ли пользователь редактировать элемент, например изменять текст в параграфе <p> и т.д. Это булев атрибут, т.е. уже одно его наличие означает подтверждение такой возможности. Может принимать значения true и false.

                
<p contenteditable>Привет, я текст, доступный для редактирования!</p> <p contenteditable="true">И я тоже!</p> <p contenteditable="false">А я нет...</p>

Возможность редактирования элемента данным способом не означает изменение исходного html файла или какой-либо информации на сервере. Фактически такая возможность редактирования никак не влияет на работу веб сайта, а является лишь «внешним» изменением. То есть пользователь может изменить что-то лишь в открытой у него вкладке браузера. Если он перезагрузит страницу, все внесённые им изменения на странице пропадут.

spellcheck
— атрибут указывает, должен ли браузер проверять правописание введённого пользователем текста. Этот атрибут может применяться только к полям ввода <input>,<textarea> и тегам, обладающим атрибутом contenteditable, т.е. тем, содержимое которых пользователь может редактировать.
Атрибут не является булевым! Принимать может значения true и false, соответственно проверять или не проверять правописание. Синтаксис и результат работы кода:

                
<input type="text" name="input-test" spellcheck="true"><br><br> <textarea name="test" spellcheck="false" id="" cols="30" rows="10"></textarea>

Как видите, при вводе текста браузер подсказывает нам красной волнистой линией, что мы совершили ошибку. В поле <textarea> ниже такой подсветки нет, потому что атрибут spellcheck="false".

Есть один нюанс, связанный с работой данного атрибута. Проверка правописания осуществляется только в том случае, если эта опция включена в браузере. Поскольку по умолчанию
она выключена и большинство пользователей попросту не знают о ней, атрибут spellcheck имеет очень маленькую эффективность. Более того, если опция проверки правописания всё-таки включена
в браузере, проверка в указанных тегах осуществляется даже без указания spellcheck="true", поэтому данный атрибут сам по себе довольно бесполезен.
Практически единственное, что мы, разработчики, можем сделать — это отключить проверку при помощи spellcheck="false".

id
— уникальный идентификатор элемента, позволяющий обращаться к нему по указателю <label>, ссылке <a>, в правилах CSS, а также при помощи JavaScript. Синтаксис указания идентификатора схож с синтаксисом указания атрибута class, за исключением того только, что идентификатор должен быть один, а значит пробелы в значении атрибута не должны использоваться.

                
<p id="main-quote"> Самый интересный параграф на странице! Обязательно прочтите! </p>

lang
— атрибут, помогающий браузеру определить язык, на котором написано текстовое содержимое тега. Этот атрибут важен для индексации сайта поисковыми роботами Google, Yandex и пр. и необходим в случае, если у вас на странице присутствует контент на нескольких языках. Особенно важен этот атрибут для встроенных в браузер систем автоматического перевода, или для установленных в браузер плагинов перевода. В первую очередь такие системы смотрят на данный атрибут при определении языка. Стандарты W3C советуют всегда прописывать этот атрибут для тега <html>, чтобы указать основной язык веб страницы. Контент страницы на других языках следует выделить аналогично с соответствующим значением.

Значение атрибута — символ языка по стандарту BCP47, может включать только язык, язык и систему написания, язык и подтег региона, или всё вместе. Понятнее станет на примере. Если вы хотите указать просто язык без указания системы письма и региона, достаточно 2-3 символов стандарта BCP47. Все значения доступны в таблице IETF BCP 47.

                
<!-- текст на английском --> <p lang="en">Shakespeare was the third of eight children, and the eldest surviving son.</p> <!-- текст на французском --> <p lang="fr">Sa date de naissance exacte est inconnue.</p> <!-- текст на китайском --> <p lang="ch">王明是学生。</p>

Для указания системы письма необходимо добавить к основному тегу 4 символа языка, начинающихся с заглавной буквы. Такие символы вы можете найти в таблице ISO 15924. Так, русский текст системы Брайля было бы правильным обозначить следующим образом:

                
<p lang="ru-Brai">&#10255; &#10263; &#10250; &#10298; &#10257; &#10270; &#10262;</p>

Для указания языкового региона отделите его двухсимвольный Alpha-2 код или трёхзначный числовой код дефисом:

                
<!-- британский английский --> <p lang="en-GB">Have you done your homework yet?</p> <!-- американский английский --> <p lang="en-US">Did you do your homework yet?</p> <!-- австрийский немецкий --> <p lang="de-040">Ich bin gestanden.</p>

Таблицу со всеми регионами и их символьными и числовыми кодами вы можете найти по этой ссылке: ISO 3166-1

tabindex
— определяет, может ли элемент участвовать в последовательной навигации по странице при помощи клавиатуры (например с помощью клавиши TAB).
Значением может выступать целое число: отрицательное, положительное и 0. Когда вы осуществляете таким образом навигацию или кликаете на элементы, некоторые из них могут получать фокус, самый обычный пример это <input>:

Точно определённого перечня элементов, на которых можно фокусироваться, нет. Различные браузеры могут обладать различным поведением в подобных случаях. Однако большинство браузеров определяют следующие элементы: <button> (кнопки),<a> (ссылки), <input>, <textarea>, <select> (элементы пользовательского ввода), <audio>, <video>, <iframe> (интерактивные элементы). По умолчанию навигация осуществляется по этим элементам в том порядке, в каком они расположены в разметке html документа. Tabindex позволяет добавить\переопределить подобное поведение.

Положительное значение означает, что элемент может получить фокус, а также определяет его последовательность при навигации с клавиатуры. Так мы можем определить фокус для обыкновенного текстового параграфа:

                
<p tabindex="1">Обычный параграф с текстом, ничего примечательного, кроме того, что теперь он участвует во внутристраничной навигации.</p>

Теперь в случае, если пользователь будет осуществлять навигацию по странице, данный элемент первым получит фокус, даже если перед ним расположено нескольо <input> или других тегов. Элемент с tabindex="2" окажется следующим в фокусе. В случае, если несколько элементов имеют одинаковый индекс, порядок будет определён их положением в html документе.

Значение 0 — элемент может получить фокус, порядок навигации определяется последовательностью тегов в документе. Т.е. элемент не получает приоритета при навигации, как в случае с tabindex="1".

Любое отрицательное значение — элемент может быть выделен, однако не участвует в последовательной навигации.

title
— определяет текстовую всплывающую подсказку\дополнительную информацию для элемента. Данная подсказка является системной, т.е. её внешний вид определяется браузером и не может быть изменён при помощи CSS. Подсказка может быть многострочной:

                
<p title="Просто всплывающая подсказка">Обыкновенный текст в HTML документе.</p> <p title="Всплывающая подсказка&#10;на нескольких строках">Обыкновенный текст в HTML документе.</p>

Для переноса строки внутри подсказки вы можете просто «разорвать» значение атрибута title внутри html документа. Однако лучшим способом будет использование спецсимвола HTML: &#10; Во-первых, спецсимвол очевиднее, чем просто перенос строки, во-вторых, другой разработчик может удалить перенос строки в вашем коде, не придав ему значения, а вот удалять спецсимвол точно никто не будет, не разобравшись, зачем он там указан.

translate
— определяет, должно ли быть содержимое тега переведено при локализации страницы (например, когда мы используем опции Google Translate или другие расширения для браузера). Может принимать значения «yes» и «no», которые соответственно означают, следует ли переводить содержимое тега или нет. Поведение различных браузеров и расширений может отличаться, однако большая часть систем автоматических переводов воспринимают его правильно. Этот атрибут следует указывать как «no» для названия компании\бренда, слогана, междометий и пр.

                
<!-- не переводим название компании --> <header> <a href="/"> <img src="company-logo.png" alt=""> <span translate="no">Company Name</span> </a> </header> <!-- не переводим слоган Coca Cola 2005 --> <p class="slogan" translate="no"> Make It Real </p>

Это далеко не все глобальные атрибуты, которые существуют. Мы привели здесь список атрибутов, которые могут применяться ко всем тегам и в действительности применяются. Мы исключили из этого списка устаревшие, запрещённые атрибуты, а также некоторые другие, о которых пойдёт речь в других разделах.

Домашнее задание к уроку

Домашнее задание необходимо для проверки усвоенного материала. Скачайте оба файла. В первом находится задание для решения, а во втором готовый код для самопроверки

Необходимо очков: