Атрибут href тега <a> — адреса посилання
Атрибут href визначає URL-адресу сторінки на яку вказує посилання. Оскільки в якості адреси посилання може використовуватися документ будь-якого типу, то результат переходу за посиланням залежить від кінцевого файлу. За замовчуванням новий документ завантажується в поточне вікно браузера, однак це властивість можна змінити за допомогою атрибута target .
Якщо атрибут href відсутній, то теґ <a> не є гіперпосиланням.
Загальний опис
автор: NagarD
Синтаксис
<a href=”URL”>Атрибут href може отримувати єдине значення:
-
URL -
URL-адреса посилання. Можливі значення:
- Абсолютний URL - вказує на інший сайт (наприклад,
href="http://www.example.com/default.htm") - Відносний URL - вказує на файл в межах веб-сайту (наприклад,
href="default.htm") - Посилання на елемент із зазначеним ідентифікатором в межах сторінки (наприклад,
href="#top") - Інші протоколи (наприклад, https://, ftp://, mailto:, file: тощо)
- Сценарій (наприклад
<a href="JavaScript:alert('Hello');">alert</a>)
- Абсолютний URL - вказує на інший сайт (наприклад,
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута href теґа <a>.
HTML
<div id="block1">
<p>Блок 1</p>
<a href="#block2">Посилання на блок 2</a></div>
<div id="block2">
<p>Блок 2</p>
<a href="#block1">Посилання на блок 1</a>
</div>CSS
*{
padding:0;
margin:0;
}
p{
font-size:40px;
color:#f0f0f0;
}
a:link{
color:#f10005;
font-size:20px;
}
a:visited{
color:#010005;
}
a:hover{
color:#f10000;
}
a:active{
color:#01c00f;
font-size:19.5px;
}
#block1{
width:100%;
height:1000px;
background:#0000ff;
}
#block2{
width:100%;
height:1000px;
background:#ffff00;
} Приклад використання HTML атрибута href теґа <a>.
HTML
<a href="https://css.in.ua/html/tag/a/href">Посилання на іншу HTML сторінку</a>CSS
a:link{
color:#0000ff;
font-size:20px;
}
a:visited{
color:#f10005;
}
a:hover{
color:#f10000;
}
a:active{
color:#01c00f;
font-size:18px;
}Різні форми href в одному прикладі; останній рядок — той самий теґ без href: він і на вигляд інший, і фокус клавішею Tab на нього не потрапляє
HTML
<p><a href="#target">Якір на цій самій сторінці</a> — стрибок усередині документа.</p>
<p><a href="mailto:[email protected]">[email protected]</a> — відкриє поштову програму.</p>
<p><a href="tel:+380441234567">+38 044 123 45 67</a> — на телефоні набере номер.</p>
<p><a href="https://css.in.ua/" target="_blank" rel="noopener">У новій вкладці</a> — обов'язково з rel="noopener".</p>
<p><a>Той самий теґ, але без href</a> — не посилання: немає ні фокуса, ні Enter, ні курсора-руки.</p>
<div class="gap">Прокрутіть або натисніть перший рядок ↑</div>
<p id="target">Ціль якоря — її підсвітив селектор :target.</p>CSS
a[href] {
color: #1a56c4;
}
/* якір без адреси браузер малює звичайним текстом */
a:not([href]) {
color: #6b7280;
text-decoration: none;
}
:target {
background: #ffe9a8;
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.gap {
height: 160px;
margin: 1rem 0;
padding-top: 0.5rem;
border-top: 1px dashed #99aaaa;
color: #6b7280;
}Коментарі
Коментарів ще немає — будьте першим!