Получить профессию в Skypro
Скрытые возможности HTML: недооцененные и актуальные элементы
Быстрый ответ
Для эффективного управления динамическим содержимым HTML применяйте тег <template>. Такой подход позволяет создавать DOM-фрагменты, которые можно активизировать и использовать в реальном времени с помощью JavaScript:
<template id="user-card">
<!-- Шаблон карточки пользователя, не отображается на странице -->
<div class="card">Имя пользователя: <span class="name"></span></div>
</template>
<script>
const userCardTemplate = document.getElementById('user-card').content;
const newUserCard = userCardTemplate.cloneNode(true);
// Встречайте нового пользователя – Джона Доу
newUserCard.querySelector('.name').innerText = 'John Doe';
document.body.appendChild(newUserCard);
</script>Так построенный подход повышает производительность страницы, позволяя отложить рендеринг и контролировать структуру HTML-разметки.
Улучшаем формы с тегом label
Тег <label>, казалось бы, незаметный на первый взгляд, но может существенно улучшить взаимодействие с формой. Связав его с полем ввода через атрибут for, вы получите метку, упрощающую взаимодействие и повышающую доступность формы:
<!-- Кликнув по метке, сразу можно начать ввод данных в поле -->
<label for="username">Имя пользователя:</label>
<input type="text" name="username" id="username">Теперь, кликнув по метке, пользователь автоматически активирует поле для ввода данных.
Делаем HTML-элементы редактируемыми с помощью contentEditable
Атрибут contentEditable позволяет сделать практически любой HTML-элемент редактируемым. Ваш документ с его помощью может превратиться в WYSIWYG-редактор:
<div contentEditable="true">
<!-- Это ваша личная площадка для редактирования -->
Отныне я редактируемый, и это правда!
</div>Теперь редактировать содержимое прямо в браузере стало ещё проще. Вы можете посмотреть интерактивные примеры, например, демонстрацию редактируемой таблицы на w3schools.
Структурируем выпадающие списки с помощью optgroup
С помощью <optgroup> внутри <select> можно упорядочить длинные выпадающие списки:
<!-- Справочники становятся более наглядными благодаря правильному разделению списков -->
<select name="car">
<optgroup label="Немецкие автомобили">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Японские автомобили">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select>Такая группировка пунктов списка повышает его читаемость и упрощает взаимодействие для пользователя.
Безопасная навигация благодаря тегу base
Тег <base> задаёт базовый URL для всех относительных ссылок в документе:
<head>
<!-- Введите базовый адрес только один раз, и все ссылки будут наследовать его -->
<base href="https://www.example.com/">
</head>Так, все относительные URL автоматически будут рассчитываться от заданного базового адреса, что необходимо учесть, чтобы избежать непредвиденных переходов.
Использование протокол-нейтральных URL для загрузки ресурсов
Чтобы ресурсы были доступны независимо от протокола, будь то HTTP или HTTPS, используйте протокол-нейтральные URL, начинающиеся с //:
<!-- Ресурсы загружаются по текущему протоколу, независимо от того, какой это протокол -->
<img src="//domain.example/img/logo.png" alt="Логотип">Это помогает избежать проблем со смешанным содержимым, однако обратите внимание на ограниченную поддержку в некоторых старых браузерах.
Визуализация
Взгляните на HTML как на айсберг:
[🌊 Видимый HTML 🌊]
/\
/ \
/ \
/ HTML \
/________\
[\ /]
[ \ / ]
[__\Скрытый/__]
[__ Возможности __]Над водой находятся привычные всем теги, такие как <h1>, <p> и <a>. А вот в глубинах хранятся:
data-*атрибуты для хранения пользовательских данных<template>тег для создания HTML-шаблонов- ARIA-роли для обеспечения доступности сайта
HTML обладает куда большими возможностями, чем может показаться на первый взгляд!
Если вы готовы погрузиться вглубь, то о снаряжении для дайвинга заботиться не придётся. 🤿
Использование data-* атрибутов для пользовательских данных
data-* атрибуты предоставляют возможность прикрепить пользовательские данные к HTML-элементам. Это становится особенно эффективным, когда требуется хранить данные непосредственно в HTML-разметке:
<div data-pet-type="dog" data-pet-name="Max">
<!-- Макс – не просто какой-то пес, он – настоящий друг -->
...
</div>Атрибуты data-* позволяют контролировать ваши данные прямо в HTML.
Адаптивность благодаря ARIA-ролям
ARIA-роли не являются скрытыми элементами, но они крайне важны для создания доступного контента в сети. ARIA обеспечивает удобство взаимодействия всех пользователей, включая тех, кто использует специализированные технологии помощи:
<!-- Элементы управления, которые говорят сами за себя -->
<button aria-expanded="false" aria-controls="menu">Меню</button>
<div id="menu" role="menu">...</div>ARIA-роли, хоть и невидимы, выполняют очень важную функцию, обеспечивая доступность веб-страниц.
Сила семантических элементов
HTML5 предложил множество семантических элементов, таких как <article>, <section>, <nav> и <footer>. Они делают код более читаемым, понятным, повышают его SEO-дружелюбность и доступность:
<!-- Чистый и структурированный код повышает шансы на индексацию поисковиками и улучшает взаимодействие пользователей с сайтом -->
<article>
<h2>Заголовок блоговой статьи</h2>
<p>Опубликовано 4 апреля 2023 года</p>
<section>
<h3>Введение</h3>
<p>Добро пожаловать в моё заметку...</p>
</section>
</article>HTML5-элементы делают структуру вашего контента понятной как для пользователей, так и для поисковых систем.
Полезные материалы
- MDN Web Docs: Справочник по HTML Элементам – Комплексный справочник по элементам HTML.
- HTML Living Standard – WHATWG – Текущие спецификации по HTML.
- Атрибуты HTML – W3Schools – Руководство по правильному использованию атрибутов HTML.
- Полное руководство по атрибутам Data – CSS-Tricks – Объяснение и примеры использования атрибутов
Data-*. - W3C – ARIA в HTML – Практические рекомендации по созданию доступных веб-приложений с помощью ARIA ролей.
- Различия HTML5 с HTML4 – Обзор нововведений HTML5 по сравнению с HTML4.
- MDN Web Docs: Элемент Slot в веб-компонентах HTML – Подробная инструкция по использованию элемента
slotв HTML веб-компонентах.