<base>
Ustala adres bazowy dla wszystkich względnych adresów w dokumencie oraz domyślny cel odnośników.
- Wyświetlanie
- none
- Znacznik zamykający
- Brak, element pusty
- Dozwolona zawartość
- Brak, element pusty
Przykład
#<head>
<meta charset="utf-8">
<base href="https://www.codeworlds.com/kursy/">
<title>Kursy | CodeWorlds</title>
</head>
<body>
<a href="html">Kurs HTML</a>
<a href="/cennik">Cennik</a>
<img src="okladki/html.webp" alt="Okładka kursu HTML" width="240" height="160">
</body>Link „Kurs HTML” prowadzi do https://www.codeworlds.com/kursy/html, a obraz wczyta się z https://www.codeworlds.com/kursy/okladki/html.webp. Ścieżka zaczynająca się od /, jak w linku „Cennik”, pomija katalog i wskazuje https://www.codeworlds.com/cennik.
Definicja i zastosowanie
#Element <base> to pusty element nagłówka, który zmienia sposób rozwiązywania adresów względnych. Atrybut href podaje adres bazowy, od którego liczone są wszystkie względne ścieżki w dokumencie: w linkach, obrazach, skryptach i formularzach. Atrybut target ustala, gdzie domyślnie otwierają się odnośniki i wyniki formularzy.
W dokumencie może być tylko jeden <base> i musi stać przed wszystkimi elementami, które korzystają z adresów, najlepiej zaraz po <meta charset>. Jeśli przez pomyłkę dodasz kilka, przeglądarka weźmie pod uwagę pierwszy.
Uważaj na kotwice. Przy ustawionym <base> odnośnik <a href="#faq"> prowadzi do adresu bazowego z dopiskiem #faq, a nie do sekcji na bieżącej stronie. Jeśli adres bazowy wskazuje inną stronę, kliknięcie przeniesie użytkownika gdzie indziej.
Dziś <base> stosuje się rzadko. Spotkasz go w aplikacjach jednostronicowych, na przykład w Angularze, który domyślnie wstawia <base href="/">, oraz na stronach publikowanych w podkatalogu serwera.
Składnia
#<base href="https://www.codeworlds.com/kursy/">Atrybuty
#URL
Adres bazowy dla wszystkich adresów względnych w dokumencie. Zwróć uwagę na ukośnik na końcu: przyhttps://www.codeworlds.com/kursy/ścieżkapythonda…/kursy/python, a bez końcowego ukośnika…/python, bo ostatni człon adresu zostanie potraktowany jak nazwa pliku._self | _blank | _parent | _top | nazwa
Domyślne miejsce otwierania odnośników i wyników formularzy, które nie mają własnego atrybututarget. Przy_blankkażdy link otworzy się w nowej karcie. Pojedynczy odnośnik może to nadpisać, np. atrybutemtarget="_self".
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#href
URLAdres bazowy dla wszystkich adresów względnych w dokumencie. Zwróć uwagę na ukośnik na końcu: przy https://www.codeworlds.com/kursy/ ścieżka python da …/kursy/python, a bez końcowego ukośnika …/python, bo ostatni człon adresu zostanie potraktowany jak nazwa pliku.
<base href="https://www.codeworlds.com/kursy/">
<a href="python">Kurs Python</a>Odnośnik prowadzi do https://www.codeworlds.com/kursy/python.
target
_self | _blank | _parent | _top | nazwaDomyślne miejsce otwierania odnośników i wyników formularzy, które nie mają własnego atrybutu target. Przy _blank każdy link otworzy się w nowej karcie. Pojedynczy odnośnik może to nadpisać, np. atrybutem target="_self".
<head>
<base target="_blank">
</head>
<body>
<a href="https://developer.mozilla.org">Otworzy się w nowej karcie</a>
<a href="/kursy" target="_self">Otworzy się w tej samej karcie</a>
</body>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
base {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Kończ adres w
hrefukośnikiem, jeśli wskazuje katalog. Bez niego ostatni człon adresu zostanie pominięty. - Po dodaniu
<base>sprawdź wszystkie kotwice typu#sekcja. Mogą zacząć prowadzić na inną stronę. - Zanim ustawisz
<base target="_blank">, zastanów się, czy linki naprawdę muszą otwierać nowe karty. Użytkownicy wolą decydować o tym sami.
Powiązane hasła
#- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- <link>Łączy dokument z zewnętrznym zasobem: arkuszem stylów, ikoną strony, fontem albo inną wersją językową.
- <meta>Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.