För att nästla HTML-listor korrekt placerar du varje underlista inuti det listelement som den hör till, före elementets avslutande tagg. Den här guiden visar hur du skapar, sparar och förhandsgranskar ett exempel med tre nivåer med TextEdit och Safari på en Mac.

Var hör en nästlad HTML-lista hemma?

En HTML-lista har två strukturella delar: en listbehållare och dess listelement. Använd <ul> för en oordnad lista och <ol> för en ordnad lista. Varje vanligt listelement omsluts av <li> och </li>. En nästlad lista hör hemma inuti ett av dessa listelement. Googles guide till listor visar exakt detta nästlingsmönster.

Den grundläggande ordningen är: öppna det överordnade listelementet, skriv dess etikett, infoga den fullständiga underlistan och stäng sedan det överordnade listelementet. Om du håller den avslutande taggen synlig blir det lättare att kontrollera relationen.

Det här korrekta HTML-fragmentet ger Grupp A två underordnade element samtidigt som Grupp B ligger kvar på den yttre nivån:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Läs de avslutande taggarna inifrån och ut. Först stängs varje underordnat listelement. Sedan stängs den inre listan med </ul>. Därefter stängs Grupp A med </li>. Först efter det börjar Grupp B. Det ger dig en praktisk kontroll: hitta det överordnade listelementets öppnings- och avslutande taggar och bekräfta att hela underlistan ligger mellan dem.

HTML-standarden tillåter att <li>-element innehåller flödesinnehåll, däribland listor. Innehållsmodellen för <ul> och <ol> tillåter listelement och skriptstödjande element; den tillåter inte en annan listbehållare direkt inuti den yttre behållaren. Se HTML-standardens definitioner av grupperingsinnehåll.

Välj listtyp separat på varje nivå

Fråga dig om det skulle ändra betydelsen att ändra ordningen på listelementen. Om ja, väljer du <ol>. Om elementen är en samling vars betydelse inte beror på ordningsföljden väljer du <ul>. Ställ frågan separat för varje underlista. Mozillas dokumentation om ordnade listor förklarar både ordningstestet och hur man blandar listtyper.

I det genomarbetade exemplet nedan är Grupp A och Grupp B neutrala kategorier, så den yttre listan är oordnad. Objekt A1 och Objekt A2 är också en oordnad samling. Under Objekt A2 kommer det att öppna ett exempeldokument före namnbytet, så de två instruktionerna använder en ordnad lista.

Innehållsrelation Listval Placering
En samling grupper <ul> Runt gruppelementen
Element som hör till Grupp A <ul> Inuti Grupp A:s <li>
En sekvens som hör till Objekt A2 <ol> Inuti Objekt A2:s <li>
Element som hör till Grupp B <ul> Inuti Grupp B:s separata <li>

Det krävs ingen annan nästlingsteknik för att byta från punkter till siffror. Det överordnade listelementet omsluter fortfarande hela underlistan. Mozillas dokumentation stöder uttryckligen nästling av ordnade och oordnade listor tillsammans på flera nivåer. Användningsanteckningar för ordnade listor

Skapa ett fullständigt dokument med nästlade listor i TextEdit

Följande exempel är ett fullständigt HTML-dokument. Det använder syntetiska etiketter och kräver inga nedladdade resurser eller ytterligare kod. Strukturen innehåller fyra listor och åtta listelement: två yttre grupper, fyra element fördelade mellan grupperna och två instruktioner under Objekt A2.

I TextEdit väljer du Arkiv > Nytt och sedan Format > Gör till oformaterad text. Klistra in hela exemplet nedan. Apple beskriver detta arbetsflöde med oformaterad text för att skapa HTML-filer i sin HTML-guide för TextEdit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Välj Arkiv > Spara, namnge filen nested-lists.html och spara den på en plats som är lätt att hitta. Om TextEdit frågar vilket tillägg du vill använda väljer du Använd .html. Detta är Apples dokumenterade steg för att spara HTML. Kopiera bara koden inuti det inhägnade kodblocket; utelämna Markdown-raderna som avgränsar kodblocket.

I Finder markerar du den sparade filen och väljer Arkiv > Öppna med > Safari. Apple beskriver hur du väljer ett program via Arkiv > Öppna med i Välj en app för att öppna en fil på Mac.

Jämför förhandsvisningen med de här förväntade relationerna:

  • Grupp A och Grupp B är syskon på den yttre nivån.
  • Objekt A1 och Objekt A2 hör till Grupp A.
  • De två numrerade instruktionerna hör endast till Objekt A2.
  • Objekt B1 och Objekt B2 hör till Grupp B.

Kontrollera dessa relationer mot källkoden såväl som mot visningen. Exemplet har kontrollerats programmatiskt avseende explicita taggar och relationer mellan listor och deras överordnade element; dess utseende i Safari har inte testats här.

Felsök en underlista som är kopplad till fel listelement

Använd följande ordning när ett befintligt dokument har rätt ord men fel hierarki. Arbeta med ett överordnat element och dess närmaste underordnade element i taget, med början i den yttre listan.

1. Hitta ett överordnat listelement som stängs för tidigt

Det här felaktiga fragmentet stänger Grupp A innan underlistan börjar:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

Här är den inre <ul> ett direkt underordnat element till den yttre <ul>. Flytta Grupp A:s </li> nedanför den inre </ul> så att det överordnade listelementet omsluter underlistan. Den här korrigeringen följer placeringsregeln som illustreras i Googles exempel på nästlade listor.

2. Kontrollera om strukturen är giltig men har fel överordnat element

En lista kan följa nästlingsreglerna och ändå beskriva fel relation. Om du till exempel placerar de numrerade instruktionerna inuti Objekt A1 kopplas de till Objekt A1, även om den avsedda etiketten var Objekt A2. Korrekt syntax räcker inte i sig för att uttrycka den gruppering du avser.

För varje underlista frågar du: ”Vilket listelements öppningstagg omsluter hela den här listan?” Jämför elementets etikett med det avsedda överordnade elementet. I det fullständiga exemplet ska du, när du följer de numrerade instruktionerna utåt, komma till Objekt A2 och därefter Grupp A. Om du kommer till en annan etikett flyttar du hela underlistan innan du justerar utseendet.

3. Skriv ut avslutande taggar tydligt medan du redigerar

Under vissa förutsättningar tillåter HTML att det avslutande </li> utelämnas, bland annat när ett annat listelement följer direkt efter. Du behöver inte använda den förkortningen. Skriv varje avslutande tagg för listelement medan du lär dig eller reparerar nästlingen, så att varje gräns syns. Mozilla listar de exakta villkoren för att utelämna taggen i sin tekniska sammanfattning av listelement.

Använd konsekvent indrag som hjälp vid redigering: dra in en underlista under dess överordnade etikett och justera motsvarande öppnings- och avslutande listtaggar. Kontrollera sedan de faktiska tagggränserna. Indrag gör den avsedda relationen lättare att läsa; det är de omslutande elementen som fastställer den.

4. Håll styckeomslutningar inom sina egna gränser

Om etiketten för ett överordnat listelement behöver ett stycke stänger du stycket innan du öppnar underlistan, samtidigt som båda hålls inuti det överordnade listelementet. HTML-standarden anger att listbehållare inte kan vara underordnade element till <p>-element. HTML-regler för styckesinnehåll

Det här giltiga fragmentet håller etikettstycket och underlistan tillsammans inuti Grupp A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Öppna källkoden igen och bevara hierarkin när du gör ändringar

Om du öppnar filen i TextEdit igen och ser formaterat innehåll i stället för taggar väljer du Arkiv > Öppna, markerar filen, klickar på Visa alternativ, markerar Ignorera kommandon för RTF och klickar på Öppna. För framtida filer erbjuder Apple också TextEdit > Inställningar > Öppna och spara och alternativet Visa HTML-filer som HTML-kod i stället för formaterad text. Visa HTML som kod i TextEdit

När du flyttar ett listelement flyttar du hela dess <li>-block, inklusive eventuella underlistor. Om du till exempel flyttar Objekt A2 måste du även flytta dess två instruktioner. Om du bara flyttar etiketten blir instruktionerna kvar och dokumentets avsedda gruppering ändras.

Innan du sparar en revidering kontrollerar du tre saker: att varje underlista omsluts av det avsedda överordnade listelementet, att syskonlistelementen ligger kvar i rätt ordning och att varje lista använder punkter eller numrering beroende på om ordningsföljden spelar roll. Spara filen, öppna den i Safari igen och jämför de synliga grupperna med din avsedda disposition. Om du håller varje överordnat element tillsammans med hela dess undertree blir framtida ändringar enklare att kontrollera.

Källor