Tutorial Dasar HTML & HTML5: Semantic Markup (Part 2)

Ada beberapa teks elemen yang tidak diperuntukkan untuk mengubah struktur pada suatu halaman web, tetapi elemen-elemen tersebut memberikan informasi ekstra/tambahan pada halaman web. Hal ini biasa disebut dengan semantic markup.

Alasan untuk menggunakan elemen-elemen ini adalah untuk menjelaskan konten pada halaman web kita agar mejadi lebih akurat, sehingga program-program lain, seperti screen reader atau search engine bisa menggunakan informasi ekstra tadi.

Strong dan Emphasis

<strong>

Tag <strong> mengindikasikan sesuatu yang ada pada halaman web merupakan hal yang penting. Secara default, browser akan merender tag <strong> sama halnya teks bold, bedanya tag <strong> memberikan informasi ekstra.

<p><strong>Hati-hati!</strong> Ada tikungan tajam.</p>

Akan menjadi:

Hati-hati! Ada tikungan tajam.

<em>

Tag <em> memberikan penekanan pada teks yang ada pada halaman web. Secara default browser akan merender tag <em> sama seperti tag <i> yaitu teks miring.

<p>"<em>Jangan</em> datang lagi!"</p>

Akan menjadi:

"Jangan datang lagi!"

Pada contoh di atas, kita memberikan penekanan pada kata "Jangan".

Kutipan

<blockquote>

Elemen <blockquote> digunakan untuk membungkus kalimat kutipan. Browser nantinya akan memberikan indentasi pada elemen <blockquote>

<blockquote cite='https://example.com/'>
  <p>Beri Aku 10 pemuda, niscaya akan kuguncangkan dunia.</p>
</blockquote>

Akan menjadi:

Beri Aku 10 pemuda, niscaya akan kuguncangkan dunia.

Catatan: pada contoh di atas, attribute cite diisi dengan sumber referensi dari kutipan.

<q>

Elemen <q> digunakan untuk membungkus kutipan yang lebih pendek dan merupakan bagian dari suatu paragraf. Browser akan membungkus kalimat dengan " di awal dan di akhir kutipan.

<p>Presiden Soekarno pernah berkata, <q>Beri Aku 10 pemuda, niscaya akan kuguncangkan dunia.</q></p>

Akan menjadi:

Presiden Soekarno pernah berkata, Beri Aku 10 pemuda, niscaya akan kuguncangkan dunia.

Singkatan

Jika teman-teman ingin menjelaskan kalimat lengkap (kepanjangan) dari suatu teks pada halaman web, teman-teman bisa membungkusnya dengan tag <abbr> atau <acronym>. Tag ini mempunyai atribut title yang diisi dengan kepanjangan dari teks yang kita inginkan.Di HTML4 abbr dan acronym dibedakan. Acronym digunakan untuk singkatan per huruf. Namun, di HTML5 cukup menggunakan abbr saja untuk singkatan. Intinya, teman-teman hanya perlu menggunakan abbr untuk menjelaskan singkatan.

<p><abbr title='Insinyur'>Ir.</abbr> Soekarno adalah presiden pertama Indonesia.</p>

Akan menjadi:

Ir. Soekarno adalah presiden pertama Indonesia.

Coba teman-teman arahkan cursor pada "Ir." di awal kalimat, lihat apa yang terjadi.

Referensi dan Defenisi

<cite>

Secara bahasa cite artinya mengutip. Bedanya dengan <blockquote>, cite digunakan saat kita mereferensikan karya orang lain pada halaman web milik kita. Pada HTML5 harusnya <cite> tidak digunakan untuk mereferensikan nama dari seseorang, Tapi, karena kebiasaan dari HTML4 kebanyakan orang masih melakukannya. Contoh dari penggunaan <cite> adalah sebagai berikut:

<p>
  <cite>HTML & CSS: Design and Build Websites</cite> karya Jon Duckett adalah salah satu buku yang direkomedasikan untuk belajar HTML dan CSS.
</p>

Akan menjadi:

HTML & CSS: Design and Build Websites by Jon Duckett adalah salah satu buku yang direkomedasikan untuk belajar HTML dan CSS.

<dfn>

Saat kita ingin menjelaskan suatu istilah baru pada halaman web, kita bisa menggukanan tag <dfn>. Di beberapa browser, content <dfn> akan dirender dalam cetak miring dan di sebagian browser lain akan ditampilkan seperti paragraf biasa.

<p>
  <dfn>HTML5</dfn> adalah bahasa markup yang digunakan untuk memberi struktur pada halaman web.
</p>

Akan menjadi:

HTML5 adalah bahasa markup yang digunakan untuk memberi struktur pada halaman web.

Detail Kontak

<address>

Tag <address> penggunaannya cukup spesifik, yaitu untuk membungkus detail kontak dari penulis konten pada halaman web. Tag <address> bisa berisi alamat lengkap si penulis, tapi tidak selamanya seperti itu. Tag ini juga bisa berisi nomor telepon dan alamat email si penulis.

<address>
  <p>Sumatera Utara, Indonesia</p>
</address>

Akan menjadi:

Sumatera Utara, Indonesia

Perubahan Pada Konten

<ins> dan <del>

<ins> bisa digunakan untuk memperlihatkan konten yang ditambahkan pada dokumen, sementara <del> untuk menunjukkan konten yang dihapus. Untuk hasil rendernya, biasanya <ins> akan digaris bawahi, sementara <del> akan ada efek teks tercoret. Berikut adalah contohnya:

<p>Saya <del>belum</del> <ins>sudah</ins> pernah naik pesawat.</p>

Akan menjadi:

Saya belum sudah pernah naik pesawat.

<s>

<s> mengindikasikan kalau suatu konten pada halaman web sudah tidak akurat atau relevan tetapi konten tersebut tidak seharusnya dihapus. Contoh penggunaannya seperti ini:

<p>Diskon Lebaran:</p>
<p><s>Rp. 2.499.999</s></p>
<p>Rp. 1.999.999</p>

Akan menjadi:

Diskon Lebaran:

Rp. 2.499.999

Rp. 1.999.999

Kesimpulan:

• Elemen HTML digunakan untuk menjelaskan struktur dari suatu halaman web (Misal: heading, subheading, dan paragraf)
• Elemen HTML juga meemberikan informasi semantik (Misal: Kapan dan dimana emphasis harus diletakkan, maksud dari suatu akronim, dsb.)
• HTML menyediakan elemen-elemen yang bisa kita gunakan untuk memodifikasi konten pada halaman website

Begitu saja untuk part ini, selanjutnya kita akan membahas Cara Membuat List di HTML. Jika teman-teman mempunyai pertanyaan, silahkan tulis di kolom komentar di bawah ini. Terima kasih!

---