Elemen dan Semantik

Setelah mengerti dasar-dasar dari HTML dan CSS sekarang kita dapat masuk lebih dalam dan melihat bagaimana HTML dan CSS berinteraksi.

Untuk membangun sebuah website yang baik, kita perlu mengetahui tentang elemen-elemen HTML yang digunakan untuk berbagai jenis konten, serta bagaimana prilaku dari elemen-elemen tersebut. Mengerti prilaku elemen-elemen yang ada secara mendalam akan membantu kita dalam menggunakan elemen tersebut secara optimal, untuk membuat elemen-elemen yang ada menghasilkan sesuatu sesuai dengan yang kita inginkan.

Dengan mengetahui elemen-elemen yang ada secara mendalam, kita juga akan terdorong (dan terbiasa) menuliskan kode secara semantik. Penulisan kode secara semantik membantu kita dalam membangun website yang dapat dengan optimal dibaca oleh berbagai mendia lain, seperti screen reader (untuk membantu tunanetra membaca website kita) ataupun web crawler (untuk memastikan website mendapatkan indeks yang baik dalam mesin pencarian seperti Google).

Makna Semantik

Kita telah berkali-kali menggunakan kata “semantik” sebelumnya, tetapi belum mendefinisikan kata ini dengan baik. Bagian ini akan membahas makna kata semantik, untuk menyamakan persepsi dengan pembaca, agar kedepannya pembaca dapat mengerti mengapa semantik penting.

Semantik, dalam konteks HTML, dideskripsikan sebagai pemberian makna dan struktur terhadap konten yang ada dalam dokumen HTML. Makna yang diberikan semantik yaitu nilai dari konten pada sebuah dokumen. Misalnya, teks yang berada di dalam elemen h1 memiliki nilai lebih tinggi, karena elemen tersebut merupakan penanda dari pembagi kepala utama (dalam buku: bab) dari sebuah dokumen. Contoh lain, teks yang berada di dalam elemen blockquote merupakan kutipan yang direferensikan oleh penulis dokumen.

Struktur yang dibangun oleh HTML merupakan struktur dokumen, yang berarti HTML memberikan fasilitas untuk membagi dokumen ke dalam potongan-potongan yang relevan. Sebuah dokumen teks, media utama HTML, biasanya memiliki konten hirarkis. Dalam buku kita memiliki bab dan subbab untuk memberikan struktur. Di HTML, kita memiliki elemen-elemen heading, mulai dari h1 sampai dengan h6 untuk memberikan struktur.

Selain struktur untuk konten dokumen, HTML juga dapat membagi dokumen ke dalam struktur halaman dalam arti literal (tata letak dokumen). Elemen section memberikan fasilitas untuk membagi dokumen ke dalam beberapa bagian. Selain itu, ada juga elemen aside untuk menandakan catatan samping dari sebuah dokumen. Elemen header dan footer masing-masing memberikan bagian kepala dan kaki dokumen.

Sudah mengerti tentang makna dari semantik? Jika sudah, mari kita lanjutkan pembahasan ke elemen-elemen semantik yang diberikan oleh HTML! Jika anda belum mengerti, untuk sementara ingat saja hal berikut: semantik berarti pemberian makna dan struktur terhadap konten. Seiring dengan berjalannya waktu dan bertambahnya pengalaman dalam penulisan HTML, anda akan melihat dan mengerti arti dari semantik.

Tipografi

Mayoritas konten yang ada dalam web merupakan konten berbasis teks. Pada bagian ini, kita akan melihat berbagai elemen-elemen untuk merepresentasikan teks dalam HTML. Elemen yang kita bahas pada bagian ini hanya elemen-elemen yang populer dan akan sering digunakan. Untuk melihat semua elemen-elemen teks yang ada dan pembahasannya secara mendalam, baca bagian.

Heading

Istilah EYD Indonesia untuk heading adalah “pranala”. Penulis merasa tidak nyaman dan terbiasa dengan istilah tersebut, karenanya pada buku ini digunakan istilah “heading”. Mohon dimaklumi :D

Heading merupakan elemen yang berperan untuk memberikan hirarki teks dalam dokumen HTML. Terdapat enam tingkatan heading, yaitu h1 sampai dengan h6. Selain untuk memberikan hirarki, heading juga membantu mesin pencarian dalam membangun indeks, dengan menentukan kepentingan konten dari tingkatan heading.

Heading idealnya digunakan secara terurut dan bertingkat. Bagian utama dan paling penting dalam sebuah dokumen seharusnya berada di bawah elemen h1, dan jika konten tersebut memiliki beberapa subbagian, maka subbagian tersebut dapat dibagi menggunakan h2, dan seterusnya.

Kode di bawah merupakan cntoh pengunaan heading untuk mencetak daftar isi:

<h1>Bab 3: HTML dan CSS Dasar</h1>
<h2>3.1 Elemen, Tag, dan Atribut</h2>
<h3>3.1.1 Elemen</h3>
<h3>3.1.2 Tag</h3>
<h3>3.1.3 Atribut</h3>
<h2>3.2 Struktur dan Dokumen HTML</h2>
<h2>3.3 Dasar CSS</h2>
<h3>3.3.1 Selector</h3>
<h3>3.3.2 Property</h3>
<h3>3.3.3 Value</h3>
<h3>3.3.4 Sintaks CSS</h3>
<h2>3.4 Mengimplementasikan CSS pada HTML</h2>

Hasil eksekusinya ialah:

Heading Sebagai Daftar Isi

Heading Sebagai Daftar Isi

Perhatikan juga bagaimana ukuran h1 lebih besar dari h2, dan seterusnya.

Paragraf

Penulisan sebuah heading biasanya diikuti dengan paragraf yang berada di bawah heading tersebut. Paragraf dibuat dengan elemen p dalam HTML. Banyak paragraf dapat dituliskan secara sambung-menyambung, sama seperti pada dokumen-dokumen pada umumnya.

Berikut adalah contoh kode pengunaan elemen p, serta hasil eksekusinya:

<h1>Demo Paragraf</h1>
<p>
    Nisi sit ultrices cum, vel! Et arcu augue rhoncus dignissim?
    Mus amet, proin facilisis aenean eu, diam mattis, arcu sed.
</p>

<p>
    Et, nisi in eu. Tincidunt! Nisi ridiculus tempor,
    lacus dis placerat arcu sed ac massa dolor ut ultricies ut.
</p>
Contoh Paragraf HTML

Contoh Paragraf HTML

Penekanan Teks

Ketika menuangkan pikiran ke dalam tulisan, seringkali kita perlu melakukan penekanan terhadap kata-kata atau bagian tertentu dari teks. Dalam komunikasi verbal seperti berbicara, kita dapat melakukan penekanan dengan mempertinggi suara, atau dengan memperlambat pembacaan kata. Dalam teks, teknik yang biasanya digunakan untuk memberikan penekanan ialah dengan memiringkan atau mempertebal tulisan.

HTML menyediakan dua buah elemen untuk memberikan penekanan, yaitu em dan strong. Elemen em digunakan sebagai media penekanan konten. Elemen strong, di sisi lain, digunakan untuk menandakan bahwa teks di dalamnya merupakan teks yang sangat penting.

Berikut adalah contoh kode beserta hasil eksekusinya:

<p>
HTML menyediakan dua buah elemen untuk memberikan penekanan,
yaitu em dan strong Elemen em digunakan sebagai media
<em>penekanan</em> konten. Elemen strong, di sisi lain,
digunakan untuk menandakan bahwa teks di dalamnya
merupakan teks yang <strong>sangat penting</strong>.
</p>
Contoh Penekanan Teks pada HTML

Contoh Penekanan Teks pada HTML

Cetak Tebal dan Miring

Elemen strong dan em yang dijelaskan pada bagian Penekanan Teks memberikan efek cetak tebal dan cetak miring terhadap teks. Begitupun, makna semantik dari kedua elemen tersebut jelas: untuk memberikan penekanan. Jika ingin memberikan cetak tebal dan cetak miring dengan tujuan berbeda, kita dapat menggunakan dua elemen alternatif: b dan i.

Apa makna semantik dari b dan i? Mari kita lihat arti semantik dari kedua elemen ini, sesuai dengan yang tercatat pada standar HTML:

Elemen i merepresentasikan serangkaian teks di dalam nada atau mood berbeda. Elemen i juga dapat digunakan untuk menunjukkan perbedaan sebuah frase dengan teks pada umumnya, misalnya penunjukan taksonomi, istilah teknis, frase idiom dari bahasa lain, pemikiran, atau nama kapal pada literatur barat.

Elemen b merepresentasikan serangkaian teks yang harus diperhatikan karena manfaat dari teks tersebut, tanpa mementingkan tingkat kepentingan dari teks itu sendiri, dan tanpa adanya tanda-tanda dari perbedaan nada atau mood. Contoh dari teks yang bermanfaat ialah kata kunci pada abstrak sebuah dokumen, nama produk dalam review, kata-kata yang dapat digunakan untuk berinteraksi dalam dokumen interaktif, atau kata pembuka.

—HTML Living Standard

Bingung membaca standar? Ya, saya juga selalu bingung dalam membaca standar! Sederhananya, elemen i digunakan untuk dua hal: kata-kata yang berbeda dari suatu teks (istilah asing, istilah teknis) dan perubahan mood atau nada dalam sebuah karya sastra (karakter berpikir, marah, sarkasme).

Sementara itu, elemen b digunakan untuk memberikan tanda bahwa teks yang ditebalkan merupakan teks yang bermanfaat, tetapi belum tentu penting. Contoh yang diberikan pada kutipan sudah cukup jelas, yaitu nama produk, abstrak, atau kata kunci. Kode di bawah memberikan contoh pengunaan elemen b dan i:

<p>
    <b>Scala</b> (yang adalah kepanjangan dari
    "<i>Scalable Language</i>") merupakan sebuah bahasa
    pemrograman yang dirancang untuk digunakan dalam
    berbagai lingkungan, mulai dari <i>script</i> sederhana
    sampai dengan sebuah sistem yang besar dan rumit.
    Istilah kerennya, <b>Scala</b> adalah sebuah
    <i>general purpose programming language</i>.
</p>
Contoh Cetak Tebal dan Miring pada HTML

Contoh Cetak Tebal dan Miring pada HTML

Pengunaan elemen i dan b dengan em dan strong memang seringkali tidak diperhatikan oleh pengembang web, karena kedua elemen ini sekilas memiliki tampilan yang sama. Idealnya, pengunaan makna semantik harus diperhatikan juga selama pengembangan web karena makna semantik akan sangat membantu dalam interoperasi dengan sistem lainnya (terutama perangkat lunak pembantu tunanetra dan pengindeks mesin pencari). Jadi pastikan bahwa anda menggunakan makna semantik yang benar dalam membangun website.

Sedikit tips, untuk memastikan makna semantik tersampaikan, anda juga dapat membedakan b dan i dengan strong dan em menggunakan CSS untuk seluruh elemen di dalam dokumen. Diskusikan dengan desainer anda untuk mendapatkan efek semantik maksimal dari keempat elemen ini!

Bagikan Tulisan
comments powered by Disqus
Kembali ke bertzzie.com