Gruppera flera termer och beskrivningar genom att placera ett eller flera dt-element före ett eller flera dd-element inuti ett dl. Den här guiden visar hur du väljer rätt gruppering, skapar en liten ordlista i TextEdit på en Mac och kontrollerar att sambanden förblir tydliga.

Hur grupperar en HTML-beskrivningslista termer?

En beskrivningslista representerar samband mellan namn och värden. Varje grupp innehåller minst en term och minst en beskrivning, och alla termer står före beskrivningarna. Nästa term efter en beskrivning inleder en ny grupp. Sambanden skapas av dokumentordningen. HTML-standarden: elementet dl

I en ordlista kan en term vara ett layoutord och beskrivningen förklara ordet. Flera termer i följd kan dela en beskrivning. Du behöver inte upprepa samma förklaring efter varje alternativt namn. MDN: Elementet description term

Den praktiska frågan är vad som hör ihop. Skriv ned varje avsett samband på vanlig svenska innan du skriver uppmärkningen. I det här fiktiva exemplet delar ”Gap” och ”Gutter” en förklaring, medan ”Tile” har två alternativa betydelser.

Avsett samband Struktur i en grupp
En term med en beskrivning Ett dt, följt av ett dd
Flera termer med en gemensam beskrivning Alla dt-element, följda av ett dd
En term med alternativa beskrivningar Ett dt, följt av flera dd-element
Flera termer med gemensamma alternativa beskrivningar Alla dt-element, följda av alla dd-element
En beskrivning med flera stycken Ett dd som innehåller styckena

De här mönstren följer standardens grupperingsregler. Separata beskrivningar representerar i synnerhet alternativa värden; stycken som hör till ett och samma värde ska ligga i samma dd. HTML-standarden: Semantik för beskrivningslistor

Vilka beskrivningar bör dela grupp?

Använd det här testet: kan varje beskrivning i den föreslagna gruppen rimligen gälla för varje term i gruppen? Om svaret är nej, dela upp innehållet i separata grupper. Det här är en redaktionell kontroll som bygger på sambandsmodellen och hjälper till att upptäcka oavsiktliga kopplingar innan innehållet publiceras.

Flera termer med en gemensam beskrivning

Det här kodavsnittet ger två fiktiva ordlistetermer en gemensam förklaring. Båda termerna står före beskrivningen, i enlighet med MDN:s dokumenterade mönster för flera termer. MDN: Flera termer, en beskrivning

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Tolka inte detta som två separata poster där beskrivningarna saknas. Exemplet behandlar avsiktligt de två namnen som en grupp. Om din egen ordlista ger dem olika betydelser ska du i stället ge varje namn en egen beskrivning.

En term med alternativa beskrivningar

En beskrivning kan följa efter en annan beskrivning i samma grupp. Här används ”Tile” i den påhittade ordlistan för två olika begrepp. MDN: Elementet description details

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Om flera namn delar samma alternativ placerar du de ytterligare termerna före den första beskrivningen. Utgå inte från att den första termen bara hör ihop med den första beskrivningen och den andra termen bara med den andra; då skulle separata grupper krävas. MDN dokumenterar uttryckligen hur flera termer och beskrivningar kan kombineras. MDN: Flera termer och beskrivningar

En beskrivning med flera stycken

Om det andra stycket utvecklar den första förklaringen ska du behålla båda i ett och samma dd. Ett dd tillåter flödesinnehåll, inklusive stycken. På så sätt bevaras en enda beskrivning samtidigt som den får en lättläst intern struktur. MDN: Teknisk sammanfattning av description details

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Skapa ett komplett exempel i TextEdit på din Mac

Börja med en ny fil så att du kan granska resultatet utan att ändra ett befintligt dokument. I TextEdit väljer du Arkiv > Nytt och sedan Format > Gör till ren text. Apple beskriver detta som utgångspunkten för att skapa en HTML-fil. Apple: Arbeta med HTML-dokument i TextEdit på Mac

Klistra in hela dokumentet nedan. Det kombinerar de tre besluten ovan i en liten ordlista. Varje grupp har en egen div-omslutning, en struktur som stöds för att tillämpa formatering eller attribut på en hel grupp. MDN: Omsluta namn-värde-grupper

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Välj Arkiv > Spara, namnge filen layout-glossary.html och klicka på Spara. Om TextEdit frågar vilket filnamnstillägg som ska användas väljer du Använd .html. Detta är Apples dokumenterade steg för att spara en handskriven HTML-fil. Apple: Skapa en HTML-fil

Öppna den sparade filen i webbläsaren. Jämför den visade texten med tre förväntade samband: ”Gap” och ”Gutter” delar en förklaring, ”Tile” har två beskrivningar och ”Canvas” har en beskrivning som innehåller två stycken. Använd jämförelsen för att kontrollera sambanden i ditt avsedda innehåll, även om webbläsarens standardavstånd skiljer sig från den design du föredrar.

Behåll grupperingen när du redigerar

HTML stöder antingen grupper med termer och beskrivningar direkt inuti dl eller grupper omslutna av div-element. Välj en struktur och använd den konsekvent i en viss lista. I den omslutna versionen ovan ska termerna och beskrivningarna i varje grupp ligga direkt i omslutningselementet; placera inte termerna och beskrivningarna i separata behållare. HTML-standarden: Innehållsmodell för beskrivningslistor

Använd den här korta kontrollistan när du reviderar exemplet:

  1. Hitta gruppen du vill ändra.
  2. Behåll alla dess termer före beskrivningarna.
  3. Avgör om ny förklarande text är ett ytterligare värde eller ett till stycke i den aktuella beskrivningen.
  4. Lägg till en ny fullständig grupp när du introducerar en orelaterad term.
  5. Spara dokumentet och ladda om förhandsvisningen i webbläsaren.

Om du till exempel lägger till ”Panel” mellan de två ”Tile”-beskrivningarna avbryter du det avsedda sambandet: nästa beskrivning hör då till den nyinledda gruppen. Placera i stället den nya termen och dess beskrivning i en egen omslutning. Detta följer standardens regel om att en term som kommer efter en beskrivning inleder en ny grupp. HTML-standarden: Grupperingsalgoritm

Om TextEdit öppnar filen igen som formaterad text väljer du Arkiv > Öppna, markerar dokumentet, klickar på Visa alternativ och väljer Ignorera kommandon för formaterad text innan du öppnar det. För framtida filer väljer du Visa HTML-filer som HTML-kod i stället för formaterad text under TextEdit > Inställningar > Öppna och spara. Apple: Visa ett HTML-dokument som kod

Fokusera den avslutande granskningen på betydelsen: identifiera termerna, identifiera deras gemensamma beskrivningar och kontrollera att styckebrytningar inte av misstag blir separata värden. När sambanden stämmer är ordlistan redo för den formatering som dokumentet behöver.

Källor