<a>Ссылки — это основа интернета. Именно они связывают страницы между собой. Без тега <a> нельзя перейти из одного раздела в другой, открыть внешний сайт или запустить звонок по телефону.
<a href="https://wildberries.ru">Перейти на Wildberries</a>href (hypertext reference) — адрес, куда ведёт ссылка<a href="https://t.me/roadtojs">Наш Telegram-канал</a>
<a href="https://vk.com/feed">ВКонтакте</a>Используй для ссылок на другие сайты.
<a href="/catalog">Каталог</a>
<a href="/catalog/shoes">Обувь</a>
<a href="../about">О нас</a>Используй для ссылок между страницами своего сайта.
<!-- Ссылка-якорь -->
<a href="#contacts">Перейти к контактам</a>
<!-- Элемент с id, к которому прокручивает страницу -->
<section id="contacts">
<h2>Контакты</h2>
</section>Именно так работает навигация «оглавления» в длинных статьях и на лендингах.
<a href="https://wildberries.ru" target="_blank">Wildberries</a>Открывает ссылку в новой вкладке. Удобно для внешних сайтов — пользователь не теряет твою страницу.
<a href="https://wildberries.ru" target="_blank" rel="noopener noreferrer">
Wildberries
</a>Без rel="noopener" открытая страница может получить доступ к твоей странице через window.opener. Это уязвимость безопасности. Всегда добавляй rel="noopener noreferrer" вместе с target="_blank".
<a href="mailto:support@myshop.ru">Написать в поддержку</a>Открывает почтовый клиент пользователя с уже заполненным адресом получателя.
<a href="tel:+74951234567">+7 (495) 123-45-67</a>На мобильном устройстве автоматически предлагает позвонить. Незаменимо для сайтов с телефонами поддержки.
Ошибка 1: Текст ссылки не описывает куда она ведёт
<!-- Плохо — "тут" ничего не говорит -->
<a href="/catalog">Нажмите тут</a>
<!-- Хорошо — понятно куда ведёт -->
<a href="/catalog">Посмотреть каталог товаров</a>Ошибка 2: target="_blank" без rel="noopener"
<!-- Небезопасно -->
<a href="https://example.com" target="_blank">Ссылка</a>
<!-- Безопасно -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка</a>Ошибка 3: Ссылка без href
<a>Это не ссылка — нет href</a> <!-- Не кликабельно -->В React и Vue ссылки создаются через компоненты (<Link>, <router-link>), но они всё равно рендерятся в обычный <a href="...">. Умение читать атрибуты ссылок в DevTools — базовый навык фронтенд-разработчика.
Создание ссылок с разными атрибутами через DOM
// Создаём обычную ссылку
const link1 = document.createElement('a')
link1.href = 'https://wildberries.ru'
link1.textContent = 'Wildberries'
console.log('href:', link1.getAttribute('href'))
console.log('текст:', link1.textContent)
// Ссылка в новой вкладке с защитой
const link2 = document.createElement('a')
link2.href = 'https://t.me/roadtojs'
link2.target = '_blank'
link2.rel = 'noopener noreferrer'
link2.textContent = 'Наш Telegram'
console.log('target:', link2.getAttribute('target'))
console.log('rel:', link2.getAttribute('rel'))
// Ссылка для звонка
const phoneLink = document.createElement('a')
phoneLink.href = 'tel:+74951234567'
phoneLink.textContent = '+7 (495) 123-45-67'
console.log('Телефонная ссылка:', phoneLink.href)
// Ссылка для email
const mailLink = document.createElement('a')
mailLink.href = 'mailto:support@example.ru'
mailLink.textContent = 'Написать нам'
console.log('Email ссылка:', mailLink.href)Анализ и проверка ссылок — безопасность и якоря
// Функция анализа ссылки
function analyzeLink(href, target, rel) {
console.log('--- Анализ ссылки ---')
console.log('URL:', href)
// Тип ссылки
if (href.startsWith('http')) {
console.log('Тип: внешняя')
} else if (href.startsWith('#')) {
console.log('Тип: якорная (прокрутка на странице)')
} else if (href.startsWith('mailto:')) {
console.log('Тип: email')
} else if (href.startsWith('tel:')) {
console.log('Тип: телефон')
} else {
console.log('Тип: относительная (внутренняя)')
}
// Проверка безопасности
if (target === '_blank') {
const safe = rel && rel.includes('noopener')
console.log('Открывается: в новой вкладке')
console.log('Безопасность:', safe ? 'OK (noopener есть)' : 'ПРОБЛЕМА: нет noopener!')
}
}
analyzeLink('https://wildberries.ru', '_blank', 'noopener noreferrer')
console.log('')
analyzeLink('#contacts', null, null)
console.log('')
analyzeLink('https://vk.com', '_blank', null)<a>Ссылки — это основа интернета. Именно они связывают страницы между собой. Без тега <a> нельзя перейти из одного раздела в другой, открыть внешний сайт или запустить звонок по телефону.
<a href="https://wildberries.ru">Перейти на Wildberries</a>href (hypertext reference) — адрес, куда ведёт ссылка<a href="https://t.me/roadtojs">Наш Telegram-канал</a>
<a href="https://vk.com/feed">ВКонтакте</a>Используй для ссылок на другие сайты.
<a href="/catalog">Каталог</a>
<a href="/catalog/shoes">Обувь</a>
<a href="../about">О нас</a>Используй для ссылок между страницами своего сайта.
<!-- Ссылка-якорь -->
<a href="#contacts">Перейти к контактам</a>
<!-- Элемент с id, к которому прокручивает страницу -->
<section id="contacts">
<h2>Контакты</h2>
</section>Именно так работает навигация «оглавления» в длинных статьях и на лендингах.
<a href="https://wildberries.ru" target="_blank">Wildberries</a>Открывает ссылку в новой вкладке. Удобно для внешних сайтов — пользователь не теряет твою страницу.
<a href="https://wildberries.ru" target="_blank" rel="noopener noreferrer">
Wildberries
</a>Без rel="noopener" открытая страница может получить доступ к твоей странице через window.opener. Это уязвимость безопасности. Всегда добавляй rel="noopener noreferrer" вместе с target="_blank".
<a href="mailto:support@myshop.ru">Написать в поддержку</a>Открывает почтовый клиент пользователя с уже заполненным адресом получателя.
<a href="tel:+74951234567">+7 (495) 123-45-67</a>На мобильном устройстве автоматически предлагает позвонить. Незаменимо для сайтов с телефонами поддержки.
Ошибка 1: Текст ссылки не описывает куда она ведёт
<!-- Плохо — "тут" ничего не говорит -->
<a href="/catalog">Нажмите тут</a>
<!-- Хорошо — понятно куда ведёт -->
<a href="/catalog">Посмотреть каталог товаров</a>Ошибка 2: target="_blank" без rel="noopener"
<!-- Небезопасно -->
<a href="https://example.com" target="_blank">Ссылка</a>
<!-- Безопасно -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка</a>Ошибка 3: Ссылка без href
<a>Это не ссылка — нет href</a> <!-- Не кликабельно -->В React и Vue ссылки создаются через компоненты (<Link>, <router-link>), но они всё равно рендерятся в обычный <a href="...">. Умение читать атрибуты ссылок в DevTools — базовый навык фронтенд-разработчика.
Создание ссылок с разными атрибутами через DOM
// Создаём обычную ссылку
const link1 = document.createElement('a')
link1.href = 'https://wildberries.ru'
link1.textContent = 'Wildberries'
console.log('href:', link1.getAttribute('href'))
console.log('текст:', link1.textContent)
// Ссылка в новой вкладке с защитой
const link2 = document.createElement('a')
link2.href = 'https://t.me/roadtojs'
link2.target = '_blank'
link2.rel = 'noopener noreferrer'
link2.textContent = 'Наш Telegram'
console.log('target:', link2.getAttribute('target'))
console.log('rel:', link2.getAttribute('rel'))
// Ссылка для звонка
const phoneLink = document.createElement('a')
phoneLink.href = 'tel:+74951234567'
phoneLink.textContent = '+7 (495) 123-45-67'
console.log('Телефонная ссылка:', phoneLink.href)
// Ссылка для email
const mailLink = document.createElement('a')
mailLink.href = 'mailto:support@example.ru'
mailLink.textContent = 'Написать нам'
console.log('Email ссылка:', mailLink.href)Анализ и проверка ссылок — безопасность и якоря
// Функция анализа ссылки
function analyzeLink(href, target, rel) {
console.log('--- Анализ ссылки ---')
console.log('URL:', href)
// Тип ссылки
if (href.startsWith('http')) {
console.log('Тип: внешняя')
} else if (href.startsWith('#')) {
console.log('Тип: якорная (прокрутка на странице)')
} else if (href.startsWith('mailto:')) {
console.log('Тип: email')
} else if (href.startsWith('tel:')) {
console.log('Тип: телефон')
} else {
console.log('Тип: относительная (внутренняя)')
}
// Проверка безопасности
if (target === '_blank') {
const safe = rel && rel.includes('noopener')
console.log('Открывается: в новой вкладке')
console.log('Безопасность:', safe ? 'OK (noopener есть)' : 'ПРОБЛЕМА: нет noopener!')
}
}
analyzeLink('https://wildberries.ru', '_blank', 'noopener noreferrer')
console.log('')
analyzeLink('#contacts', null, null)
console.log('')
analyzeLink('https://vk.com', '_blank', null)Напиши HTML-блок с четырьмя разными ссылками: 1) внешняя ссылка на https://vk.com (новая вкладка, rel="noopener noreferrer"), 2) якорная ссылка на раздел #about, 3) ссылка для отправки письма на hello@example.com, 4) ссылка для звонка +7 123 456-78-90.
Внешняя ссылка: href="https://...". Якорная: href="#about". Email: href="mailto:адрес". Телефон: href="tel:+71234567890". Для новой вкладки: target="_blank" rel="noopener noreferrer".