So fügen Sie einer Liste semantisch Überschriften hinzu

Das hat mich schon eine Weile beschäftigt, und ich frage mich, ob es einen Konsens darüber gibt, wie man das richtig macht. Wie füge ich bei Verwendung einer HTML-Liste semantisch einen Header für die Liste ein?

Eine Option ist folgende:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

aber semantisch ist die <h3>Überschrift nicht explizit mit dem verknüpft<ul>

Eine andere Option ist folgende:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Dies scheint jedoch etwas schmutzig zu sein, da die Überschrift nicht wirklich zu den Listenelementen gehört.

Diese Option ist vom W3C nicht zulässig:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

wie <ul>‚s nur eine oder mehr enthalten <li>s‘

Die alte "Listenüberschrift" <lh>ist am sinnvollsten

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Aber natürlich ist es nicht offiziell Teil von HTML

Ich habe gehört, es schlägt vor, dass wir <label>wie ein Formular verwenden:

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

aber das ist ein wenig seltsam und wird sowieso nicht validieren.

Es ist leicht, die semantischen Probleme zu erkennen, wenn ich versuche, meine Listenkopfzeilen zu formatieren. Am Ende muss ich meine <h3>Tags in die erste einfügen <li>und sie für die Gestaltung mit etwas wie:

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

Horror! Aber zumindest auf diese Weise kann ich die gesamte <ul>Überschrift und alles steuern, indem ich das ulTag gestalte.

Was ist der richtige Weg, um dies zu tun? Irgendwelche Ideen?

Wie Felipe Alsacreations bereits sagte, ist die erste Option in Ordnung.

Wenn Sie sicherstellen möchten, dass nichts unter der Liste als zur Überschrift gehörend interpretiert wird, sind die Inhaltselemente des HTML5-Abschnitts genau dafür vorgesehen. So könnten Sie zum Beispiel tun

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

In diesem Fall würde ich eine Definitionsliste wie folgt verwenden:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Ihre erste Option ist die gute. Es ist das am wenigsten problematische und Sie haben bereits die richtigen Gründe gefunden, warum Sie die anderen Optionen nicht verwenden konnten.

Übrigens ist Ihre Überschrift explizit mit dem verknüpft <ul>: Es steht direkt vor der Liste! ;)

edit: Steve Faulkner, einer der Editoren von W3C HTML5 und 5.1, hat eine Definition eines ltElements entworfen . Das ist ein inoffizieller Entwurf , den er für HTML 5.2 diskutieren wird, noch nichts mehr.

Ein <div> ist eine logische Unterteilung in Ihrem Inhalt. Semantisch wäre dies meine erste Wahl, wenn ich die Überschrift mit der Liste gruppieren möchte:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

Dann können Sie das folgende CSS verwenden, um alles zusammen als eine Einheit zu gestalten

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

Sie können das <figure>Element auch verwenden , um eine Überschrift wie folgt mit Ihrer Liste zu verknüpfen:

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Quelle: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Beispiel 162)

Versuchen Sie, eine neue Klasse, ulheader, in CSS zu definieren. p.ulheader ~ ul wählt alles aus, was unmittelbar auf My Header folgt

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

Laut w3.org (beachten Sie, dass dieser Link im längst abgelaufenen Entwurf der HTML 3.0-Spezifikation enthalten ist ):

Eine ungeordnete Liste ist normalerweise eine Liste mit Elementen mit Aufzählungszeichen. Mit HTML 3.0 können Sie die Aufzählungszeichen anpassen, auf Aufzählungszeichen verzichten und Listenelemente für mehrspaltige Listen horizontal oder vertikal umbrechen.

Das Eröffnungslisten-Tag muss sein <UL>. Es folgt ein optionaler Listenkopf ( <LH>Beschriftung </LH>) und dann das erste Listenelement ( <LI>). Beispielsweise:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

was gerendert werden könnte als:

Tafelobst

• Äpfel
• Orangen
• Bananen

Hinweis: Einige ältere Dokumente enthalten möglicherweise Überschriften oder einfachen Text vor dem ersten LI-Element. Implementierern von HTML 3.0-Benutzeragenten wird empfohlen, diese Möglichkeit zu berücksichtigen, um schlecht geformte Legacy-Dokumente zu verarbeiten.

Ich habe die Überschrift in die Ul gesetzt. Es gibt keine Regel, die besagt, dass UL nur LI-Elemente enthalten darf.