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

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

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

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

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!

Hyperlink

Salah satu elemen paling mendasar dari sebuah website adalah hyperlink. Hyperlink memungkinkan kita menghubungkan dokumen-dokumen yang ada dalam website, atau bahkan menghubungkan dokumen dengan dokumen eksternal pada website lain. Selain itu, hyperlink juga memberikan fasilitas untuk berhubungan dengan email, ataupun ke elemen-elemen lain dalam dokumen yang sama. Bagaimana cara kita menuliskan hyperlink? Perhaikan kode di bawah:

<p>
    Contoh hyperlink:
    <a href="http://www.google.com">klik untuk ke Google</a>.
</p>

Contoh Pengunaan Hyperlink pada HTML

Perhatikan bahwa hasil pembuatan link secara otomatis berwarna biru, dan berubah warna menjadi ungu setelah kita mengunjungi link tersebut. Teks juga secara otomatis bergaris bawah. Tentu saja seluruh atribut ini dapat diubah menggunakan CSS, dan kita akan mengubahnya pada bagian akhir.

Path Relatif dan Absolut

Terdapat dua jenis link yang paling sering digunakan dengan elemen a: link ke halaman lain pada website yang sama, dan link ke halaman eksternal, pada website yang berbeda. Cara kita membedakan kedua jenis link tersebut ialah melalui path yang dituju oleh link tersebut. Path dapat dibaca melalui atribut href di dalam elemen a.
Link yang mengarah ke halaman lain pada website yang sama idealnya memiliki path relatif, atau path yang tidak memiliki nama domain di dalamnya. Karena berada pada website (domain) yang sama, maka kita tidak lagi perlu menspesifikasikan domain yang digunakan. Jika ingin menspesifikasikan link ke halaman contact.html di dalam direktori yang sama, kita dapat langsung menuliskan nama file saja, sementara jika ingin memberikan link ke halaman pada direktori yang berbeda, kita dapat memberikan nama direktori terlebih dahulu, seperti yang dilakukan pada pemilihan path umumnya.
Misalnya, jika kita sedang berada pada file index.html dan ingin memberikan link ke contact.html yang berada pada direktori “etc”, kita dapat menuliskan link seperti berikut: etc/contact.html. Kode berikut memberikan contoh link file relatif, di dalam direktori yang sama maupun berbeda:

<p>
    Link relatif ke direktori yang sama:
        <a href="about.html">About</a> <br>

    Link relatif ke direktori yang berbeda:
        <a href="contact/main-contact.html">Main Contact</a>

    Jika kita berada di dalam direktori "contact" dan ingin merujuk
    ke halaman di direktori utama:
        <a href="../index.html">Halaman Utama</a>
</p>

Link ke dokumen eksternal (pada website yang berbeda) mengharuskan kita menggunakan path absolut, yang harus mengikut sertakan nama domain. Kode berikut memberikan contoh beberapa link absolut untuk website-website lainnya:

<p>
    Link ke halaman utama
        <a href="http://www.google.com/">Google</a>. <br>

    Link ke halaman utama
        <a href="http://www.twitter.com/bertzzie">
            Twitter (Profil Penulis)
        </a>. <br>

    Link ke halaman utama
        <a href="http://bertzzie.com/filter/category/">
            Halamn Kategori Blog Penulis
        </a>. <br>

    Link ke halaman utama
        <a href="http://en.wikipedia.org/wiki/Lead_paragraph">
            Salah Satu Halaman Wikipedia
        </a>. <br>
</p>

Link ke Email

Selain untuk mengirimkan pengguna ke halaman lain, link juga dapat digunakan untuk mengarahkan pengguna untuk mengirimkan email. Ketika diklik, link akan membuka perangkat lunak email standar dan mengisikan data-data yang dibutuhkan (tujuan pengirim, subjek, isi).
Untuk membuat link email, kita harus mengisikan nilai atribut href yang diawali dengan teks mailto:, yang kemudian diikuti dengan email yang harus dikirimkan. Misalnya, untuk mengirimkan email ke ”bertzzie@bertzzie.com, kita dapat mengisikan atribut href dengan nilai “mailto:bertzzie@bertzzie.com".
Contoh kode berikut memperlihatkan cara penggunaan link email:

<p>
    Kirimkan email <a href="mailto:bertzzie@bertzzie.com">ke kami</a>.
</p>

Subjek dari email juga dapat diisikan, dengan menambahkan parameter subject= setelah email. Yang perlu diperhatikan, di dalam subjek kita harus menuliskan string secara khusus, yaitu dalam format URL Encoding. Pengunaan format URL Encoding menyebabkan kita harus menggantikan karakter spasi (” ”) dengan %20. Kode di bawah memberikan contoh kode link email yang disertai dengan subjek (perhatikan isi atribut href):

<p>
    Kirimkan email dengan subjek
    <a href="mailto:bertzzie@bertzzie.com?subject=Ini%20sebuah%20subjek">
        ke kami
    </a>.
</p>

Selain mengisikan subjek secara otomatis, badan (isi) dari email sendiri juga dapat diberikan secara otomatis. Caranya sama dengan email dengan subjek, tetapi menggunakan parameter body:

<p>
    Kirimkan email dengan subjek dan isi
    <a href="mailto:bertzzie@bertzzie.com?
subject=Ini%20sebuah%20subjek&
body=Isi%20email">
        ke kami
    </a>.
</p>

Membuka Jendela Baru

Biasanya, sebuah link akan dibuka pada halaman yang sama tempat pembaca melakukan klik terhadap link tersebut. Jika ingin memberikan fasilitas di mana link akan secara otomatis terbuka pada jendela baru, kita dapat menambahkan nilai “_blank” pada atribut target.
Berikut adalah contoh pengunaan link untuk membuka jendela baru:

<p>
    Link yang terbuka pada jendela baru:
        <a href="http://bertzzie.com" target="_blank">
            klik
        </a>.
</p>

Link ke Elemen pada Halaman yang Sama

Selain memberikan link ke dokumen yang berbeda, elemen a juga dapat digunakan untuk menghubungkan kita ke bagian lain pada dokumen yang sama. Untuk dapat memberikan link ke bagian lain dari dokumen, bagian yang ingin kita hubungkan harus terlebih dahulu diberikan tanda, berupa atribut “id”. Karena atribut id dapat digunakan pada elemen apapun, maka elemen a juga dapat menghubungkan kita ke bagian manapun dari sebuah dokumen.
Untuk lebih jelasnya, perhatikan kode di bawah (kode dapat diambil di sini. Download dan buka halaman untuk melihat efeknya:

<p>
    <a href="#heading2">Pindah ke bagian "Heading 2"</a>.
</p>

<h1>Heading 1</h1>

<!-- Banyak Teks -->

<h2 id="heading2">Heading 2</h2>

<!-- Banyak Teks Lagi -->

Perhatikan bahwa isi dari atribut href sama dengan isi atribut id pada elemen h2, yang ditambahkan dengan tanda pagar (“#”) di bagian depannya. Dalam banyak konteks di HTML, atribut id memang dirujuk dengan tanda pagar.