Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak tworzyć listę definicji w HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-10-18

Częstym problemem, podczas tworzenia strony internetowej, jest tworzenie list elementów z ich objaśnieniami. Do tego celu można wykorzystać listę definicji. Tworzymy ją, wykorzystując następującą konstrukcję:

<dl>
    <dt>tekst nagłówka</dt>
        <dd>opis</dt>
    ...
</dl>

gdzie:

  • <dl> – tworzy nową listę definicji,
  • <dt> – oznacza nowy nagłówek na liście,
  • <dd> – oznacza opis nagłówka.

Przedstawiony sposób wykorzystania tych właściwości nie zapewnia elastyczności. Aby w łatwy sposób zmieniać listy na stronach internetowych, należy wykorzystać Kaskadowe Arkusze Stylów. Zobacz część encyklopedii Jak formatować listę definicji w CSS.

Przykład

Przykład listy definicji:

<html> 
<head> 
    <title>Lista definicji</title> 
</head> 
<body> 
    <dl compact>
        <dt>Napięcie elektryczne</dt>
            <dd>Jest różnicą potencjałów elektrycznych między dwoma punktami obwodu elektrycznego</dd>
        <dt>Natężenie prądu elektrycznego</dt>
            <dd>Jest wielkością fizyczną charakteryzującą przepływ prądu elektrycznego zdefiniowaną...</dd>
        <dt>Moc elektryczna</dt>
            <dd>Jest skalarną wielkością fizyczną określającą pracę wykonaną w jednostce czasu przez układ fizyczny</dd>
    </dl> 
</body> 
</html>

W przeglądarce przykład wygląda tak, jak na Rys. 1.

Rys. 1. Lista definicji.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać listę definicji w samouczku: