Elemen HTML Lists yang Semantik pada Konten

Beberapa kesalahan saat menggunakan, menyajikan markah lists pada konten yang bersifat teknis atau tutorial, mungkin saja terjadi. Kesalahan tersebut bisa menyebabkan konten tidak lolos test validasi HTML menggunakan perangkat W3C Markup Validator. Bagi blogger yang cinta pada badge atau logo validasi serta mempunyai semangat untuk berdisiplin dalam coding, tentu sebuah pengalaman yang tidak menyenangkan hati ketika harus berhadapan dengan kata inkonsistensi.

Haruskah kemudian menjadi jera dan menanggalkan cara penulisan markah HTML lists yang semantik dari sebuah konten ? Jangan pernah (pikirkan dan lakukan).

Sekilas tentang HTML Lists

HTML telah menyediakan 3 (tiga) mekanisme untuk menentukan daftar informasi (lists of information), yaitu ;

Unordered List

Elemen HTML ini dituliskan dengan kode markah (tag) <ul></ul>. Pada konteks penulisan sebuah konten (tulisan ini), tag ul dapat dimanfaatkan untuk menempatkan daftar item ( li ) yang tidak memerlukan penekanan khusus.

Ordered List

Dalam HTML, elemen ini dikodekan dengan tag <ol></ol>. Berkebalikan dengan tag ul, pada konteks penulisan sebuah konten, tag ol dipergunakan untuk menempatkan daftar item (li) yang memerlukan penekanan khusus. Misalnya, untuk menuliskan langkah-langkah yang harus dilakukan pada sebuah konten tutorial.

Definition List
Daftar definisi dibuat menggunakan elemen <dl></dl>. Pada sebuah konten, elemen HTML ini biasanya dipergunakan untuk menuliskan beberapa istilah beserta definisi atau penjelasannya. (seperti yang sedang anda baca saat ini).

Lebih lanjut tentang elemen-elemen list pada HTML dapat dibaca di W3C-Standar Spesifikasi List.

Elemen List yang Semantik pada Konten

Pada tujuan yang berbeda dari tulisan ini, seperti untuk membangun struktur website yang accessible dan navigable, tag ul biasanya dipergunakan untuk membangun blok menu berisi daftar tautan, pranala antar halaman atau posting. Lebih lanjut, dapat dibaca pada tulisan tag ul untuk list pranala menu. Jangan lupa membaca tautan komentar dari unessential weblog-nya Pak Dani Iswara.

Kembali pada interpretasi penggunaan elemen lists HTML yang semantik pada konten, tulisan ini tidak bermaksud menjelaskan benefit yang didapat dari disiplin koding dengan markah HTML yang benar, valid, dan berguna. Tetapi contoh penerapan langsung elemen lists HTML pada tulisan ini, dilakukan pada pendekatan :

  1. Semboyan WordPress

    WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability.

    Pengguna WordPress tentu tidak asing dengan semboyan diatas. Selanjutnya bagaimana jika dihadapkan pada tantangan penulisan yang semantik menggunakan elemen lists untuk istilah-istilah "aesthetics", "web standards", dan "usability" diatas ?. Yup. Karena heading yang saya pergunakan hanya sampai level-4, maka ;

    • Markah elemen list HTML berikut seharusnya sudah sama-sama semantik :

      aesthetics
      aesthetics adalah blah blah blah…
      web-standards
      web-standards adalah blah blah blah…
      usability
      usability adalah blah blah blah…
      <ol>
       <li>
        <h4>Semboyan WordPress</h4>
        <blockquote><p>WordPress is...</p></blockquote>
        <p>Pengguna WordPress...</p>
        <ul>
         <li>
         <p>Markah elemen list...</p>
         <dl>
          <dt><strong>aesthetics</strong></dt>
          <dd>aesthetics adalah blah blah blah...</dd>
          <dt><strong>web-standards</strong></dt>
          <dd>web-standards adalah blah blah blah...</dd>
          <dt><strong>usability</strong></dt>
          <dd>usability adalah blah blah blah...</dd>
         </dl>
         </li>
        </ul>
       </li>
      </ol>
      
    • Jika dibandingkan dengan penggunaan markah list seperti berikut :

      • aesthetics

        aesthetics adalah blah blah blah…

      • web-standards

        web-standards adalah blah blah blah…

      • usability

        usability adalah blah blah blah…

      <ol>
       <li>
        <h4>Semboyan WordPress</h4>
        <blockquote><p>WordPress is...</p></blockquote>
        <p>Pengguna WordPress...</p>
        <ul>
         <li>
         <p>Jika dibandingkan dengan...</p>
         <ul>
          <li>
           <h5>aesthetics</h5>
           <p>aesthetics adalah blah blah blah...</p>
          </li>
          <li>
           <h5>web-standards</h5>
           <p>web-standards adalah blah blah blah...</p>
          </li>
          <li>
           <h5>usability</h5>
           <p>usability adalah blah blah blah...</p>
          </li>
         </ul>
         </li>
        </ul>
       </li>
      </ol>
      
  2. Konten yang Adaptable dengan Elemen HTML-Lists

    Jika pada tulisan sebelumnya (yang tersebut diatas), penggunaan elemen lists dilakukan dari sudut interpretasi navigable. Maka dalam tulisan ini penggunaan elemen lists pada sebuah konten diambil dari sudut interpretasi Adaptable

    Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

    Sebuah konten sebaiknya dapat dipresentasikan, disajikan juga dengan beberapa cara tanpa harus kehilangan informasi dan atau strukturnya. Petikan dibawah ini adalah diskripsi "Penggunaan ol, ul dan dl untuk lists atau daftar item", yang diambil dari dokumen rekomendasi "Techniques for WCAG 2.0" pada teknik HTML dan XHTML

    …create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists (dl) are used to group terms with their definitions…

Sekali lagi, jika ada yang mempertanyakan benefit dari disiplin koding. Jawabannya tidak ada kecuali hanya sebuah kalimat "This document was successfully checked as… Result:Passed". Tetapi dengan memberikan struktur yang semantik dalam sebuah konten, termasuk didalamnya penggunaan elemen lists secara tepat-guna (seperti maksud yang terkandung pada tulisan ini). Maka, setidaknya konten yang dibuat telah siap dibaca mesin, Assitive Technologies dan manusia, baik yang normal serta yang disebut sebagai penyandang disabilitas.

ug13usc131

Elemen HTML Lists yang Semantik pada Konten

Published on : May 27, 2010. Last modified at : May 29, 2010.


Click to share on twitter , digg it, or save this article to del.icio.us.

article Navigation

Related to “Elemen HTML Lists yang Semantik pada Konten”.

10 Opinion for “Elemen HTML Lists yang Semantik pada Konten”.

Menurut saya, untuk penjabaran memang lebih semantik memakai dl, dt, dd. Sedangkan pemakaian ol, ul, li lebih mudah diacu. Misal pada konten berjudul ’10 tips blah blah blah’. Atau tetap memakai dt dengan penomoran manual? Saya kurang suka menomori manual ini.

[OOT] BTW kontras di kuotasi sepertinya agak mengganggu saya, Pakde. :)
Kemudian elemen abbr tanpa title itu, saya kurang yakin manfaatnya.

Rayimas,…
1. Terima kasih tambahannya.
2. Kontras kuotasi sudah dibenahi, mudah-mudahan cukup nyaman. (maaf)
3. Tentang abreviasi ;
– Meskipun masih dalam status WD, tetapi sepertinya spec HTML5 (#text-level-semantics.html) mengijinkan penggunaannya. Jaga-jaga saja, siapa tahu kelak harus upgrade ke HTML5.
– Beberapa yang ikut berkontribusi pada proyek tersebut (WG), sudah mulai menggunakannya. Cuma belum sempat menanyakan via surel tentang alasan/benefit penulisan elemen abbr tanpa ekspansi atribut title. (Coba gih, Rayimas saja yang kontak Ian)
4. Tulisan ini sebenarnya untuk uji nyali saja, karena yang lalu-lalu khan selalu bermasalah dengan elemen block yang menyebalkan ini. come on… Rayimas juga tahu kekeliruan-kekeliruan yang lalu tersebut khan :)

[OOT] yang abbr itu sepertinya debatable dari dulu. Ada yang akhirnya memilih cara aman dengan mengulang kepanjangan singkatan yang ada tiap blok paragraf baru. Mungkin nanti ada kalimat ‘…until assistives technology supports…’ :)

Rayimas,…
Memaksa saya untuk berandai-andai lagi dong. Frontal ga ya ? Ngeri juga nich. Gini aja dech,…
"Page Speed(Optimization) + Chrome(UA-peramban) + Android(OS) + …?…(Assitive Technology) + Ian(HTML5)". Yang tanda-tanya [?] itu yang gawat, jika berandai-andai tentang para pengembang dan 'borongan proyek massalnya'. Siapa yang bakal nyusul quirks… ya ?

Jika memang tidak diharuskan–mis. untuk percobaan, latihan, edukasi, dll., maka HTML5, CSS3, saran pengoptimalan terbaru, atau validasi strict pun tidak harus dituruti kan, Pakde?

Why bother Rayimas.. mm… I mean, who cares ? we have our own main stream, isn’t it ? :(
Apa unessential weblog mau ganti tagline ?, klo learning around from null sih tetep pengen standar (suntikan racunmu sudah terlanjur menjalar kemana-mana. :)
Tapi, ngemeng-ngemeng latah &#34; dan &#39; kebawa kesono, sekarang gantian dash dash melorot kesini. :D :D

Maaf, saya sering OOT kalau komen di blog ini.
Ada pertanyaan seputar tautan dengan anchor link berupa titik (.) dan koma (,) pada tulisan di atas. Kira2 itu kesengajaan ya pak dhe? apa pula maksud, tujuan, dan sasaran tersebut?

Mas Adi,…
Tenang saja, saya tidak mematok harus on topics koq. Yang penting jangan kejauhan, Deal :)
Untuk hal tersebut, hanya sebatas preventif saja. Pernah lihat yang pakai kata 'saya', 'aku' dan seterusnya untuk menjegal tukang copas membabi-buta khan ?. Rasanya, kita sama-sama sedang proses diet plugin dech ? Selain itu untuk trial-error saja tentang internal link versus eksternal link.

[…] Elemen HTML Lists pada Konten dari Pakde Handoko Harry, 2010. […]

[…] dipergunakan untuk menuliskan beberapa istilah beserta definisi atau penjelasannya. Dikutip dari Elemen HTML Lists yang Semantik pada Konten (side22.com). Selain itu, juga cocok untuk penggunaan konten berupa tanya jawab. Seperti yang […]

Leave an Opinion

Important : LOW isn't intended to on topic opinions, just be polite. You may use strict markup only. Opinions failing these requirement will be edited. Spam opinion won't get published.
Please, enter your real name and your valid email address (in required field). Don't worry, i'll kept your email private.










Random Learning