Как зарабатывать больше и получать удовольствие от работы?
Вебинар

HTML: использование 'name' или 'id' для создания якорей

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Основываясь на современных реалиях, рекомендуется использовать атрибут id вместо name при создании HTML-якорей. id позволяет уникально идентифицировать элементы на странице, что критически важно для стилизации с помощью CSS и работы в JavaScript. В спецификации HTML5 особо акцентировано применение id для обозначения якорей:

HTML
Скопировать код
<!-- Создание ссылки на раздел 'Советы' -->
<a href="#tips">Перейти к советам</a>

<!-- Создание якоря для этой ссылки -->
<div id="tips">Важная информация: вы находитесь в разделе советов!</div>

Атрибут name уже считается нежелательным для якорей, поэтому для соответствия стандартам чистого кода HTML5 выбирайте id.

Кинга Идем в IT: пошаговый план для смены профессии

Лучшие практики: Создание якорей с использованием 'id'

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

  • Используйте уникальные ID: Убедитесь, что каждый id уникален на странице, чтобы избежать конфликтов.
  • Сочетайте CSS и id: Используйте псевдокласс :target для стилизации элемента, идентифицируемого через id в URL.
  • Сокращайте код: Нет необходимости оборачивать элементы в теги <a> лишь ради возможности якорения. Отказывайтесь от лишних украшений!
  • Соблюдайте порядок в HTML: id можно и следует использовать непосредственно на элементах, таких как <h1> или <section>, для структурирования контента.

Советы от экспертов: Как профессионально использовать 'id'

Ознакомьтесь с этими рекомендациями по продвинутому использованию id:

  • Особенности id: Элементы с id становятся глобальными переменными в браузере, что обеспечивает ускоренный и упрощенный доступ.
  • Приоритет прозрачности: Не используйте name и id на одном и том же элементе, чтобы избежать путаницы в DOM.
  • Будьте в тренде HTML: Создавайте якоря с помощью id и оставайтесь в курсе развития технологии веб-разметки.

Визуализация

Представим ситуацию, в которой столкнутся name vs id за честь быть названным HTML-якорем:

Markdown
Скопировать код
Сравните это с вечеринкой в эксклюзивном особняке (🏠):

- 🏷️ Бейджи с 'name': Некогда популярные, но теперь они утратили свою былую значимость (и поддержку браузеров).
- 🆔 Карточки с 'id': Они являются нововведением, признанным и узнаваемым всеми современными браузерами.

Выбор id можно сравнить с выбором изысканного блюда, тогда как name более похож на недельный запас сухпайков:

Markdown
Скопировать код
🏠 -> 🚪 [Вход] -> 🎉 [Большой зал #id='disco-thunder']

name может иметь еще несколько сторонников, но:

Markdown
Скопировать код
🏠 -> 🚪 [Вход] -> 🛑 [Лифт не работает? #name='vertigo-madness']

Сделайте правильный выбор: id поможет вам избежать замешательства в темных коридорах пути.

Сравнение совместимости: 'id' против 'name'

При выборе между id и name крайне важно учитывать вопросы совместимости:

  • Браузеры прошлой эпохи: Древние браузеры (такие как Netscape 4) могли не поддерживать id. Однако сегодня id совместим со всеми браузерами.
  • Доступность: id способствуют улучшению работы скринридеров и ассистивных технологий, повышая доступность контента.
  • Привлекательность для поисковых систем: Грамотно использованные id формируют четкую структуру страницы, что положительно сказывается на SEO.

Полезные материалы

  1. HTML Standard — Руководство по использованию атрибута id в HTML.
  2. Ссылки в HTML документах — Подробная информация про свойства id и name.
  3. id – HTML — Справочник по id.
  4. <a>: Элемент якоря — Историческая справка по атрибуту name.
  5. Плавный скроллинг — Руководство по улучшению навигации с использованием плавного перехода к якорю id.
  6. HTML Ссылки Гиперссылки — Сборник профессиональных советов для создания HTML-якорей и ссылок.
  7. Поддержка атрибута 'id' — Отчет о совместимости браузеров с атрибутом id.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой атрибут рекомендуется использовать для создания якорей в HTML?
1 / 5