W dzisiejszym świecie web developmentu, gdzie CSS rządzi stylami, tag <basefont> może wydawać się reliktem z dawnych lat. Ten element HTML służył do ustawiania domyślnych parametrów czcionki – rozmiaru, koloru i kroju – dla całego dokumentu lub jego części. Był popularny w erze HTML 4, ale dziś jest zdeprecjonowany i nieobsługiwany w HTML5. W tym wpisie przyjrzymy się mu krótko i praktycznie: od składni i przykładów, po powody, dla których warto przejść na nowoczesne rozwiązania.
Czym jest tag <basefont> i do czego służył?
Tag <basefont> pozwalał zdefiniować bazowe ustawienia czcionki dla całego tekstu na stronie, poniżej miejsca jego umieszczenia. Nie wymagał znacznika zamykającego, co czyniło go elementem pustym – zmiany działały aż do następnego <basefont> lub końca dokumentu. Zazwyczaj umieszczano go w sekcji <body>, by wpłynąć na domyślny wygląd całego dokumentu.
Główne atrybuty wyglądały następująco:
- size – rozmiar czcionki od 1 (najmniejszy) do 7 (największy); domyślna wartość to 3; w przeciwieństwie do tagu
<font>nie akceptował wartości względnych jak+1czy-2; - color – kolor tekstu w formacie hex (np.
#990000), nazwie (np.red) lub RGB; - face – krój czcionki, np.
Arial, Times New Roman; zalecano podawanie alternatyw, bo jeśli użytkownik nie miał danej czcionki, przeglądarka wracała do domyślnej.
Dla szybkiego wglądu w dopuszczalne wartości i opis działania atrybutów zobacz poniższą tabelę:
| Atrybut | Dopuszczalne wartości | Opis |
|---|---|---|
| size | 1–7 (liczba) | Rozmiar bazowy czcionki (7 = największy) |
| color | hex (#RRGGBB), nazwa (red), RGB | Kolor całego tekstu poniżej |
| face | Nazwa czcionki (z alternatywami) | Krój, np. „Georgia, Arial” |
Dzięki temu tagowi można było szybko nadać stronie spójny wygląd bez powtarzania stylów w każdym elemencie.
Przykłady użycia tagu <basefont>
Oto klasyczny przykład z tutoriali HTML z lat 90. i wczesnych 2000.: ustawiamy małą, zieloną czcionkę dla całej strony:
<!DOCTYPE html>
<html>
<head>
<title>Przykład basefont</title>
</head>
<body>
<basefont size="2" color="green" face="Arial, sans-serif">
<h1>Nagłówek z bazową czcionką</h1>
<p>To jest paragraf. Cały tekst poniżej będzie zielony, mały i w Arialu.</p>
<p>Kolejny paragraf – bez zmian!</p>
</body>
</html>
Efekt – cały tekst od <basefont> w dół ma rozmiar 2, kolor zielony i krój Arial (lub fallback).
Inny przykład: zmiana tylko rozmiaru na większy dla sekcji z lokalnym „resetem” niżej.
<body>
<basefont size="5">
<p>Duży tekst bazowy.</p>
<basefont size="3">
<!-- Reset do mniejszego -->
<p>Mniejszy tekst poniżej.</p>
</body>
Tak można było „przestawiać” bazowy rozmiar w trakcie dokumentu.
Tag <basefont> współpracował z <font>, gdzie zmiany w <font> były względne do rozmiaru bazowego. Przykładowo, gdy <basefont size="5">, to <font size="-2"> dawał rozmiar 3.
<basefont size="5">
<p>Bazowy rozmiar 5: Normalny tekst.</p>
<font size="-3">To będzie rozmiar 2 (5-3).</font>
Problemy z <basefont> i dlaczego jest przestarzały?
Współczesne standardy webowe od dawna odradzają użycie tego elementu. Oto najważniejsze powody:
- brak wsparcia w HTML5 – nowoczesne przeglądarki go ignorują, a walidatory zgłaszają błędy;
- nieelastyczny i niereaktywny – nie obsługuje responsywności, media queries czy animacji, które zapewnia CSS;
- problemy z dostępnością – skokowa skala 1–7 ignoruje preferencje użytkownika i może utrudniać czytanie;
- mieszanie treści i prezentacji – HTML powinien opisywać strukturę, a styl należeć do CSS.
W listach elementów wycofanych z HTML5 <basefont> znajduje się obok <font>, <center>, <u> czy <s>. Nowoczesny HTML to semantyka + CSS.
Jak zastąpić <basefont> za pomocą CSS?
CSS to standard de facto. Ustawiaj style globalnie w sekcji <style> lub, lepiej, w zewnętrznym pliku.
Przykład 1: Domyślny kolor i krój dla całej strony (zamiast color/face)
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green; /* Zielony kolor */
font-family: Arial, sans-serif;
font-size: 14px; /* Elastyczny rozmiar */
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Paragraf – zielony i w Arialu.</p>
</body>
</html>
Przykład 2: Rozmiar czcionki (zamiast size)
<style>
body { font-size: 1.2rem; /* Responsywny, względny do root */ }
</style>
Przykład 3: Pełny zamiennik z face, color i size
<style>
body {
font-family: 'Georgia', 'Times New Roman', serif; /* Z fallbackami */
font-size: 18px; /* Większy niż domyślny basefont=3 */
color: #990000; /* Ciemny czerwony */
}
</style>
Dla wybranych sekcji użyj klas i dziedziczenia:
<style>
.maly-zielony {
font-size: 12px;
color: green;
font-family: Arial, sans-serif;
}
</style>
<body>
<div class="maly-zielony">
<p>Tekst z klasą – jak dawny basefont, ale poprawnie w CSS.</p>
</div>
</body>
Oto kluczowe zalety CSS w porównaniu z <basefont>:
- responsywność – wartości względne (np.
rem,vw) i media queries pozwalają skalować typografię do ekranu; - dziedziczenie – jeden styl ustawiony na
bodypropaguje się w dół drzewa DOM, upraszczając kod; - zaawansowane efekty – cienie, zmienne CSS, gradienty, animacje i systemy siatek, których
<basefont>nie zapewnia.
Integracja z JavaScript i nowoczesnymi praktykami
W JavaScript możesz dynamicznie modyfikować style CSS – to elastyczność, której <basefont> nigdy nie oferował.
<!DOCTYPE html>
<html>
<head>
<style>
body {
transition: color 0.5s, font-size 0.5s; /* Płynna zmiana */
}
</style>
</head>
<body>
<button onclick="zmienStyl()">Zmień bazowy styl</button>
<p id="tekst">Przykładowy tekst.</p>
<script>
function zmienStyl() {
document.body.style.color = 'blue';
document.body.style.fontSize = '24px';
document.body.style.fontFamily = 'Courier New, monospace';
}
</script>
</body>
</html>
To czysty podział ról: HTML (struktura), CSS (styl), JS (interakcja). Dla frameworków takich jak React czy Vue stosuj styled-components, CSS Modules lub Tailwind CSS zamiast przestarzałych znaczników.
Podsumowujące wskazówki dla programistów
- nigdy nie używaj
<basefont>w nowych projektach – przeglądarki go ignorują, a walidatory zgłaszają błędy; - migruj stare strony – zamień ustawienia na reguły CSS w
body {}lub klasach; proste wyszukaj-zamień przyspieszy pracę; - testuj po migracji – użyj narzędzi jak Lighthouse (Chrome DevTools), by sprawdzić dostępność, wydajność i kontrasty;
- pogłębiaj znajomość CSS – opanuj
font-family,font-size(rem/em/vh/vw),color,@font-faceoraz zasady dziedziczenia.