Атрибут href тега <base> — базовий URL сторінки
Атрибут href визначає базовий URL для всіх відносних URL-адрес на сторінці.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<base href="URL">Атрибут href може отримувати єдине значення:
-
URL -
Абсолютний URL який діє в якості базового URL (наприклад, "http://www.example.com/").
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
href у base задає адресу, від якої розгортаються всі відносні посилання документа: наведи курсор на посилання — у рядку стану адреса починається з css.in.ua.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://css.in.ua/">
</head>
<body>
<p><a href="css/properties">css/properties</a> — відносна адреса добудувалася від base href.</p>
</body>
</html>Базова адреса діє на все відносне — і на те, чого ви не мали на увазі. У верхньої картинки адреса відносна: браузер шукає її не поруч зі сторінкою, а за базовою адресою, і показує текст alt. У нижньої адреса абсолютна, тож <base> на неї не впливає.
HTML
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<!-- Один рядок у head — і всі відносні адреси документа рахуються звідси -->
<base href="https://example.invalid/images/2026/">
</head>
<body>
<h3>Відносна адреса: <code>src="kotyk.png"</code></h3>
<p><img src="kotyk.png" alt="Тут мала бути картинка. Браузер шукав її за адресою https://example.invalid/images/2026/kotyk.png — тобто за базовою, а не поруч зі сторінкою."></p>
<h3>Абсолютна адреса: <code>src="data:..."</code></h3>
<p><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='80'%3E%3Crect%20width='240'%20height='80'%20rx='6'%20fill='%23245ea8'/%3E%3Ctext%20x='120'%20y='47'%20text-anchor='middle'%20font-family='sans-serif'%20font-size='16'%20fill='white'%3Ebase%20на%20мене%20не%20діє%3C/text%3E%3C/svg%3E" alt="Синій прямокутник"></p>
</body>
</html>CSS
body { font: 16px/1.5 system-ui, sans-serif; margin: 12px; }
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
img { max-width: 100%; color: #8a3b12; }Коментарі
Коментарів ще немає — будьте першим!