Cara menambahkan judul ke daftar secara semantik


120

Ini telah mengganggu saya untuk sementara waktu, dan saya bertanya-tanya apakah ada konsensus tentang bagaimana melakukan ini dengan benar. Saat saya menggunakan daftar HTML, bagaimana cara menyertakan header untuk daftar secara semantik?

Salah satu opsinya adalah ini:

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

tetapi secara semantik, <h3>tajuk tidak secara eksplisit dikaitkan dengan<ul>

Opsi lainnya adalah ini:

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

tetapi ini tampaknya agak kotor, karena judulnya sebenarnya bukan salah satu item daftar.

Opsi ini tidak diperbolehkan oleh W3C:

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

sebagai <ul>'s hanya dapat berisi satu atau lebih <li>' s

"Judul daftar" lama <lh>paling masuk akal

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

tapi tentu saja ini bukan bagian resmi dari HTML

Saya pernah mendengarnya menyarankan agar kami menggunakan <label>seperti formulir:

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

tapi ini agak aneh dan toh tidak akan valid.

Sangat mudah untuk melihat masalah semantik saat mencoba memberi gaya pada tajuk daftar saya, di mana saya akhirnya harus meletakkan <h3>tag saya di bagian pertama <li>dan menargetkannya untuk penataan dengan sesuatu seperti:

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

kengerian! Tapi setidaknya dengan cara ini saya bisa mengontrol keseluruhan <ul>, heading dan semuanya, dengan memberi style pada ultag.

Apa cara yang benar untuk melakukan ini? Ada ide?


5
Beberapa orang menggunakan LH, tetapi mungkin tidak menyadari bahwa mereka sebenarnya tidak menggunakan tag HTML "asli", tetapi hanya membuat nama tag acak. Browser memperlakukan tag seperti itu sebagai elemen sebaris. Beberapa akan memungkinkan Anda untuk menempatkan kelas dan css di atasnya.
Glen Little


Jawaban:


81

Seperti yang Felipe Alsacreations katakan, opsi pertama baik-baik saja.

Jika Anda ingin memastikan bahwa tidak ada di bawah daftar yang ditafsirkan sebagai milik heading, untuk itulah elemen konten pembagian HTML5 digunakan. Jadi, misalnya Anda bisa melakukannya

<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. -->

6
Ini sangat masuk akal; Terima kasih. Tentu saja, jika kita akan menggunakan HTML5, tajuk harus berada <h1>di dalam <section>karena itu adalah tajuk tingkat atas dalam tag tersebut.
Tomas Mulder

6
Anda bisa menggunakannya di <h1>sana, tentu. Tapi <h3>oke juga. Selama Anda tidak menggunakan tajuk tingkat yang lebih tinggi dalam bagian yang sama.
Alohci

4
Kita harus tetap menggunakan judul h1..h6 (di sini h2 dan h3) selama browser, pembaca layar, dan teknologi pendukung lainnya tidak menjelaskan judul dengan benar seperti yang dinyatakan dalam HTML5 (lihat coding.smashingmagazine.com/2011/08/16/ … - telusuri "alis" ...). Saya tidak yakin seberapa banyak itu berkembang dalam beberapa bulan, tapi mungkin tidak secepat itu berkaitan dengan API aksesibilitas browser: /
FelipeAls

3
@davidjb - hati-hati, bukan itu yang dikatakan oleh nasihat itu. Dikatakan bahwa h1-h6 harus digunakan untuk memberikan level heading. yaitu bahwa elemen h1 hanya boleh digunakan untuk level tertinggi dari heading pada halaman. Tidak dikatakan bahwa hanya ada satu heading di level tertinggi itu. Secara kebetulan, pembuat browser telah menjelaskan bahwa mereka tidak berniat menerapkan algoritme garis besar, jadi hanya ada sedikit harapan untuk memperbaiki situasi dengan cepat.
Alohci

2
@Michele - Itu tergantung pada apakah yang Anda maksud secara visual di tengah, atau secara semantik di tengah. Jika secara visual, maka itu adalah masalah bagi CSS untuk dipilah, dan idealnya tidak akan mengubah mark-up Anda. Jika secara semantik, maka saya tidak yakin jenis daftar apa yang Anda miliki. Mungkin Anda punya dua daftar, bukan satu.
Alohci

53

Dalam hal ini saya akan menggunakan daftar definisi sebagai berikut:

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

5
Untuk daftar hal-hal yang tidak berurutan yang dijelaskan oleh label, seperti contoh di atas, menurut saya ini adalah pilihan terbaik. Semantiknya sama persis: Ini adalah istilah atau label (Buah yang saya suka), dan berikut adalah item yang sesuai dengan label itu (setiap buah).
Andrew

1
Ini benar-benar daftar deskripsi . Ini adalah solusi terbaik imo.
Derek 朕 會 功夫

display: list-item ... CSS untuk menampilkan peluru. Jawaban yang bagus.
Mycah

9

Pilihan pertama Anda adalah yang bagus. Ini yang paling tidak bermasalah dan Anda sudah menemukan alasan yang benar mengapa Anda tidak dapat menggunakan opsi lain.

Ngomong-ngomong, heading Anda IS secara eksplisit terkait dengan <ul>: itu tepat sebelum daftar! ;)

edit: Steve Faulkner, salah satu editor dari W3C HTML5 dan 5.1 telah digambarkan definisi dari sebuah ltelemen . Itu adalah draf tidak resmi yang akan dia diskusikan untuk HTML 5.2, tidak lebih.


1
Saya setuju, solusi lain sama sekali tidak masuk akal

Benar, seperti menggunakan judul di atas a <p>. Tapi saya masih ingin sesuatu yang lebih eksplisit, seperti foratribut untuk <label>' or the <th> `untuk tabel. Saya pikir <lh>opsi ini paling masuk akal jika benar-benar didukung oleh W3C.
Tomas Mulder

5

a <div> adalah divisi logis dalam konten Anda, secara semantik ini akan menjadi pilihan pertama saya jika saya ingin mengelompokkan judul dengan daftar:

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

maka Anda dapat menggunakan css berikut untuk menata semuanya menjadi satu unit

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

Pilihan yang bagus, setidaknya untuk tujuan penataan.
Tomas Mulder

Div berbicara semantik tidak berarti apa-apa, saya tidak mengerti mengapa itu akan menjadi pilihan pertama Anda (di luar masalah gaya)? : x
Rambobafet

@Rambobafet, necromancy yang bagus! Jawaban itu berasal dari 2012, sebelum html5 memperkenalkan bagian dan opsi lain yang lebih semantik benar. Beberapa browser sudah mendukung bagian, tetapi beberapa tidak. "div" adalah singkatan dari "pembagian logis" dalam konten Anda, jadi pada saat itu itulah cara terbaik untuk membagi konten Anda untuk gaya.
Evert

Anda benar sekali, tidak melihat bagian "'12" :)
Rambobafet


0

Coba definisikan kelas baru, ulheader, di css. p.ulheader ~ ul memilih semua yang langsung mengikuti My Header

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

-2

Menurut w3.org (perhatikan bahwa tautan ini ada dalam draf spesifikasi HTML 3.0 yang kedaluwarsa ):

Daftar tak berurutan biasanya adalah daftar item berpoin. HTML 3.0 memberi Anda kemampuan untuk menyesuaikan peluru, untuk dilakukan tanpa peluru dan untuk membungkus item daftar secara horizontal atau vertikal untuk daftar multikolom.

Tag daftar pembuka harus <UL>. Ini diikuti oleh header daftar opsional ( <LH>keterangan </LH>) dan kemudian oleh item daftar pertama ( <LI>). Sebagai contoh:

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

yang dapat diterjemahkan sebagai:

Buah Meja

  • apel
  • jeruk
  • pisang

Catatan: Beberapa dokumen lama mungkin menyertakan header atau teks biasa sebelum elemen LI pertama. Pelaksana agen pengguna HTML 3.0 disarankan untuk memenuhi kemungkinan ini untuk menangani dokumen lama yang berformat buruk.


8
Downvoting karena tautan "menurut" ini merujuk pada spesifikasi draf 3.0 dari tahun 1995, yang tidak pernah keluar dari draf. Tag "lh" tidak pernah berhasil menjadi spesifikasi HTML non-draf.
Brooks Moses

HTML 3.0Wah, itu dokumen yang sangat tua.
Derek 朕 會 功夫

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.