3 typer av HTML-listor och hur man använder dem

Viktiga takeaways

  • HTML-listor är viktiga för att organisera och presentera data på en webbsida. Det finns tre huvudtyper: ordnade, oordnade och beskrivningslistor.
  • Ordnade listor använder siffror eller andra tecken för att beställa föremålen. Typattributet tillåter anpassning, medan start och omvänd attribut ändrar startposition och ordning.
  • Oordnade listor grupperar relaterade objekt utan en specifik ordning. Kulstilen kan anpassas med CSS.

En HTML-lista är ett väsentligt strukturellt element för alla grupper av relaterade data på en webbsida. Oavsett om du skapar en meny, organiserar föremål på rea eller försöker presentera komplexa data i en mer läsbar form, kommer följande listor att hjälpa dig att få jobbet gjort.

Det finns tre huvudtyper av HTML-listor, som var och en tjänar ett specifikt strukturellt syfte inom webbutveckling.

1. Beställd lista

HTML-listan låter dig gruppera en lista med relaterade objekt i en specifik ordning. För att skapa en ny ordnad lista måste du använda taggen

    . Taggen

      grupperar och innehåller

    1. -taggar. Varje listelement (
    2. -tagg) kommer att innehålla ett specifikt objekt i listan.

       
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ol>

      Denna kod återger följande vy:

      Du bör notera att den beställda listans standardbeställningstyp är siffror, men du kan ändra detta med hjälp av typattributet. Typattributet ger dig möjlighet att bestämma vilket element som ska sortera din lista. Du har möjlighet att använda alfabetet (versaler eller gemener), siffror eller romerska siffror (versaler eller gemener).

       
      <ol type="a">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ol>

      Om du lägger till typattributet i taggen

        återges följande uppdaterade vy:

        Utöver typattributet finns det två andra attribut som du kan använda med taggen

          : start och reversed.

          Startattributet låter dig börja beställa från vilken position som helst med hjälp av ett heltalsvärde. Till exempel, om du lägger till start=”3″ till

            -taggen, utan att ange en typ, kommer den att börja ordna listan från nummer tre. Om du tilldelar en typ=”a” eller en typ=”I” börjar den beställas från c respektive III.

             
            <ol type="I" start="3">
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ol>

            Koden ovan återger följande vy:

            Det omvända attributet låter dig vända om ordningen på listan. Den accepterar ett booleskt värde och dess standardvärde är falskt.

             
            <ol reversed="true">
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ol>

            Denna kod producerar följande utdata i webbläsaren:

            2. Oordnad lista

            Den oordnade listan låter dig gruppera relaterade objekt vars ordning inte är signifikant. Som standard använder en webbläsare en punkt för att märka varje objekt.

            För att skapa en ny oordnad lista måste du använda

              -taggen som ett överordnat element och

            • -taggen för varje listobjekt:

               <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
              </ul>

              Denna kod återger följande vy:

              Standardpunktstilen för en oordnad lista är en skiva. Tidigare kunde du använda ett typattribut för att ställa in punktstilen för en oordnad lista. Men det oordnade listtypsattributet är nu ett föråldrat attribut. Det rekommenderade alternativet för oordnad liststil är egenskapen CSS list-style-type.

               <style>
              ul { list-style-type: square; }
              </style>

              Koden ovan uppdaterar vyn till följande:

              CSS-egenskapen liststilstyp låter dig använda en samling olika punktstilar, inklusive cirklar, anpassade bilder, ikoner eller symboler. Med CSS som ändrar layouten på listobjekt kan du till och med använda osorterade listor för att skapa navigeringsfält.

              Kapslade listor

              En kapslad lista är ett listelement som är en del av en annan lista. Du kan skapa en kapslad lista med en kombination av ordnade och/eller oordnade listelement. Dessa strukturer kan representera mer komplexa hierarkier.

               <H3>Chicken Pasta Insturctions</H3>
              <ol>
                <li>Boil pasta.</li>
                <li>
                 Season chicken breast.
                  <ul>
                    <li>salt and pepper</li>
                    <li>paprika</li>
                    <li>garlic powder</li>
                    <li>Italian seasoning</li>
                  </ul>
                </li>
                <li>Heat olive oil in pot over medium-high heat.</li>
                <li>Add chicken breast to pan and cook for 5 minutes.</li>
                <li>Add heavy cream and parmesan cheese to empty pot.</li>
                <li>Add pasta and slice chicken to cream sauce.</li>
              </ol>

              Denna kod återger följande vy:

              3. Beskrivningslista

              Beskrivningslistelementet låter dig skapa en lista med termer och deras tillhörande detaljer. Taggen

              gör att du kan skapa en ny beskrivningslista, som du bör använda med elementen

              (beskrivningsterm) och

              (beskrivningsdetaljer).

               <h3>Popular Laptops</h3>
              <dl>
                <dt>MacBook Pro</dt>
                <dd>
                  Provides up to 22 hours of battery life,
                  has an advanced camera, and a magic keyboard with touch ID.
                </dd>

                <dt>MSI GS76 Stealth</dt>
                <dd>
                  A powerful gaming laptop with supercharged graphics and customized keys.
                </dd>
              </dl>

              Koden ovan återger följande vy:

              Organisera ditt innehåll med rätt HTML-lista

              HTML-listan som du väljer att använda i ditt webbutvecklingsprojekt bör bero på innehållet du vill presentera för dina användare. Till exempel, om du vill skapa en sekventiell lista, såsom stegen för att förbereda en måltid eller slutföra en uppgift, då är en ordnad lista det bästa alternativet.

              Men om du vill gruppera relaterad information som inte kräver en serie steg (som en checklista), så skulle en oordnad lista vara ett mer genomförbart alternativ. Dessutom, om du vill skapa en ordlista eller en lista med vanliga frågor, är en beskrivningslista det bättre valet.