Dokumen tersebut membahas tentang berbagai elemen dasar HTML seperti heading, paragraf, penekanan teks, hyperlink, dan path relatif/absolut. Dokumen tersebut juga menjelaskan perbedaan penggunaan elemen i dan b dibandingkan dengan em dan strong.

1. 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

2. 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:

3. 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.

4. </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

5. 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 tandatanda 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>

6. 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)

7. 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/maincontact.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>

8. 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 [1]. 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%20e
mail">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:

9. <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.