Znacznik HTMLSekcje i semantyka

<address>

Dane kontaktowe autora artykułu albo właściciela strony.

Wyświetlanie
block
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść przepływu bez nagłówków, elementów sekcji, <header>, <footer> i <address>
Na tej stronie

Przykład

#
HTML
<footer>
  <address>
    Masz pytanie o kurs? Napisz: <a href="mailto:team@codeworlds.pl">team@codeworlds.pl</a><br>
    albo zadzwoń: <a href="tel:+48221234567">+48 22 123 45 67</a>
  </address>
</footer>
Podgląd

Definicja i zastosowanie

#

Element <address> zawiera dane kontaktowe osoby lub organizacji odpowiedzialnej za treść: adres e-mail, numer telefonu, linki do profili, adres siedziby. Wewnątrz <article> dotyczy autora tego artykułu, a poza nim całej strony.

Wbrew nazwie nie służy do oznaczania dowolnych adresów. Adres dostawy w formularzu zamówienia czy miejsce konferencji opisane w artykule to zwykłe akapity. <address> stosuj tylko wtedy, gdy chodzi o kontakt z autorem lub właścicielem treści.

Najczęściej umieszcza się go w <footer> strony lub artykułu. W środku nie mogą się znaleźć nagłówki, elementy sekcji (<article>, <section>, <nav>, <aside>), <header>, <footer> ani kolejny <address>. Przeglądarki domyślnie wyświetlają go kursywą.

Składnia

#
Składnia
<address>
  …dane kontaktowe…
</address>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

#
Kontakt z autorką artykułu
HTML
<article>
  <h2>Pięć błędów początkujących w CSS</h2>
  <p>Najczęstszy z nich to walka ze specyficznością selektorów.</p>
  <footer>
    <address>
      Autorka: <a href="/autorzy/marta-nowak">Marta Nowak</a>
    </address>
  </footer>
</article>
Podgląd

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

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

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

#
  • Nie oznaczaj przez <address> dowolnych adresów pocztowych, tylko dane kontaktowe autora lub właściciela treści.
  • Używaj linków mailto: i tel:, żeby kontakt był możliwy jednym kliknięciem, także na telefonie.
  • Jeśli kursywa nie pasuje do projektu, wyłącz ją w CSS: font-style: normal.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.