Запрещённые атрибуты

Интернет и веб постоянно развиваются, а также развиваются сопутствующие им технологии. В языки программирования добавляются новые возможности, в браузеры добавляются новые опции и т.д. Вместе с вебом развиваются и HTML, CSS, Javascript. В HTML вводятся новые теги и атрибуты, в CSS новые свойства и функции, неиспользуемые теги и атрибуты объявляются устаревшими, запрещаются и т.д. Задача любого разработчика идти в ногу с современными технологиями, знать о последних разработках и об обновлениях стандартов. В данном уроке мы коснёмся запрещённых, выведенных, малоиспользуемых глобальных атрибутов HTML, которые по разным причинам попали в подобный список.

Условно такие атрибуты можно разделить на несколько групп:
— атрибуты обработчиков событий
— атрибуты, заменённые стилями CSS
— запрещённые атрибуты
— не рекомендуемые к использованию атрибуты

Атрибуты обработчиков событий

Этих атрибутов довольно много, мы приведём лишь несколько примеров: onclick, onmouseover, onkeydown, onplay. Полный список вы можете найти в справочнике на этой странице. Все они описывают браузерные события, в качестве значения принимают Javascript-код и исполняют его при срабатывании конкретного события. Следующий пример будет выводить в консоль сообщение при клике на кнопку:

                

                <button onclick="console.log('привет!')">Нажми на меня</button>

Имена таких атрибутов говорят сами за себя: они устанавливают подписку (on) на браузерное событие клика (click), или на событие движения мышью (mousemove), и т.д. Прочитав названия этих атрибутов, можно понять, что события бывают самые различные — фокус на элементе, прокрутка\скролл, запуск видео и многие другие. В урок по запрещённым атрибутам они, однако, попали не случайно: такая практика подписки на события, когда Javascipt-код определяется в HTML разметке, считается неудачной. В профессиональной разработке используется другой подход — разделение ответственности, при котором подписка на события определяется исключительно в Javascript-коде. Там же описываются и действия, что следует совершить при срабатывании этого события. По этой причине использование в коммерческой разработке вышеперечисленных атрибутов крайне не рекомендуется (конечно, и здесь есть исключения). Вы, тем не менее, можете применять их для тестирования каких-либо функций языка JavaScript, а также в целях обучения.

Атрибуты, заменённые стилями CSS

Это атрибуты, использование которых не рекомендуется по той же самой причине — из-за соблюдения принципа разделения ответственности. Как JavaScript не должен пересекаться в коде с HTML, так же и HTML не должен мешать CSS. Поэтому изменение внешнего вида документа средствами HTML считается дурным тоном и повсеместно осуждается. Чтобы облегчить вам на первое время понимание принципа разделения ответственности, можно сформулировать простое объяснение: HTML это сами данные, CSS это их внешний вид, а JavaScript это их интерактивное поведение. К атрибутам, которые изменяют внешний вид элементов, мы можем отнести следующие:

hidden, style, bgcolor, text, background, border, color, width, height.

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

hidden
— булевый атрибут, определяющий, следует ли скрывать данный тег. Элемент со значением true не будет отрисовываться, однако всё ещё будет присутствовать в html разметке веб страницы.

                

                <p hidden>Данный параграф не будет отображён на веб странице, потому что он обладает атрибутом, скрывающим его.</p>

Используйте для скрытия элементов CSS-свойство display: none.

style
— атрибут, содержащий правила CSS свойств. Указанные свойства применяются только к текущему тегу и не затрагивают остальные. Синтаксис аналогичный описанию правил стилей в файлах css:

                

                <p style="background: #f2f2f2;border: 2px solid #b9adad;margin: 15px; line-height: 1.5; text-align: center;">
        Это текст на сером фоне, выделенный рамкой</p>

Правила стилей, указанные таким образом, называются линейными, или «инлайновыми» (inline styles). Данный атрибут не должен использоваться в коммерческой разработке опять же ввиду соблюдения правила разделения ответственности. Он, однако, широко используется разработчиками в ходе обучения. Любой код, содержащий инлайновые стили, является невалидным!

bgcolor
— определяет фоновый цвет элемента. Может применяться к тегу <body>, а также к табличным тегам <col>, <colgroup>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>. Указывается в любом цветовом формате — RGBA, HEX, HSLA, в виде ключевого слова:

                

                <body bgcolor="hsla(298, 100%, 24%, 0.5)">
    <p>Небольшой текстовый абзац...</p>
</body>

                

                <body bgcolor="red">
    <p>Небольшой текстовый абзац...</p>
</body>

Подробно о форматах цветов будет рассказано в уроках по CSS. Вместо этого атрибута используйте CSS-свойство: background-color.

background
— определяет фоновое изображение элемента. Может применяться к тегам <body>, <table>, <td>, <th>. Значением является адрес картинки относительно текущего файла:

                

                <body background="mountains.jpg">
    <p>Небольшой текстовый абзац...</p>
</body>

Вместо данного атрибута применяйте CSS-свойство: background-image.

text
— определяет цвет текста внутри элемента <body>. В качестве значения принимает любой цветовой формат, подобно атрибуту bgcolor.

                

                <body text="#ff0000">
    <p>Небольшой текстовый абзац...</p>
</body>

Вместо данного атрибута применяйте CSS-свойство: color.

border
— определяет ширину, стиль и цвет рамки элемента. Применяется к тегам <img>, <object>, <table>.

                

                <img border="1px solid red" src="mountains.jpg" alt="Прекрасный горный пейзаж">

Вместо данного атрибута применяйте CSS-свойство: border.

color
— определяет цвет текста внутри элемента. Может применяться к тегам <basefont>, <font>, <hr>. Не используется по двум причинам: 1) для указания цвета шрифта есть аналогичное одноимённое CSS-свойство, 2) вышеуказанные теги <basefont> и <font> устарели и официально запрещены, тег <hr>, который рисует горизонтальную разделительную линию, мы также настоятельно рекомендуем не использовать, а использовать вместо него тег div с соответствующим классом и стилизовать его при помощи CSS:

                

                <div class="separator"></div>

width, height
— определяют ширину и высоту интерактивных тегов <canvas>, <embed>, <iframe>, <img>, <object>, <video>, а также в одном случае <input>. Указывается число, единицы измерения — пиксели.

                

                <canvas width="400" height="300"></canvas>

Не указывайте ширину и высоту элементов данными атрибутами, используйте соответствующие CSS-свойства width и height.

Запрещённые атрибуты

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

Не рекомендуемые к использованию

— среди глобальных атрибутов к таковым мы можем отнести лишь несколько, однако в дальнейшем, когда вы будете изучать теги по разделам, вы будете сталкиваться с индивидуальными атрибутами тегов, которые тоже рекомендуется не использовать. Почему они не рекомендуются? По разным причинам, например — нет единой спецификации для атрибута, нет достаточной браузерной поддержки и т.д.

accesskey
— данный атрибут отвечает за навигацию по тегам на веб странице при помощи сочетания клавиш. Например, при помощи следующего кода мы можем получить фокус на кнопке, использовав сочетание клавиш Alt + S (для браузера Google Chrome):

                

                <button accesskey="s">Сфокусируйся на мне!</button>

Это может быть довольно удобным, однако есть несколько вещей, препятствующих использованию этого функционала:
— не существует стандартизированного способа уведомлений пользователя о наличии таких сочетаний. Пользователи не смотрят в код веб страницы, тем более они не знают HTML и атрибуты. Чтобы они могли пользоваться такими сочетаниями, мы должны явно рассказать им об этом, например, в всплывающем сообщении. Польза от использования таких сочетаний клавиш очевидно не перевешивает тех усилий, что должен приложить разработчик для создания таких уведомлений
— сочетания горячих клавиш, определённые таким способом, могут конфликтовать с комбинациями клавиш системы, браузера или других приложений
— символы, определённые нами в качестве горячих клавиш, могут отсутствовать у пользователей с различными раскладками клавиатуры. Так, у пользователя из Германии не будет кириллических символов, а у пользователя из России не будет умлаутов (ä,ö,ü).

draggable + dropzone
— данные атрибуты определяют, является ли элемент перетаскиваемым при помощи мыши, а также результат этого действия — будет ли исходный элемент перемещён, либо будет создана его копия, либо будет создана ссылка на него. Подобный функционал, который относится к отдельному интерфейсу браузера, называемому HTML Drag and Drop API, в настоящее время не имеет достаточной браузерной поддержки, а потому не должен использоваться. Почитать для расширения кругозора об этом вы можете на странице справочника MDN. В настоящее время функционал перетаскивания элементов (Drag and Drop) реализуется при помощи JavaScript.

Проверять поддержку браузерами определённых тегов, атрибутов и CSS свойств удобнее всего в специальном бесплатном сервисе для разработчиков caniuse.com. Введите в поисковую строку там имя какого-либо HTML тега или атрибута, чтобы получить информацию по различным браузерам. Сохраните ссылку на этот сервис, в дальнейшем вы будете пользоваться им ежедневно!