Poznaj Programowanie

Tagi HTML: address

Piotr Grochal 7 min. czytania

Tag <address> to element HTML służący do definiowania danych kontaktowych autora dokumentu, artykułu lub najbliższego nadrzędnego elementu. Jest to semantyczny znacznik, który porządkuje strukturę strony i ułatwia narzędziom (wyszukiwarkom, czytnikom ekranu) jednoznaczną identyfikację informacji kontaktowych.

W elemencie <address> możesz umieścić m.in. następujące dane:

  • adres e-mail,
  • numer telefonu,
  • adres url strony internetowej,
  • współrzędne geograficzne,
  • profile w mediach społecznościowych,
  • imię i nazwisko osoby kontaktowej,
  • nazwę firmy lub organizacji.

Zastosowanie w praktyce

Tag <address> stosuj w dwóch głównych kontekstach: gdy odnosi się do konkretnego artykułu (np. autora wewnątrz <article>) oraz gdy dotyczy całego dokumentu (najczęściej w obrębie <body> albo stopki strony).

Przykład 1 – dane kontaktowe autora artykułu

Poniższy fragment pokazuje, jak powiązać kontakt z konkretnym artykułem:

&lt;article&gt;
&lt;h1&gt;Mój pierwszy artykuł o HTML&lt;/h1&gt;
&lt;p&gt;Treść artykułu...&lt;/p&gt;

&lt;address&gt;
&lt;p&gt;Artykuł napisał &lt;a href="mailto:[email protected]"&gt;Jan Kowalski&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Pytania prosimy kierować na adres mailowy powyżej.&lt;/p&gt;
&lt;/address&gt;
&lt;/article&gt;

Przykład 2 – dane kontaktowe całej strony

Tak możesz zaprezentować ogólne dane kontaktowe serwisu:

&lt;address&gt;
&lt;p&gt;Skontaktuj się z nami pod adresem &lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Lub zadzwoń do nas: 555-5555&lt;/p&gt;
&lt;p&gt;Nasza siedziba:&lt;br&gt;
Example.com&lt;br&gt;
Box 564, Disneyland&lt;br&gt;
USA&lt;/p&gt;
&lt;/address&gt;

Przykład 3 – adres fizyczny z formatowaniem

Poniżej prosty przykład adresu pocztowego jako danych kontaktowych:

&lt;address&gt;
Ferdynand Kiepski&lt;br&gt;
ul. Ćwiartki 3/4&lt;br&gt;
99-999 Warszawa&lt;br&gt;
Polska
&lt;/address&gt;

Specyfikacja i wymagania

Znaczniki obowiązkowe

Zarówno znacznik otwierający <address>, jak i zamykający </address>, są wymagane.

Atrybuty

Element <address> nie posiada atrybutów obowiązkowych. Wspiera natomiast atrybuty globalne (np. id, class, title, style, dir, lang) oraz atrybuty zdarzeniowe (np. onclick, ondblclick, onmousedown, onmouseup).

Ograniczenia zawartości

Ważne: wewnątrz <address> nie należy umieszczać treści niezwiązanych z kontaktem. Dozwolona i niedozwolona zawartość wygląda następująco:

Element <address> nie może zawierać –

  • nagłówków (<h1>–<h6>, <hgroup>),
  • elementów sekcyjnych (<article>, <aside>, <section>, <nav>),
  • elementów <header>, <footer> ani innego <address>.

Element <address> może zawierać –

  • elementy treści typu flow (np. <p>, <div>),
  • linki (<a>),
  • proste formatowanie tekstu (<strong>, <em>, <br>),
  • inne elementy niesekcyjne i niebędące nagłówkami.

Dla przejrzystości warto ograniczać zawartość <address> do zwięzłych, aktualnych informacji kontaktowych.

Domyślne stylowanie CSS

Przeglądarki stosują domyślne style dla <address>:

address {
display: block;
font-style: italic;
}

Możesz nadpisać wygląd własnymi regułami CSS, np. neutralizując kursywę i dodając akcenty wizualne:

address {
font-style: normal;
color: #666;
border-top: 1px solid #ddd;
padding-top: 1rem;
margin-top: 2rem;
}
address a {
color: #0066cc;
text-decoration: none;
}
address a:hover {
text-decoration: underline;
}

Praktyczne przykłady z CSS

Przykład 1 – stylizacja całego bloku kontaktowego

Tak może wyglądać sekcja kontaktowa z delikatnym tłem i czytelną typografią:

&lt;style&gt;
.contact-section {
background-color: #f5f5f5;
padding: 2rem;
border-radius: 8px;
margin-top: 3rem;
}
.contact-section h2 {
margin-top: 0;
color: #333;
}
.contact-section address {
font-style: normal;
line-height: 1.8;
}
.contact-section a {
color: #007bff;
}
&lt;/style&gt;

&lt;div class="contact-section"&gt;
&lt;h2&gt;Kontakt z autorem&lt;/h2&gt;
&lt;address&gt;
Maria Nowak&lt;br&gt;
Starsza programistka frontendu&lt;br&gt;
&lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;br&gt;
Telefon: +48 123 456 789
&lt;/address&gt;
&lt;/div&gt;

Przykład 2 – stopka ze stylizowanymi danymi kontaktowymi

Poniżej wariant do zastosowania w stopce serwisu:

&lt;style&gt;
footer {
background-color: #333;
color: #fff;
padding: 2rem;
margin-top: 3rem;
}
footer address {
font-style: normal;
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
footer address p {
margin: 0;
}
footer address a {
color: #ffd700;
}
&lt;/style&gt;

&lt;footer&gt;
&lt;address&gt;
&lt;p&gt;
&lt;strong&gt;Siedziba główna:&lt;/strong&gt;&lt;br&gt;
ul. Główna 123&lt;br&gt;
00-123 Warszawa
&lt;/p&gt;
&lt;p&gt;
&lt;strong&gt;Biuro:&lt;/strong&gt;&lt;br&gt;
&lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;br&gt;
&lt;a href="tel:+48123456789"&gt;+48 123 456 789&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;strong&gt;Wsparcie:&lt;/strong&gt;&lt;br&gt;
&lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;
&lt;/p&gt;
&lt;/address&gt;
&lt;/footer&gt;

Obsługa przeglądarek

Tag <address> jest szeroko wspierany przez nowoczesne przeglądarki:

Przeglądarka Wersja
Chrome od wersji 1 (2008)
Firefox od wersji 1 (2004)
Edge od wersji 12 (2015)
Opera od wersji 15 (2013)
Safari od wersji 1 (2003)

Dobre praktyki

Stosuj <address> z myślą o dostępności, SEO i spójności semantycznej. Oto zalecenia, które pomogą utrzymać porządek i użyteczność:

  1. Używaj znaczników semantycznych – <address> wyraźnie oznacza kontakt i poprawia dostępność treści.

  2. Łącz z odpowiednim kontekstem – umieszczaj <address> wewnątrz <article> (kontakt autora) lub przy strukturze całego dokumentu, np. w stopce.

  3. Neutralizuj kursywę, jeśli trzeba – domyślny styl font-style: italic możesz zmienić, aby dopasować wygląd do designu.

  4. Dodawaj aktywne odnośniki – używaj mailto: i tel:, aby ułatwić kontakt z poziomu urządzeń mobilnych:

    &lt;address&gt;
    &lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt; ·
    &lt;a href="tel:+48123456789"&gt;+48 123 456 789&lt;/a&gt;
    &lt;/address&gt;

  5. Unikaj treści sekcyjnych i nagłówków – nie wstawiaj nagłówków, sekcji, <header>, <footer> ani kolejnego <address> w środku; elementy takie jak <p> czy <div> są dozwolone, ale zachowaj zwięzłość.