Jak semantycznie dodać nagłówek do listy

120

Od jakiegoś czasu mnie to niepokoi i zastanawiam się, czy istnieje jakikolwiek konsensus co do tego, jak to zrobić poprawnie. Kiedy używam listy HTML, jak semantycznie dołączyć nagłówek listy?

Jedna opcja jest taka:

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

ale semantycznie <h3>nagłówek nie jest jawnie powiązany z<ul>

Inna opcja jest taka:

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

ale wydaje się to trochę brudne, ponieważ nagłówek nie jest tak naprawdę jednym z elementów listy.

Ta opcja nie jest dozwolona przez W3C:

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

as <ul>może zawierać tylko jeden lub więcej <li>plików

<lh>Najbardziej sensowny jest stary „nagłówek listy”

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

ale oczywiście nie jest oficjalnie częścią HTML

Słyszałem, że sugeruje, abyśmy używali <label>tak jak formularza:

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

ale jest to trochę dziwne i i tak się nie sprawdzi.

Łatwo jest zauważyć problemy semantyczne, próbując stylizować moje nagłówki listy, gdzie ostatecznie muszę umieścić moje <h3>tagi w pierwszym <li>i skierować je do stylizacji za pomocą czegoś takiego:

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

horrory! Ale przynajmniej w ten sposób mogę kontrolować całość <ul>, nagłówki i wszystko, stylizując ultag.

Jaki jest właściwy sposób, aby to zrobić? Jakieś pomysły?

Tomas Mulder
źródło
5
Niektórzy ludzie używają LH, ale mogą nie zdawać sobie sprawy, że tak naprawdę nie używają „prawdziwego” znacznika HTML, ale po prostu tworzą losową nazwę znacznika. Przeglądarki traktują taki tag jako element wbudowany. Niektóre pozwolą ci umieścić na nim klasę i css.
Glen Little
1
Możliwy duplikat stackoverflow.com/questions/2417891/ ...
goodeye

Odpowiedzi:

81

Jak już powiedział Felipe Alsacreations, pierwsza opcja jest w porządku.

Jeśli chcesz mieć pewność, że nic poniżej listy nie zostanie zinterpretowane jako należące do nagłówka, właśnie do tego służą elementy treści sekcji HTML5. Na przykład możesz to zrobić

<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. -->
Alohci
źródło
6
To ma sens; dzięki. Oczywiście, jeśli zamierzamy używać HTML5, nagłówek powinien znajdować się <h1>wewnątrz, <section>ponieważ jest to nagłówek najwyższego poziomu w tych tagach.
Tomas Mulder,
6
Możesz <h1>tam użyć , oczywiście. Ale też <h3>jest OK. O ile nie używasz nagłówka wyższego poziomu w tej samej sekcji.
Alohci,
4
Powinniśmy trzymać się nagłówków h1..h6 (tutaj h2 i h3), o ile przeglądarki, czytniki ekranu i inne technologie pomocnicze nie przedstawiają poprawnie nagłówków zgodnie z HTML5 (patrz coding.smashingmagazine.com/2011/08/16/ … - wyszukaj „brwi”…). Nie jestem pewien, jak bardzo ewoluował w ciągu kilku miesięcy, ale prawdopodobnie nie tak szybko, jeśli chodzi o API ułatwień dostępu przeglądarek: /
FelipeAls
3
@davidjb - uważaj, nie jest to dokładnie to, co mówi ta rada. Mówi, że h1-h6 powinny być używane do określenia poziomów nagłówków. tzn. elementy h1 powinny być używane tylko dla najwyższego poziomu nagłówka na stronie. Nie mówi, że na tym najwyższym poziomie może istnieć tylko jeden nagłówek. Nawiasem mówiąc, twórcy przeglądarek jasno dali do zrozumienia, że ​​nie mają zamiaru implementować algorytmu konspektu, więc nie ma nadziei na szybką poprawę sytuacji.
Alohci
2
@Michele - To zależy od tego, czy masz na myśli wizualnie w środku, czy semantycznie w środku. Jeśli chodzi o wizualnie, to jest to problem dla CSS do uporządkowania i idealnie nie zmieniłoby twojego marży. Jeśli semantycznie, to nie jestem pewien, jakiego rodzaju masz listę. Być może masz dwie listy, a nie jedną.
Alohci
53

W tym przypadku użyłbym listy definicji jako takiej:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>
Duncan Tidd
źródło
5
W przypadku nieuporządkowanej listy rzeczy opisanych etykietą, jak w powyższym przykładzie, myślę, że jest to najlepszy wybór. Semantyka zgadza się dokładnie: oto termin lub etykieta (owoce, które lubię), a tutaj są elementy, które odpowiadają tej etykiecie (każdy owoc).
Andrew
1
To dosłownie lista opisowa . To najlepsze rozwiązanie imo.
Derek 朕 會 功夫
display: list-item ... CSS, aby wyświetlić punktory. Dobra odpowiedź.
Mycah,
9

Twoja pierwsza opcja jest dobra. Jest to najmniej problematyczne i już znalazłeś prawidłowe powody, dla których nie możesz użyć innych opcji.

Nawiasem mówiąc, twój nagłówek JEST wyraźnie powiązany z <ul>: jest tuż przed listą! ;)

edit: Steve Faulkner, jeden z redaktorów W3C HTML5 i 5.1 zostały nakreślone definicję danego ltelementu . To nieoficjalna wersja robocza , którą omówi w HTML 5.2, nic więcej.

FelipeAls
źródło
1
Zgadzam się, inne rozwiązania w ogóle nie mają sensu
To prawda, trochę jak nagłówek nad <p>. Ale nadal chciałbym coś bardziej wyraźnego, coś w rodzaju foratrybutu dla <label>' or the <th> `dla tabel. Myślę, że ta <lh>opcja miałaby największy sens, gdyby była faktycznie obsługiwana przez W3C.
Tomas Mulder,
5

<div> to logiczny podział treści, semantycznie byłby to mój pierwszy wybór, gdybym chciał zgrupować nagłówek z listą:

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

następnie możesz użyć następującego css, aby stylizować wszystko razem jako jedną jednostkę

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...
Wynicować
źródło
Dobry wybór, przynajmniej do stylizacji.
Tomas Mulder,
Semantycznie mówiąc div nic nie znaczy, nie rozumiem, dlaczego miałby to być twój pierwszy wybór (poza kwestią stylizacji)? : x
Rambobafet
@Rambobafet, wielka nekromancja! Ta odpowiedź pochodzi z 2012 roku, zanim html5 wprowadził sekcje i inne, bardziej poprawne semantycznie opcje. Niektóre przeglądarki już obsługują sekcję, ale niektóre nie. „div” to skrót od „logicznego podziału” w treści, więc w tamtych czasach był to najlepszy sposób dzielenia treści pod kątem stylizacji.
Evert
Masz
całkowitą
0

Spróbuj zdefiniować nową klasę, ulheader, w css. p.ulheader ~ ul wybiera wszystko, co następuje bezpośrednio po My Header

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}
jpenkethman
źródło
-2

Według w3.org (zauważ, że ten link znajduje się w nieaktualnej wersji roboczej specyfikacji HTML 3.0 ):

Lista nieuporządkowana to zazwyczaj lista pozycji z punktami. HTML 3.0 daje możliwość dostosowania punktorów, obejścia się bez punktorów i zawijania elementów listy w poziomie lub w pionie w przypadku list wielokolumnowych.

Otwierający tag listy musi być <UL>. Po nim następuje opcjonalny nagłówek listy ( <LH>podpis </LH>), a następnie pierwsza pozycja listy ( <LI>). Na przykład:

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

które można by renderować jako:

Owoce stołowe

  • jabłka
  • pomarańcze
  • banany

Uwaga: niektóre starsze dokumenty mogą zawierać nagłówki lub zwykły tekst przed pierwszym elementem LI. Implementatorom agentów użytkownika HTML 3.0 zaleca się uwzględnienie tej możliwości w celu obsługi źle utworzonych starszych dokumentów.

Jfields
źródło
8
Głosowanie w dół, ponieważ ten link „zgodnie z” wskazuje na wersję roboczą specyfikacji 3.0 z 1995 roku, która nigdy nie wyszła z wersji roboczej. Tag „lh” nigdy nie został uwzględniony w specyfikacji HTML nie będącej wersją roboczą.
Brooks Moses
HTML 3.0To naprawdę stary dokument.
Derek 朕 會 功夫