Cześć! Witaj na moim blogu poświęconym programowaniu webowemu w HTML, CSS i JavaScript. Dziś zanurzymy się w temat tagu base, który często bywa pomijany przez początkujących, a potrafi znacząco uprościć zarządzanie linkami i zasobami na stronie. Tag base definiuje bazowy adres URL dla wszystkich względnych odnośników w dokumencie HTML, co czyni go nieocenionym w większych projektach i aplikacjach single-page.
W tym wpisie przejdziemy od definicji i składni, przez praktyczne przykłady, po zaawansowane zastosowania, pułapki oraz integrację z CSS i JavaScript. Przygotuj się na gotowe fragmenty kodu i wskazówki, które od razu wdrożysz w swoich projektach. Zaczynamy!
Co to jest tag base i dlaczego jest ważny?
Tag base umieszczamy w sekcji <head> dokumentu. Jego rolą jest ustawienie domyślnej bazy URL (base URL), względem której przeglądarka interpretuje wszystkie względne odnośniki (np. href="styl.css" czy src="obrazek.jpg"). Dzięki temu nie wpisujesz wszędzie pełnych adresów absolutnych – wystarczy ścieżka względem bazy.
Na przykład, jeśli ustawisz <base href="/">, to link <a href="html/"> automatycznie stanie się https://twojadomena.pl/html/, zakładając, że strona jest na https://twojadomena.pl.
Najczęściej wpływa na poniższe atrybuty i elementy:
- linki w
<a href>i<area href>, - zasoby w
<img src>,<script src>,<link href>, - adresy w
<form action>(domyślny cel wysyłki formularza), - odwołania w
<video src>i<audio src>, - adresy w
<iframe src>.
Dlaczego to rewolucyjne?
- ułatwia przenoszenie projektów – zmień bazę w jednym miejscu, a wszystkie linki dostosują się automatycznie;
- idealne dla frameworków – w aplikacjach React, Vue czy Angular z routingiem (np. na GitHub Pages) zapobiega błędom 404;
- poprawia SEO i spójność – roboty wyszukiwarek i narzędzia analizujące mają jednolite punkty odniesienia;
- zmniejsza rozmiar kodu – mniej powtarzania pełnych URL-i.
Bez base względne linki są interpretowane względem obecnego URL podstrony (np. będąc na /blog/post1/, plik styl.css szuka się pod /blog/post1/styl.css). Z base wszystkie odnośniki są rozwiązywane względem zdefiniowanej bazy.
Składnia i atrybuty tagu base
Tag base jest prosty – ma tylko dwa atrybuty. Oto jego ogólna postać:
<base href="URL_bazy" target="cel_okna">
href – adres bazy (absolutny lub względny), np. href="https://example.com/", href="/subdir/" lub href="./";
target – opcjonalny. Ustawia domyślny kontekst otwierania dla linków i formularzy (np. _blank dla nowej karty, _self dla tej samej). Działa globalnie dla <a>/<area>/<form> bez własnego target.
Pamiętaj o trzech kluczowych zasadach:
- tylko jeden
base– pierwszy w dokumencie ma moc, kolejne są ignorowane; - umieszczaj w
<head>– i to jak najwcześniej, przed innymi zasobami; - nie używaj w
<body>– przeglądarki go zignorują.
Przykład podstawowy ilustrujący działanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład base</title>
<base href="/"> <!-- Baza to korzeń domeny -->
</head>
<body>
<a href="html/">Artykuły o HTML</a> <!-- Stanie się https://twoja-domena.pl/html/ -->
<img src="logo.png" alt="Logo"> <!-- Szuka w /logo.png -->
</body>
</html>
Efekt – link prowadzi do /html/, a obraz ładuje się z korzenia. Bez base wynik zależałby od aktualnej podstrony.
Przykłady użycia w praktyce
1. Prosty przykład dla statycznej strony
Załóżmy strukturę: /css/, /js/, /img/. Ustaw base href="/", a wszystkie zasoby będą ładowane względem korzenia domeny:
<head>
<base href="https://mojportfolio.pl/">
<link rel="stylesheet" href="css/style.css"> <!-- Pełny: https://mojportfolio.pl/css/style.css -->
</head>
<body>
<script src="js/app.js"></script> <!-- Automatycznie z bazy -->
<a href="projekty/webdev.html">Moje projekty</a>
</body>
Wynik – nawet jeśli otworzysz plik lokalnie (file://), po publikacji linki pozostają spójne. Sprawdź w DevTools > Network, aby podejrzeć pełne, rozwiązywane URL-e.
2. Base z podkatalogiem – idealne dla blogów
Gdy serwujesz całą witrynę pod /blog/, ustaw href="/blog/":
<base href="/blog/">
<a href="posty/2023.html">Artykuł 2023</a> <!-- /blog/posty/2023.html -->
<img src="../img/banner.jpg" alt="Baner"> <!-- Względny do bazy: /img/banner.jpg -->
Uwaga – ścieżki względne typu ../ liczą się względem bazy, a nie bieżącej strony! Zawsze testuj po zmianie base.
3. Integracja z target – nowe karty dla linków
Możesz globalnie wymusić otwieranie linków w nowej karcie, a pojedyncze odnośniki nadpisać własnym target:
<base href="/" target="_blank">
<a href="https://google.com">Google</a> <!-- Otworzy w nowej karcie -->
<a href="wsparcie.html">Wsparcie</a> <!-- Też nowa karta -->
<a href="index.html" target="_self">Strona główna</a> <!-- Nadpisanie do tej samej karty -->
Zaawansowane zastosowania – base w SPA i frameworkach
W single-page applications (np. React z React Router, Vue Router, Angular) poprawnie ustawione base minimalizuje błędy routingu i 404 po odświeżeniu lub publikacji w podkatalogu (np. GitHub Pages).
Bezpieczny sposób na dynamiczne dodanie base w JavaScript (bez ingerencji w inne elementy <head>):
// Tworzy i wstawia <base> na początek <head>
const baseEl = document.createElement('base');
baseEl.href = new URL('/app/', window.location.origin).href;
document.head.prepend(baseEl);
Dla GitHub Pages, gdy strona jest publikowana jako /nazwa-repozytorium/, ustaw bazę tak:
<base href="/nazwa-repozytorium/">
Integracja z CSS – co faktycznie respektuje base?
Wewnętrzne style w <style> dziedziczą bazę dokumentu, więc url() i @import liczą ścieżki względem <base>. Zewnętrzne pliki CSS (.css) rozwiązują ścieżki względem lokalizacji samego pliku CSS, a nie dokumentu HTML.
Przykład odwołań w CSS:
/* Wewnętrzny <style> w dokumencie – względnie do <base> */
@import url("komponenty/button.css");
.selector { background-image: url("img/pattern.png"); }
/* Zewnętrzny style.css – względnie do /css/style.css (lokalizacja pliku) */
@import url("./komponenty/button.css");
.hero { background-image: url("../img/pattern.png"); }
Tabela porównawcza – z base vs bez base
Poniżej znajdziesz krótkie porównanie typowych scenariuszy:
| Scenariusz | Bez base |
Z <base href="/"> |
|---|---|---|
Link href="css/style.css" na /blog/post/ |
Szuka /blog/post/css/style.css (błąd 404) |
Szuka /css/style.css (OK) |
Obraz src="logo.png" |
Zależny od podstrony | Zawsze /logo.png |
| Przeniesienie projektu | Edytuj każdy link ręcznie | Zmień tylko base |
| SPA routing | Częste błędy po odświeżeniu | Stabilne ścieżki |
Pułapki i błędy początkujących
Oto najczęstsze problemy, na które warto uważać:
- podwójne slashe –
href="https://example.com"+ odnośnik/css/dajehttps://example.com/css/(OK), alehref="https://example.com/"+"css/"może skutkowaćhttps://example.com//css/; - relatywne
base–href="./"imituje bieżącą stronę i bywa źródłem niejednoznaczności; - konflikt wielu
base– tylko pierwszy działa, reszta jest ignorowana; - HTTP/HTTPS – dla mieszanego kontentu używaj absolutnego
basezgodnego z protokołem strony; - testowanie – weryfikuj w DevTools (zakładka Network) lub sprawdzaj końcowe URL-e komendą
curl -I https://twoja.domena/pełna/ścieżka.
Wskazówka – waliduj HTML (validator.w3.org) i sprawdzaj działanie w kilku przeglądarkach (Chrome, Firefox, Safari), aby wyłapać niespójności.
Integracja z JavaScript
Poniżej przykład pobrania bieżącej bazy i ostrożnego przepinania linków. Uwaga: operuj na atrybutach, nie nadpisuj bezmyślnie href, jeśli link jest już absolutny.
// Pobierz bieżącą bazę
const baseHref = (document.querySelector('base') || {}).href || window.location.origin + '/';
console.log(baseHref);
// Przykładowe przepięcie względnych linków (ostrożnie!)
document.querySelectorAll('a[href]').forEach(a => {
const raw = a.getAttribute('href');
if (raw && !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(raw) && !raw.startsWith('#')) {
a.href = new URL(raw, baseHref).href;
}
});
Masz pytania? Napisz w komentarzach! Subskrybuj blog po więcej o HTML/CSS/JS. Do następnego!