HTML & CSS untuk Pemula (Bagian 19): Semantik untuk Web (2)

Saat ini, dokumen HTML biasanya di strukturkan dengan elemen div. Pengaturan dan penempatan kontainer ini biasanya dilakukan melalui CSS. Bagi perangkat lunak seperti Screenreader, pendekatan ini tentu saja tidak berguna, karena mereka tidak dapat mengenali makna dari konten tertentu. Hal ini diharapkan dapat berubah melalui elemen-elemen struktur baru.

Dua elemen baru yang paling penting adalah section dan article, yang menjadi fokus dalam tutorial ini.

Menandai Artikel

Dengan elemen article, teks (posting forum, artikel berita, dll.) dapat ditandai sebagai artikel. Contoh berikut menunjukkan definisi artikel yang khas.

<article>
   <h1>Membuat Aplikasi Web (Bagian 09): jQuery mobile (1)</h1>
   <p>jQuery tanpa ragu merupakan salah satu framework JavaScript yang paling terkenal. Di "situs web klasik," jQuery sudah digunakan ribuan kali ...</p>
   ...
</article>

Berkat elemen article, kalian bisa strukturkan konten kalian secara semantis.

Bagaimana tampilannya dapat dilihat dengan jelas melalui sebuah blog.

<article>
  <header>
    <h1>Membuat Aplikasi Web (Bagian 09): jQuery mobile (1)</h1>
    <p>Dipublikasikan pada: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery tanpa ragu merupakan salah satu framework JavaScript yang paling terkenal. Di "situs web klasik," jQuery sudah digunakan ribuan kali ...</p>
  ...
  <footer>
    <p><small>Hak cipta oleh PSD-Tutorials.de</small></p>
  </footer>
</article>

Pada contoh ini, bagian kepala, utama, dan footer dipisahkan dalam elemen article. Pembagian semacam ini sering ditemui dalam blog.

Membuat Bagian

Selanjutnya adalah dengan elemen section. Elemen section membagi halaman menjadi beberapa bagian. Ini bisa berupa bagian, bab, tab, dsb. Melalui section, area seperti pengantar dan berita terkini dapat secara logis dipisahkan satu sama lain.

section membantu untuk membagi konten berdasarkan aspek konten yang sebenarnya. Saya akan membahas perbedaan antara section dan div di akhir tutorial ini.

Contoh berikut menunjukkan struktur blog yang khas. Namun, struktur ini juga memiliki sesuatu yang sering dibutuhkan dalam blog, yaitu area komentar. Area komentar ini didefinisikan dalam elemen section. Komentar individu di dalam area section ini kemudian dikelilingi dengan elemen article.

<article>
  <header>
    <h1>Membuat Aplikasi Web (Bagian 09): jQuery mobile (1)</h1>
    <p>Dipublikasikan pada: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery tanpa ragu merupakan salah satu framework JavaScript yang paling terkenal. Di "situs web klasik," jQuery sudah digunakan ribuan kali...</p>
  ...

  <section>
    <h2>Komentar</h2>
    <article>
      <header>
      <h3>Dikomentari oleh: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Satu jam yang lalu</time></p>
    </header>
    <p>Terima kasih untuk tutorialnya!</p>
    </article>
    <article>
      <header>
      <h3>Dikomentari oleh: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Dua jam yang lalu</time></p>
    </header>
    <p>Keren! Ini membantu saya lebih lanjut.</p>
    </article>
  </section>
</article>

Di sini, saya harus menyebutkan bahwa saya akan membahas elemen yang juga digunakan di sini, seperti header, footer, dll. secara rinci lagi nanti. Pada titik ini, saya hanya ingin menjelaskan: Melalui elemen ini, konten dapat dibagi menjadi bagian kepala dan footer, sehingga memungkinkan struktur logis dokumen yang lebih lanjut.

Contoh lain akan lebih menjelaskan gabungan elemen article dan section. Sebenarnya, elemen section dapat digunakan untuk membagi sebuah artikel ke dalam area konten logis, masing-masing dengan judulnya sendiri.

<article> 
  <h1>Pengembangan Aplikasi</h1> 
  <p>Di sini kalian dapat mengetahui cara membuat aplikasi web.</p>
  <section> 
     <h2>Membuat Aplikasi Web (Bagian 09): jQuery mobile (1)</h2> 
     <p>jQuery tanpa ragu merupakan salah satu framework JavaScript yang paling terkenal.</p> 
   </section> 
  <section> 
     <h2>Membuat Aplikasi Web (Bagian 08): Panduan Cepat jQuery</h2> 
     <p>JavaScript sangat berguna untuk halaman web, karena berbagai hal menarik dapat dilakukan dengannya.</p> 
   </section> 
 </article>

Selain itu, mungkin juga dimungkinkan untuk mendefinisikan elemen article di dalam elemen section. Sebuah contoh khas adalah area komentar, seperti yang telah ditunjukkan sebelumnya. Namun, memungkinkan juga untuk membagi section ke dalam area topik yang dibahas dalam blog.

Juga di sini ada contoh yang sesuai:

<section> 
  <h1>Pengembangan Aplikasi</h1>
  <article> 
     <h2>Membuat Web-Apps (Bagian 09): jQuery mobile (1)</h2> 
     <p>jQuery tanpa ragu merupakan salah satu Framework JavaScript yang paling terkenal.</p> 
   </article> 
  <article> 
     <h2>Membuat Web-Apps (Bagian 08): Panduan Cepat tentang jQuery</h2> 
     <p>JavaScript sangat berguna untuk halaman web, akhirnya dengan JavaScript, kita dapat melakukan banyak hal menarik.</p> 
   </article>    
 </section>

Selain itu, bisa terdapat elemen-elemen section lain di dalam elemen section. Penyusunan bertingkat juga diizinkan. Berikut adalah contoh:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Selamat Datang</h2>     
      <p>Kami senang...</p>
    </section>   
    <section>     
      <h2>Tutorial</h2>
      <P>Di sini terdapat tutorial terbaru kami...</p> 
    </section>
    <aside>
      <p>Kontak</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Penyusunan section tersebut menghasilkan struktur berikut:

1. PSD-Tutorials.de

1.1 Selamat Datang

1.2 Tutorial

1.3 Kontak

2. (c) 2014 PSD-Tutorials.de
   
   Struktur-semacam ini juga mungkin terjadi.
   
   

Perbedaan antara div, article dan section

Mengakui bahwa sebenarnya bukan hal yang mudah untuk memahami perbedaan antara div, article dan section. Sebenarnya, elemen article secara utama ditetapkan untuk strukturisasi posting blog. Elemen section sebenarnya berada satu level di bawah article. Di dalam elemen section, sebaiknya selalu menentukan judul juga. Meskipun sebenarnya tidak ada judul yang ditentukan, seharusnya setidaknya secara teoretis memungkinkan untuk menetapkan judul di dalam elemen terkait.

Tentu saja, elemen-elemen div juga tidak dikecam dalam HTML5, tetapi seharusnya tetap digunakan. Elemen-elemen ini menjadi menarik misalnya ketika harus menggabungkan elemen.

Terakhir, namun demikian, perhatikan juga dampak visual yang ditimbulkan oleh elemen-elemen yang telah diperkenalkan sejauh ini. Sebenarnya, untuk pengaturan tata letak yang sesuai, Anda membutuhkan CSS. Penggunaan normal dari elemen-elemen yang ditunjukkan sejauh ini sebenarnya tidak memiliki efek di browser. Anda hanya mengatur konten secara semantis di sini. Semua hal yang berhubungan dengan tampilan diatur melalui stylesheet.