HTML Атрибуты
Атрибуты предоставляют дополнительную информацию об элементах HTML.
HTML Атрибуты
- Все элементы HTML могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементе
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно входят в пары имя/значение, например: имя="значение"
Атрибут href
HTML ссылки определяются с помощью тега <a> . Адрес ссылки указывается в атрибуте href :
Пример
Подробнее о ссылках и теге <a> можно узнать в следующих разделах этого учебника.
Атрибут src
HTML изображения определяются с помощью тега <img> .
Имя файла источника изображения указывается в атрибуте src :
Пример
Атрибуты width (ширина) и height (высота)
HTML изображения также имеют атрибуты width (ширина) и height (высота), которые определяют ширину и высоту изображения:
Пример
Ширина и высота указываются в пикселях по умолчанию; поэтому width="500" означает ширину 500 пикселей.
Подробнее об изображениях вы узнаете в главе HTML Изображения.
Атрибут alt
Атрибут alt указывает альтернативный текст, который будет использоваться, если изображение не может быть отображено.
Значение атрибута alt может быть прочитано программами чтения с экрана (скринридерами). Таким образом, можно "прослушивать" веб-страницы, например, человек с нарушениями зрения может "слышать" элемент, т.е. будет знать, что изображено на картинке.
Пример
Атрибут alt также полезен, если изображение не может быть отображено (например, если оно не существует на сайте):
Пример
Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которое не существует:
Атрибут style
Атрибут style используется для указания стиля элемента, такого как цвет, шрифт, размер и т.д.
Пример
Вы узнаете больше о стилизации позже в этом учебнике, и в CSS Учебнике на этом сайте.
Атрибут lang
Язык документа может быть объявлен в теге <html> .
Язык объявляется с помощью атрибута lang .
Объявление языка важно для приложений с расширенными возможностями (средства чтения с экрана) и поисковых систем:
Первые две буквы указывают на язык (en). Если есть диалект, добавьте еще две буквы (US, т.е. США).
Атрибут title
Здесь атрибут title добавляется к элементу <p> . Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении мыши на абзац (параграф):
Пример
Использовать строчные атрибуты (в нижнем регистре)
Стандарт HTML5 не требует строчных имен атрибутов.
Атрибут title может быть написан в верхнем или нижнем регистре, например title или TITLE.
W3C рекомендует использовать нижний регистр в HTML и требует нижний регистр для более строгих типов документов, таких как XHTML.
В W3Schools всегда используют имена атрибутов в нижнем регистре.
Мы предлагаем: значения атрибутов брать в кавычки
Стандарт HTML5 не требует кавычек вокруг значений атрибутов.
Значение атрибута href , показанного выше, можно писать без кавычек:
Плохо
Хорошо
W3C рекомендует кавычки в HTML и требует кавычки для более строгих типов документов, например XHTML.
Иногда необходимо использовать кавычки. Этот пример не будет правильно отображать атрибут title, поскольку он содержит пробел:
Пример
Использование кавычек является наиболее распространенным при написании HTML-кода. Пропуск кавычек может привести к ошибкам. В W3Schools всегда используют кавычки вокруг значений атрибутов.
Одинарные или двойные кавычки?
Двойные кавычки вокруг значений атрибутов являются наиболее распространенными в HTML, но также можно использовать и одинарные кавычки.
В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:
Резюме раздела
- Все HTML элементы могут иметь атрибуты
- Атрибут title обеспечивает дополнительную информацию в виде "всплывающей подсказки"
- Атрибут href предоставляет адресную информацию для ссылок
- Атрибуты width и height предоставляют информацию о размере изображений
- Атрибут alt предоставляет текст для программ чтения с экрана
- В W3Schools всегда используют строчные (в нижнем регистре) значения атрибутов
- В W3Schools всегда значения атрибутов в кавычках
HTML Упражнения
HTML Атрибуты
Ниже приведен алфавитный список некоторых атрибутов, часто используемых в HTML, о которых вы узнаете больше в этом учебнике:
| Атрибут | Описание |
|---|---|
| alt | Определяет альтернативный текст для изображения, когда изображение не может быть отображено |
| disabled | Указывает, что входной элемент должен быть отключен |
| href | Указывает URL-адрес (веб-адрес) для ссылки |
| id | Указывает уникальный идентификатор элемента |
| src | Указывает URL-адрес (веб-адрес) изображения |
| style | Определяет встроенный CSS стиль для элемента |
| title | Определяет дополнительную информацию про элемент (отображается как всплывающая подсказка) |
Полный список всех атрибутов для каждого HTML элемента приведён в: HTML Справочнике атрибутов на нашем сайте W3Schools на русском.
Начало работы с HTML
В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
| Необходимые знания: | Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами. |
|---|---|
| Цель: | Познакомиться с языком HTML и научиться описывать некоторые его элементы. |
Что такое HTML?
HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:
Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» ( <p> ), например:
Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег <title> может быть записан как <title> , <TITLE> , <Title> , <TiTlE> , и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.
Структура HTML-элементов
Давайте рассмотрим элемент «параграф» чуть подробнее:
Основными частями элемента являются:
- Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
- Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
- Содержимое: Как видно, в нашем случае содержимым является простой текст.
- Элемент: открывающий тег + закрывающий тег + содержимое = элемент.
Активное изучение: создание вашего первого HTML-элемента
Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Вложенные элементы
Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент <strong> , который означает, что это слово крайне важно в данном контексте:
Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong , затем мы закрываем элемент strong первым, затем p . Следующее писать неправильно:
Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!
Блочные и строчные элементы
Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.
- Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
- Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong> .
Посмотрите на следующий пример:
<em> — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, <p> — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).
Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.
Пустые элементы
Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент <img> вставляет картинку на страницу в том самом месте, где он расположен:
Это выведет на вашу страницу следующее:
Примечание: Пустые элементы иногда называют void-элементами.
Атрибуты
У элементов также могут быть атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.
Атрибут должен иметь:
- Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
- Имя атрибута и следующий за ним знак равенства.
- Значение атрибута, заключённое в кавычки.
Активное изучение: Добавление атрибутов в элемент
Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:
В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href=»https://www.mozilla.org/» .
Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title=»The Mozilla homepage» . Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target=»_blank» отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.
Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a> затем атрибут href и атрибут title . Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title , а при щелчке переходит по адресу в атрибуте href . Помните, что между именем элемента и каждым из атрибутов должен быть пробел.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Булевые атрибуты
Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут disabled , который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.
Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
На выходе оба варианта будут выглядеть следующим образом:
Опускание кавычек вокруг значений атрибутов
Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:
Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:
В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage . Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!
Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.
Одинарные или двойные кавычки?
В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:
Поэтому вам нужно сделать так:
Структура HTML документа
Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
Вот что мы имеем:
- <!DOCTYPE html> : Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
- <html></html> : Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
- <head></head> : Элемент <head> . Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
- <meta charset=»utf-8″> : Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
- <title></title> : Элемент <title> . Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
- <body></body> : Элемент <body> . Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.
Активное изучение: Добавление элементов в ваш HTML-документ
Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:
- Скопировать пример HTML-страницы, расположенный выше.
- Создать новый файл в текстовом редакторе.
- Вставить код в ваш новый текстовый файл.
- Сохранить файл как index.html .
Примечание: вы также можете найти этот базовый пример HTML на MDN Learning Area Github repo.
Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:
Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body> . Попробуйте сделать следующее:
- Добавьте заголовок страницы сразу за открывающим тегом <body> . Текст должен находиться между открывающим тегом <h1> и закрывающим </h1> .
- Напишите в параграфе о чём-нибудь, что кажется вам интересным.
- Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>
- Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
- Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!
Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.
Пробелы в HTML
Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:
Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.
Ссылки на сущности: Включение специальных символов в HTML
В HTML символы < , > , » , ‘ и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.
Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).
| Буквенный символ | Символьный эквивалент |
|---|---|
| < | < |
| > | > |
| « | " |
| ‘ | ' |
| & | & |
В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:
В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент <p> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.
Примечание: Таблица всех доступных в HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.
HTML комментарии
В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.
Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!— и —> , например:
Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.
Подведение итогов
Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!
Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.
Как добавить атрибут в тег HTML
Язык HTML включает в себя ряд элементов. К ним относятся часто используемые компоненты сайта, такие как абзацы, заголовки, ссылки и изображения. Существует также ряд новых элементов, которые были введены в HTML5, включая заголовок, навигацию, нижний колонтитул и многое другое. Все эти элементы HTML используются для создания структуры документа и придания ему смысла. Чтобы добавить еще больше значения элементам, вы можете дать им атрибуты.
Базовый открывающий тег HTML начинается с символа <. Затем следует имя тега, и, наконец, вы заканчиваете тег символом>. Например, тег открывающего абзаца будет записан так: <p>
Чтобы добавить атрибут к вашему HTML-тегу , вы должны сначала поставить пробел после имени тега (в данном случае это «p»). Затем вы добавите имя атрибута, который вы хотите использовать, после которого следует знак равенства. Наконец, значение атрибута будет помещено в кавычки. Например:
Теги могут иметь несколько атрибутов. Вы должны отделить каждый атрибут от других пробелом.
Элементы с необходимыми атрибутами
Некоторые HTML-элементы действительно требуют атрибутов, если вы хотите, чтобы они работали как задумано. Элемент image и элемент link являются двумя примерами этого.
Элемент изображения требует атрибута «src». Этот атрибут сообщает браузеру, какое изображение вы хотите использовать в этом месте. Значением атрибута будет путь к файлу изображения. Например:
Вы заметите, что мы добавили еще один атрибут к этому элементу, «alt» или альтернативный текстовый атрибут. Технически это не обязательный атрибут для изображений, но рекомендуется всегда включать этот контент для доступности. Текст, указанный в значении атрибута alt, будет отображаться, если по какой-либо причине изображение не загружается .
Другим элементом, который требует определенных атрибутов, является тег привязки или ссылки. Этот элемент должен включать атрибут «href», который обозначает «гипертекстовая ссылка». Это причудливый способ сказать «куда должна идти эта ссылка». Так же, как элемент изображения должен знать, какое изображение загружать, тег ссылки должен знать, где это должно быть. Вот как может выглядеть тег ссылки:
Эта ссылка теперь приведет человека на сайт, указанный в значении атрибута. В данном случае это главная страница Dotdash.
Атрибуты как CSS-хуки
Другое использование атрибутов, когда они используются в качестве «хуков» для стилей CSS . Поскольку веб-стандарты требуют, чтобы структура страницы (HTML) была отделена от ее стилей (CSS), вы используете эти атрибуты в CSS, чтобы определить, как структурированная страница будет отображаться в веб-браузере. Например, у вас может быть эта часть разметки в вашем HTML-документе.
Если вы хотите, чтобы это деление имело черный цвет фона (# 000) и размер шрифта 1,5em, добавьте это в свой CSS:
Атрибут «featured» действует как ловушка, которую мы используем в CSS для применения стилей к этой области. Мы могли бы также использовать атрибут ID здесь, если мы хотим. И классы, и идентификаторы являются универсальными атрибутами, что означает, что они могут быть добавлены к любому элементу. Оба могут также быть нацелены с определенными стилями CSS, чтобы определить визуальный внешний вид этого элемента.
Что касается Javascript
Наконец, использование атрибутов в определенных элементах HTML также является тем, что вы можете использовать в Javascript. Если у вас есть скрипт, который ищет элемент с определенным атрибутом ID, это еще одно использование этого общего фрагмента языка HTML.
Can I add a custom attribute to an HTML tag?
Can I add a custom attribute to an HTML tag like the following?
18 Answers 18
You can add custom attributes to your elements at will. But that will make your document invalid.
In HTML 5 you will have the opportunity to use custom data attributes prefixed with data- .
You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:
#IMPLIED means it is an optional attribute, or you could use #REQUIRED , etc.
No, this will break validation.
In HTML 5 you can/will be able to add custom attributes. Something like this:
The jQuery data() function allows you to associate arbitrary data with DOM elements. Here’s an example.
In HTML5: yes: use the data- attribute.
Yes, you can do it!
Having the next HTML tag:
We can access their attributes with JavaScript :
Element.setAttribute() put the attribute in the HTML tag if not exist. So, you dont need to declare it in the HTML code if you are going to set it with JavaScript .
key : could be any name you desire for the attribute, while is not already used for the current tag. value : it’s always a string containing what you need.
Yes, you can, you did it in the question itself: <html myAttri=»myVal»/> .
You can set properties from JavaScript.
Here is the example:
Here is another example how to set custom attributes into body tag element:
Then read the attribute by:
You can test above code in Console in DevTools, e.g.
use data-any , I use them a lot
Yes, you can use data-* attribute. The data-* attribute is used to store custom data private to the page or application.
With custom elements, it is common to add custom attributes without data- prefix.
Here is an example from HTML standard: Custom elements (note the country attribute):
Another example from MDN Web Docs: Using custom elements (note the l and c attributes):
well! you can actually create a bunch of custom HTML attributes by disguising the data attributes in what you actually want.
It apparently works but that would invalidate your document, there is no need of using JScript for you to have custom attributes or even elements unless you have to, you just need to treat your new formulated(custom) attributes just the same way you treat your «data» attribute
Remember «invalid» does not mean anything. The document will load fine at all the time. and some browsers would actually validate your document only by the presence of DOCTYPE. you actually know what I mean.