search: новый HTML-элемент в 2023
- 12 мая 2023
В стандарте HTML появился новый семантический элемент <search>. Он обозначает раздел страницы, который используется для поиска или фильтрации. Он должен содержать элементы управления формой (например, текстовые поля, выпадающие меню, кнопки и так далее), а область поиска или фильтрации может быть любой: от одного документа до всего интернета.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Как это работает
До появления элемента мы добавляли role="search" к тегу, чтобы указать, что форма предназначена для поиска.
<form role="search" method="get" action="/search">
<input type="search" name="search-text" />
<button>Search</button>
</form>
Теперь мы можем использовать тег <search>, чтобы обернуть им форму:
<search>
<form method="get" action="/search">
<input type="search" name="search-text" />
<button>Search</button>
</form>
</search>
К сожалению, поскольку <search> недавно вошел в стандарт, может пройти некоторое время, прежде чем все браузеры, программы для чтения с экрана и другие инструменты смогут его использовать. Тем временем, мы можем использовать хак, указывающий ARIA-роль, которую он уже имеет изначально (подобно тому, как это произошло с <nav>)
Это станет ненужным в будущем, но сейчас может подготовить наш код к моменту, когда браузеры начнут поддерживать новый тег:
<search role="search">
...
</search>
Может показаться нелогичным: мы убираем role="search", но оборачиваем все тегом <search>. В целом, получается больше кода (но всего на три символа) и больше вложенности (на один уровень больше). Это не должно стать проблемой, но я уверен, что некоторые разработчики будут жаловаться на это.
👉 Обратите внимание: хотя нам не нужен тег для создания компонента поиска, его наличие очень полезно (и даже необходимо), чтобы поиск работал даже без JavaScript или в соответствии со стратегией прогрессивного улучшения.
Ещё один важный момент: область поиска не обязательно должна представлять собой текстовый ввод с кнопкой для поиска на сайте или в Интернете. Можно использовать <search> для фильтрации результатов или строк таблицы. Его применение выходит за рамки простого ввода текста и полей для поиска:
<search>
<h2>Фильтрация результатов</h2>
<form>
<label for="cartype">Класс автомобиля</label>
<select id="cartype">
<option value="coupe">Купе</option>
<option value="sedan">Седан</option>
</select>
<label for="electric">Электрический?</label>
<input type="checkbox" id="electric" />
</form>
</search>
Мнение
Иметь элемент для обозначения поиска — здорово. Как отмечает Скотт О’Хара, это была единственная знаковая роль ARIA, которая до сих пор не имела семантического эквивалента в HTML. Смотрите:
✅ banner → <header>
complementary → <aside>
contentinfo → <footer>
form → <form>
main → <main>
navigation → <nav>
region → <section> (с доступным именем)
search →???
С использованием <search> для идентификации раздела, который должен иметь роль search, все роли ARIA будут покрыты семантическими элементами HTML. Это улучшит доступность (хотя, как сказано выше, пройдет некоторое время, прежде чем поддержка появится во всех браузерах), и расширит семантику языка
Но с точки зрения программиста кажется, что <search> мало что добавляет к существующей реализации. Другие семантические элементы могут повысить доступность и упростить разработку конкретных компонентов. Например, по моему искреннему мнению, что-то вроде <tabpanel> или <tab> было бы гораздо более полезным и важным.
Но всё это не отменяет важности тега <search>. Все улучшения — даже незначительные — приветствуются. Так будет и с <search>. Отличное пополнение в семье HTML.
🧑💻 Больше HTML-тегов в справочнике от HTML Academy.
Материалы по теме
- Элемент
<form>— справочная статья о формах с примерами. - Шаблон формы на HTML — именно эти формы мы и будем оборачивать в
<search>. - Плейсхолдеры в полях формы вредны — почему оставлять поля без подписи это плохая идея.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
HTML-коды популярных эмодзи
Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!
| Эмодзи | Название | HTML-код |
|---|---|---|
| 😀 | Улыбающееся лицо | 😀 |
| 😂 | Лицо со слезами радости | 😂 |
| 😍 | Лицо с глазами в форме сердца | 😍 |
| 😎 | Лицо в солнцезащитных очках | 😎 |
| 😭 | Плачущий | 😭 |
| 😊 | Смущённая улыбка | 😊 |
| 😢 | Грустное лицо | 😢 |
| 😅 | Лицо с каплей пота | 😅 |
| 🤔 | Задумчивое лицо | 🤔 |
| 👍 | Большой палец вверх | 👍 |
| 👎 | Большой палец вниз | 👎 |
| 👏 | Аплодисменты | 👏 |
| 🙏 | Сложенные руки | 🙏 |
| ❤ | Красное сердце | ❤ |
| 💔 | Разбитое сердце | 💔 |
| 🔥 | Огонь | 🔥 |
| 💯 | Сто баллов | 💯 |
| 🎉 | Конфетти | 🎉 |
| 🎂 | Торт | 🎂 |
| 🌟 | Звезда | 🌟 |
| ✨ | Сияние | ✨ |
| 🌈 | Радуга | 🌈 |
| ☀ | Солнце | ☀ |
| ☁ | Облако | ☁ |
| 🌧 | Дождь | 🌧 |
| ❄ | Снег | ❄ |
| 🌍 | Земной шар | 🌍 |
| 💡 | Лампочка | 💡 |
| 💤 | Сон | 💤 |
| 🎵 | Нота | 🎵 |
| 🎶 | Музыка | 🎶 |
| 📱 | Телефон | 📱 |
| 💻 | Ноутбук | 💻 |
| 🚗 | Машина | 🚗 |
| 🚀 | Ракета | 🚀 |
| ✈ | Самолёт | ✈ |
| 🚲 | Велосипед | 🚲 |
| 🐶 | Собака | 🐶 |
| 🐱 | Кошка | 🐱 |
| 🐭 | Мышь | 🐭 |
| 🦊 | Лиса | 🦊 |
| 🐻 | Медведь | 🐻 |
| 🍎 | Яблоко | 🍎 |
| 🍕 | Пицца | 🍕 |
| 🍔 | Бургер | 🍔 |
| 🍩 | Пончик | 🍩 |
| 🍉 | Арбуз | 🍉 |
- 15 ноября 2024
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>, <cite> и <q>. Давайте разберёмся в их различиях.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023