Jaki jest właściwy sposób umieszczenia podpisu semantycznego na liście HTML? Na przykład poniższa lista ma „tytuł” / „podpis”.
Owoc
- jabłko
- Gruszka
- Pomarańczowy
Jak należy traktować słowo „owoc”, aby było ono semantycznie powiązane z samą listą?
Jaki jest właściwy sposób umieszczenia podpisu semantycznego na liście HTML? Na przykład poniższa lista ma „tytuł” / „podpis”.
Owoc
Jak należy traktować słowo „owoc”, aby było ono semantycznie powiązane z samą listą?
Odpowiedzi:
Chociaż nie ma elementu podpisu ani nagłówka, który skutecznie strukturyzuje kod, może mieć ten sam efekt. Oto pewne sugestie:
Lista zagnieżdżona
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Nagłówek przed listą
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Lista definicji
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
<ul>
(lub dowolnego innego elementu na poziomie bloku) jako elementu podrzędnego a <p>
jest nieprawidłowe zgodnie ze specyfikacją HTML , która stwierdza, że <p>
węzły potomne mogą mieć tylko „zawartość frazującą”.
opcja 1
HTML5 ma elementy figure
ifigcaption
, które moim zdaniem działają całkiem nieźle.
Przykład:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
Są one następnie łatwo stylizowane za pomocą CSS.
Opcja 2
Przyjemnym rozwiązaniem może być użycie pseudoelementu :: before w CSS3:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
Możesz oczywiście użyć innego selektora niż ul[title]
; na przykład możesz dodać klasę „tytuł-jako-nagłówek” i użyć ul.title-as-header::before
zamiast niej lub czego potrzebujesz.
Ma to efekt uboczny polegający na wyświetleniu podpowiedzi dla całej listy. Jeśli nie chcesz takiej podpowiedzi, możesz zamiast tego użyć atrybutu danych (np. <ul data-title="fruit">
I ul[data-title]::before { content: attr(data-title); }
).
figure
można ich używać z treściami innymi niż obrazy?
O ile mi wiadomo, w aktualnych specyfikacjach HTML nie ma przepisów dotyczących umieszczania podpisu dla listy, tak jak ma to miejsce w przypadku tabel. Zostałbym na razie przy użyciu sklasyfikowanego akapitu lub tagu nagłówka.
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
W przyszłości, gdy HTML5 zyska szersze zastosowanie, będziesz mógł użyć tagów <legend>
i <figure>
, aby osiągnąć to nieco bardziej semantycznie.
Zobacz ten post na liście mailingowej W3C, aby uzyskać więcej informacji.
Aby upewnić się, że czytniki ekranu łączą listę z powiązanym nagłówkiem, możesz użyć aria-labelledby
połączenia z nagłówkiem o id
podobnej treści:
<h3 id="fruit-id">Fruit</h3>
<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Jak wspomniano w poprzedniej odpowiedzi, upewnij się, że poziom nagłówków jest zgodny z kolejnością nagłówków w dokumencie.
Wiem, że to stare, ale chciałem dodać odpowiedź, którą znalazłem dla przyszłych ludzi: https://www.w3.org/MarkUp/html3/listheader.html
użyj <lh>
elementu:
<ul>
<lh>Types of fruit:</lh>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
Ponieważ próbowałem znaleźć rozwiązanie obsługujące starszą przeglądarkę, mam rozwiązanie, które może być zbyt uproszczone. Korzystanie ze stylów wyświetlania tabel i identyfikatorów / klas:
<ul>
<li id="listCaption">My List</li>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Następnie zastosuj display: table-row;
styl do elementu w CSS:
li#listCaption {
display: table-row;
font-size: larger;
text-decoration: underline; }
Działa to znacznie lepiej, jeśli używasz listy opisów, co robiłem, gdy miałem to samo pytanie. W takim przypadku możesz użyć <div>
w HTML i display: table-caption;
CSS, ponieważ elementy div są obsługiwane na liście dl:
<dl>
<div id="caption">Table Caption</div>
<dt>term</dt>
<dd>definition</dd>
</dl>
W CSS możesz zastosować różne style do podpisu:
#caption {
display: table-caption;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background: transparent;
caption-side: top;
text-align: center; }
Powinienem zauważyć, że table-caption
nie działa tak dobrze wul/ol
ponieważ jest traktowany jako element blokowy, a tekst zostanie wyrównany w pionie, czego prawdopodobnie nie chcesz.
Przetestowałem to w przeglądarce Firefox i Chrome.
Zawsze możesz użyć, <label/>
aby powiązać etykietę z elementem listy:
<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>