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 ul
tag.
Jaki jest właściwy sposób, aby to zrobić? Jakieś pomysły?
źródło
Odpowiedzi:
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ć
źródło
<h1>
wewnątrz,<section>
ponieważ jest to nagłówek najwyższego poziomu w tych tagach.<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.W tym przypadku użyłbym listy definicji jako takiej:
źródło
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
lt
elementu . To nieoficjalna wersja robocza , którą omówi w HTML 5.2, nic więcej.źródło
<p>
. Ale nadal chciałbym coś bardziej wyraźnego, coś w rodzajufor
atrybutu 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.<div> to logiczny podział treści, semantycznie byłby to mój pierwszy wybór, gdybym chciał zgrupować nagłówek z listą:
następnie możesz użyć następującego css, aby stylizować wszystko razem jako jedną jednostkę
źródło
Możesz także użyć
<figure>
elementu, aby połączyć nagłówek z listą w następujący sposób:Źródło: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (przykład 162)
źródło
Spróbuj zdefiniować nową klasę, ulheader, w css. p.ulheader ~ ul wybiera wszystko, co następuje bezpośrednio po My Header
źródło
Według w3.org (zauważ, że ten link znajduje się w nieaktualnej wersji roboczej specyfikacji HTML 3.0 ):
źródło
HTML 3.0
To naprawdę stary dokument.Nagłówek umieściłem wewnątrz ul. Nie ma reguły mówiącej, że UL musi zawierać tylko elementy LI.
źródło