Спросят с вероятностью 3%
id атрибут элемента может использоваться для создания якорных ссылок (anchor links), которые позволяют переходить к определённому разделу или элементу на странице. Это особенно полезно для навигации по длинным страницам, позволяя пользователям быстро перейти к интересующему их контенту без необходимости прокручивать страницу вручную.Как это работает:
1️⃣ Установите атрибут
id для целевого элемента на странице. Должен быть уникальным в пределах страницы.<div id="section1">Это целевая секция</div>2️⃣ Создайте ссылку с атрибутом
href, значение которого начинается с символа #, за которым следует id целевого элемента.Перейти к целевой секции
3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы с якорными ссылками</title>
</head>
<body>
<h2>Перейти к Секции 1</h2>
<h2>Перейти к Секции 2</h2>
<div style="height:600px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section1">Секция 1</h2>
<p>Некоторый контент...</p>
<div style="height:500px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section2">Секция 2</h2>
<p>Ещё некоторый контент...</p>
</body>
</html>
В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице.
Дополнительные применения:
✅ Создание навигационного меню: Используется для быстрого доступа к разделам на одностраничных сайтах или длинных лендингах.
✅ Ссылки на заметки: Позволяет создавать внутренние ссылки в документах или статьях, упрощая навигацию по тексту.
Использование
id в ссылках делает веб-страницы более удобными для пользователей, облегчая доступ к нужной информации и улучшая общий пользовательский опыт.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых