Skip to main content

Bab 2: Mengenal HTML

Dengan pengenalan HTML dan CSS sebelumnya, sekarang saatnya kita menggali lebih dalam HTML dan menelaah berbagai komponen yang membentuk bahasa ini.

Untuk mulai membangun website, kita perlu mempelajari elemen HTML mana yang paling tepat digunakan untuk menampilkan berbagai jenis konten. Penting juga untuk memahami bagaimana elemen-elemen tersebut ditampilkan secara visual di sebuah halaman web, serta apa makna semantis dari elemen-elemen yang berbeda.

Menggunakan elemen yang tepat untuk setiap kebutuhan sangatlah penting, dan kita ingin membuat keputusan yang benar-benar terinformasi dalam proses ini.

Semantik​

Jadi, apa sebenarnya yang dimaksud dengan semantik? Semantik dalam HTML adalah praktik memberikan makna dan struktur pada konten di sebuah halaman dengan menggunakan elemen yang tepat. Kode semantik menjelaskan nilai dari konten pada sebuah halaman, terlepas dari gaya atau tampilan konten tersebut. Ada beberapa manfaat dalam menggunakan elemen semantik, termasuk memungkinkan komputer, screen reader, mesin pencari, dan perangkat lain untuk membaca dan memahami konten pada sebuah halaman web dengan baik. Selain itu, HTML semantik lebih mudah dikelola dan digunakan, karena dengan jelas menunjukkan tentang apa setiap bagian konten tersebut.

Ke depannya, ketika elemen-elemen baru diperkenalkan, kita akan membahas apa sebenarnya makna elemen-elemen tersebut dan jenis konten apa yang paling tepat untuk mereka wakili. Namun sebelum itu, mari kita lihat dua elemen—<div> dan <span>—yang sebenarnya tidak memiliki nilai semantik. Keduanya ada hanya untuk tujuan pemberian gaya.

Memahami Div dan Span​

Elemen <div> dan <span> adalah elemen HTML yang berfungsi semata-mata untuk keperluan styling. Keduanya tidak memiliki makna atau nilai semantik yang melekat. Paragraf bersifat semantik karena konten yang dibungkus di dalam elemen <p> dikenal dan dipahami sebagai sebuah paragraf. <div> dan <span> tidak memiliki makna seperti itu dan hanya berfungsi sebagai wadah.

tip

Elemen Block vs. Inline​

Sebagian besar elemen termasuk dalam salah satu kategori yaitu tingkat block atau inline. Apa perbedaannya?

Elemen tingkat block dimulai pada baris baru, tersusun satu di atas yang lain (ke bawah), dan mengambil semua spasi horizontal (lebar) yang tersedia. Elemen block dapat di-nested (beranak) di dalam satu sama lain dan dapat membungkus elemen tingkat inline. Kita paling sering menjumpai elemen block digunakan untuk bagian konten yang lebih besar, seperti paragraf.

Elemen tingkat inline tidak dimulai pada baris baru. Elemen-elemen ini mengikuti alur normal dokumen, tersusun berdampingan satu demi satu (kesamping), dan hanya mempertahankan lebar sesuai dengan kontennya. Elemen inline dapat di-nested di dalam satu sama lain; namun, elemen ini tidak dapat membungkus elemen block. Biasanya kita melihat elemen inline digunakan untuk potongan konten yang lebih kecil, seperti beberapa kata.

Baik <div> maupun <span>, sangat berguna saat membangun sebuah website karena keduanya memberi kita kemampuan untuk menerapkan gaya yang terarah pada sekumpulan konten tertentu.

Sebuah <div> adalah elemen tingkat block yang umum digunakan untuk mengidentifikasi kelompok konten yang besar, dan membantu membangun tata letak serta desain sebuah halaman web. Sebaliknya, <span> adalah elemen tingkat inline yang umum digunakan untuk mengidentifikasi kelompok teks yang lebih kecil di dalam sebuah elemen block.

Kita sering menjumpai <div> dan <span> digunakan bersama atribut class atau id untuk keperluan styling. Memilih nilai atau nama atribut class atau id memerlukan sedikit kehati-hatian. Kita ingin memilih nilai yang merujuk pada isi dari sebuah elemen, bukan semata-mata pada tampilannya.

Sebagai contoh, jika kita memiliki sebuah <div> dengan latar belakang oranye yang berisi tautan media sosial, pikiran pertama kita mungkin memberi <div> tersebut nilai class orange. Namun, apa yang terjadi jika latar belakang oranye itu nanti diubah menjadi biru? Nilai class orange tidak lagi masuk akal. Pilihan yang lebih tepat untuk nilai class adalah social, karena merujuk pada isi dari <div> tersebut, bukan pada tampilannya.

<!-- Div -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
tip

Komentar dalam HTML & CSS​

Kode sebelumnya menyertakan tanda seru di dalam HTML, dan itu tidak masalah. Itu bukan elemen, melainkan komentar.

HTML dan CSS memberi kita kemampuan untuk menambahkan komentar di dalam kode, dan setiap konten yang dibungkus di dalam komentar tidak akan ditampilkan pada halaman web. Komentar membantu menjaga file tetap terorganisasi, memungkinkan kita membuat pengingat, dan memberikan cara untuk mengelola kode dengan lebih efektif. Komentar menjadi sangat berguna ketika ada banyak orang yang bekerja pada file yang sama.

Komentar HTML dimulai dengan <!-- dan diakhiri dengan -->. Komentar CSS dimulai dengan /* dan diakhiri dengan */.

Menggunakan Elemen Berbasis Teks​

Berbagai bentuk media dan konten tersedia, namun teks tetap menjadi yang paling dominan. Oleh karena itu, ada banyak elemen berbeda untuk menampilkan teks pada sebuah halaman web. Untuk saat ini kita akan fokus pada elemen-elemen yang lebih umum, termasuk heading, paragraf, teks tebal untuk menunjukkan pentingnya sesuatu, dan teks miring untuk memberikan penekanan. Nantinya, pada Pelajaran 6, "Bekerja dengan Tipografi", kita akan melihat lebih dekat bagaimana cara mengatur tampilan teks.

Heading​

Heading adalah elemen tingkat block dan tersedia dalam enam tingkat, dari <h1> hingga <h6>. Heading membantu memecah konten dengan cepat dan membangun hierarki, serta menjadi penanda utama bagi pengguna yang membaca sebuah halaman. Heading juga membantu mesin pencari untuk mengindeks dan menentukan isi dari sebuah halaman.

Heading sebaiknya digunakan dalam urutan yang sesuai dengan isi halaman. Heading utama dari sebuah halaman atau bagian harus ditandai dengan elemen <h1>, dan heading berikutnya menggunakan elemen <h2>, <h3>, <h4>, <h5>, dan <h6> sesuai kebutuhan.

Setiap tingkat heading harus digunakan berdasarkan nilai semantiknya, dan tidak seharusnya digunakan hanya untuk membuat teks menjadi tebal atau besar—ada cara lain yang lebih tepat untuk melakukannya.

Berikut adalah contoh HTML untuk semua tingkat heading yang berbeda beserta tampilan hasilnya pada sebuah halaman web.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Paragraf​

Heading sering kali diikuti oleh paragraf pendukung. Paragraf didefinisikan menggunakan elemen tingkat block <p>. Paragraf dapat muncul satu demi satu, menambahkan informasi ke dalam sebuah halaman sesuai kebutuhan. Berikut adalah contoh cara menyusun paragraf.

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

Teks Tebal dengan Strong​

Untuk membuat teks menjadi tebal dan memberikan penekanan yang kuat, kita menggunakan elemen tingkat inline <strong>. Ada dua elemen yang dapat membuat teks menjadi tebal, yaitu <strong> dan <b>. Penting untuk memahami perbedaan semantik di antara keduanya.

Elemen <strong> secara semantik digunakan untuk memberikan penekanan atau kepentingan yang kuat pada teks, sehingga menjadi pilihan yang paling umum untuk membuat teks tebal. Sebaliknya, elemen <b> secara semantik berarti hanya menonjolkan teks secara tampilan, yang tidak selalu menjadi pilihan terbaik untuk teks yang layak mendapat perhatian utama. Kita perlu menilai tingkat pentingnya teks yang ingin dibuat tebal dan memilih elemen yang sesuai.

Berikut adalah dua opsi HTML untuk membuat teks tebal dalam praktiknya:

<!-- Strong importance/Bagian penting yang perlu ditonjolkan -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Hanya untuk membedakan tampilannya -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

Teks Miring dengan Emphasis​

Untuk membuat teks menjadi miring, sekaligus memberikan penekanan, kita menggunakan elemen tingkat inline <em>. Seperti halnya elemen untuk teks tebal, ada dua elemen berbeda yang dapat memiringkan teks, masing-masing dengan makna semantik yang sedikit berbeda.

Elemen <em> digunakan secara semantik untuk memberikan penekanan yang ditekankan pada teks; karena itu elemen ini menjadi pilihan paling umum untuk memiringkan teks. Opsi lainnya, yaitu elemen <i>, digunakan secara semantik untuk menyampaikan teks dalam suara atau nada yang berbeda, seolah-olah berada di dalam tanda kutip. Sekali lagi, kita perlu menilai tingkat pentingnya teks yang ingin dimiringkan dan memilih elemen yang sesuai.

Berikut adalah kode HTML untuk membuat teks miring:

<!-- Teks yang ditekankan -->
<p>I <em>love</em> Chicago!</p>

<!-- Suara atau nada alternatif -->
<p>The name <i>Shay</i> means a gift.</p>

Elemen-elemen tingkat teks ini sangat berguna untuk menghidupkan konten kita. Selain elemen-elemen tersebut, ada juga elemen yang berbasis struktur. Jika elemen berbasis teks mengidentifikasi heading dan paragraf, maka elemen struktural mengidentifikasi kelompok konten seperti header, artikel, footer, dan sebagainya. Mari kita lihat lebih lanjut.

Membangun Struktur​

Untuk waktu yang lama, struktur sebuah halaman web dibangun menggunakan div. Masalahnya, div tidak memberikan nilai semantik apa pun, sehingga cukup sulit untuk menentukan maksud dari pembagian-pembagian tersebut. Untungnya, HTML5 memperkenalkan elemen-elemen struktural baru, termasuk <header>, <nav>, <article>, <section>, <aside>, dan <footer>.

Semua elemen baru ini dimaksudkan untuk memberikan makna pada pengorganisasian halaman kita dan meningkatkan semantik struktur. Semuanya merupakan elemen tingkat block dan tidak memiliki posisi atau gaya bawaan. Selain itu, semua elemen ini dapat digunakan lebih dari satu kali dalam satu halaman, selama setiap penggunaannya mencerminkan makna semantik yang tepat.

Mari kita lanjutkan dan melihatnya lebih dekat.

Elemen <header>, seperti namanya, digunakan untuk menandai bagian atas dari sebuah halaman, artikel, section, atau bagian lain dari sebuah halaman. Secara umum, elemen <header> dapat mencakup sebuah heading, teks pengantar, dan bahkan navigasi.

<header>...</header>
tip

Elemen <header> vs. <head> vs. <h1> hingga <h6>​

Mudah untuk tertukar antara elemen <header> dengan elemen <head> atau elemen heading <h1> hingga <h6>. Ketiganya memiliki makna semantik yang berbeda dan harus digunakan sesuai dengan maknanya masing-masing. Sebagai referensi:

Elemen <header> adalah elemen struktural yang menandai bagian heading dari suatu segmen halaman. Elemen ini berada di dalam elemen <body>.

Elemen <head> tidak ditampilkan pada halaman dan digunakan untuk memuat metadata, termasuk judul dokumen serta tautan ke file eksternal. Elemen ini berada langsung di dalam elemen <html>.

Elemen heading, <h1> hingga <h6>, digunakan untuk menandai berbagai tingkat heading teks di seluruh halaman.

Elemen <nav> menandai sebuah bagian yang berisi tautan navigasi utama pada sebuah halaman. Elemen <nav> sebaiknya hanya digunakan untuk bagian navigasi utama, seperti navigasi global, daftar isi, tautan sebelumnya/berikutnya, atau kelompok tautan navigasi penting lainnya.

Pada umumnya, tautan yang berada di dalam elemen <nav> akan mengarah ke halaman lain di dalam website yang sama atau ke bagian lain dari halaman web yang sama. Tautan satuan atau yang bersifat insidental tidak seharusnya dibungkus di dalam elemen <nav> tautan tersebut sebaiknya menggunakan elemen anchor, <a> saja.

<nav>...</nav>

Artikel​

Elemen <article> digunakan untuk menandai sebuah bagian konten yang berdiri sendiri yang dapat didistribusikan atau digunakan secara terpisah ditempat lain tanpa "merusak" suatu halaman. Kita sering menggunakan elemen <article> untuk menandai posting blog, artikel berita, konten yang dikirim oleh pengguna, dan sejenisnya.

Saat memutuskan apakah akan menggunakan elemen <article>, kita perlu menentukan apakah konten di dalam elemen tersebut dapat digunakan di tempat lain tanpa banyak perubahan atau tidak. Jika konten di dalam elemen <article> diambil dari konteks halaman dan ditempatkan, misalnya, di dalam sebuah email atau media cetak, konten tersebut seharusnya tetap dapat dipakai.

<article>...</article>

Section​

Elemen <section> digunakan untuk menandai pengelompokan konten yang bersifat tematis, yang umumnya (meskipun tidak selalu) mencakup sebuah heading. Pengelompokan konten di dalam elemen <section> dapat bersifat umum, tetapi berguna untuk menandai bahwa seluruh konten tersebut saling berkaitan.

Elemen <section> umumnya digunakan untuk memecah sebuah halaman dan memberikan hierarki pada konten.

<section>...</section>

Kapan Menggunakan <article>, <section>, atau <div>​

Terkadang cukup sulit untuk menentukan elemen mana diantara <article>, <section>, atau <div> yang paling tepat untuk digunakan berdasarkan makna semantiknya. Kuncinya, seperti pada setiap keputusan semantik, adalah melihat pada kontennya.

Baik elemen <article> maupun <section> berkontribusi pada struktur dokumen dan membantu membentuk kerangka dokumen. Jika konten hanya dikelompokkan untuk keperluan styling dan tidak memberikan nilai pada kerangka dokumen, gunakan elemen <div>.

Jika konten menambah kerangka dokumen dan dapat didistribusikan atau disindikasikan secara mandiri, gunakan elemen <article>.

Jika konten menambah kerangka dokumen dan mewakili pengelompokan konten yang bersifat tematis, gunakan elemen <section>.

Aside​

Elemen <aside> menampung konten, seperti sidebar, sisipan, atau penjelasan singkat, yang berhubungan secara tidak langsung dengan konten di sekitarnya. Misalnya, ketika digunakan di dalam elemen <article>, elemen <aside> dapat menandai konten yang berkaitan dengan penulis artikel tersebut.

Kita mungkin secara naluriah membayangkan elemen <aside> sebagai elemen yang muncul di sisi kiri atau kanan halaman. Namun, perlu diingat bahwa semua elemen struktural, termasuk elemen <aside>, merupakan elemen tingkat block dan karenanya akan tampil pada baris baru, menempati seluruh lebar yang tersedia dari halaman atau dari elemen tempat ia dinest, yang juga dikenal sebagai elemen induknya.

<aside>...</aside>

Kita akan bahas bagaimana mengatur posisi elemen seperti di kiri atau kanan nanti di bab 5.

Elemen <footer> menandai bagian penutup atau akhir dari sebuah halaman, artikel, section, atau segmen lain dari sebuah halaman. Secara umum, elemen <footer> berada di bagian bawah dari elemen induknya. Konten di dalam elemen <footer> seharusnya berupa informasi yang relevan dan tidak menyimpang dari dokumen atau section tempat elemen tersebut berada.

<footer>...</footer>

Dengan menguasai elemen struktural dan elemen berbasis teks, pemahaman HTML kita benar-benar mulai terbentuk. Sekarang adalah waktu yang tepat untuk kembali ke website Styles Conference kita dan melihat apakah kita bisa memberinya struktur yang sedikit lebih baik.

Studi Kasus​

Saat ini, website Styles Conference kita belum memiliki struktur yang jelas—dan juga belum memiliki banyak konten. Mari kita luangkan waktu untuk sedikit mengembangkan halaman beranda kita.

  1. Dengan menggunakan file index.html yang sudah ada, mari kita tambahkan elemen <header>. Elemen <header> kita seharusnya mencakup elemen <h1> yang sudah ada; mari juga tambahkan elemen <h3> sebagai tagline untuk mendukung elemen <h1> tersebut.

    <header>
    <h1>Styles Conference</h1>
    <h3>August 24&ndash;26th &mdash; Chicago, IL</h3>
    </header>

  2. Setelah elemen <header>, mari tambahkan satu grup konten baru dengan elemen <section> yang memperkenalkan konferensi kita. Kita awali bagian ini dengan satu elemen <h2> baru beserta satu paragraf yang sudah ada.

    <section>
    <h2>Dedicated to the Craft of Building Websites</h2>
    <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
    </section>

  3. Setelah pengenalan konferensi kita, mari tambahkan satu kelompok konten lagi yang memberi gambaran singkat tentang beberapa halaman yang akan kita tambahkan, yaitu halaman Speakers, Schedule, dan Venue. Setiap halaman yang kita perkenalkan ini juga sebaiknya berada di dalam section-nya sendiri dan menyertakan teks pendukung.

    Kita akan mengelompokkan semua teaser tersebut di dalam sebuah elemen <section>, dan setiap teaser individu juga akan dibungkus di dalam elemen <section>. Secara keseluruhan, kita akan memiliki tiga elemen <section> di dalam satu elemen <section> lainnya, dan itu tidak masalah. Setelah pengantar konferensi kita, mari tambahkan satu kelompok konten lagi yang memberi gambaran singkat tentang beberapa halaman yang akan kita tambahkan, yaitu halaman Speakers, Schedule, dan Venue. Setiap halaman yang kita perkenalkan ini juga sebaiknya berada di dalam section-nya sendiri dan menyertakan teks pendukung.

    Kita akan mengelompokkan semua teaser tersebut di dalam sebuah elemen <section>, dan setiap teaser individu juga akan dibungkus di dalam elemen <section>. Secara keseluruhan, kita akan memiliki tiga elemen <section> di dalam satu elemen <section> lainnya, dan itu tidak masalah.

    <section>

        <section>
            <h5>Speakers</h5>
            <h3>World-Class Speakers</h3>
            <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
        </section>

        // ... untuk section lain, coba buat sendiri dengan melihat gambar hasilnya di bawah

    </section>

  4. Terakhir, mari kita tambahkan informasi hak cipta kita di dalam elemen <footer> pada bagian akhir halaman. Untuk melakukannya, mari gunakan elemen <small>, yang secara semantik merepresentasikan catatan samping dan cetakan kecil—sangat cocok untuk hak cipta kita.

    Secara umum, konten di dalam elemen <small> akan dirender sebagai teks kecil, tetapi reset CSS kita akan mencegah hal tersebut terjadi.

    <footer>
        <small>&copy; Styles Conference</small>
    </footer>

Sekarang kita bisa lihat halaman utamanya mulai terbentuk.

tip

Pengodean Karakter Khusus​

Elemen <h3> di dalam elemen <header>, serta elemen <small> di dalam elemen <footer>, memiliki beberapa hal menarik. Secara khusus, beberapa karakter khusus di dalam elemen-elemen tersebut telah dikodekan.

Karakter khusus mencakup berbagai tanda baca, huruf beraksen, dan simbol. Jika diketik langsung ke dalam HTML, karakter-karakter ini dapat disalahartikan atau dianggap sebagai karakter yang berbeda; karena itu karakter-karakter tersebut perlu dikodekan.

Setiap karakter yang dikodekan akan diawali dengan tanda ampersand, &, dan diakhiri dengan tanda titik koma, ;. Bagian di antara ampersand dan titik koma merupakan kode unik dari sebuah karakter, baik berupa nama maupun kode numerik.

Sebagai contoh, kata “resumé” akan dikodekan sebagai resum&eacute;. Di dalam header kita telah mengodekan tanda hubung en dan em, dan di dalam footer kita telah mengodekan simbol hak cipta. Sebagai referensi, daftar panjang pengodean karakter dapat ditemukan di Copy Paste Character.

Karena halaman utama sudah mulai terbentuk, mari kita bahas cata membuat hyperlink sehingga kita bisa menambahkan halaman-halaman baru yang dibutuhkan

Selain teks, salah satu komponen inti dari Internet adalah hyperlink, yang memberikan kemampuan untuk menautkan dari satu halaman web atau sumber ke yang lain. Hyperlink dibuat menggunakan elemen <a>. Untuk membuat sebuah tautan dari satu halaman (atau sumber) ke yang lain, diperlukan atribut href, yang dikenal sebagai hyperlink reference. Nilai atribut href menentukan tujuan dari tautan tersebut.

Sebagai contoh, ketika teks “Shay”, yang dibungkus di dalam elemen anchor dengan nilai atribut href http://shayhowe.com, diklik, pengguna akan dibawa ke website penulis.

<a href="http://shayhowe.com">Shay</a>
tip

Membungkus Elemen Block dengan Anchor​

Elemen <a> adalah elemen inline, dan menurut standar web, elemen inline tidak boleh membungkus elemen tingkat block. Namun, dengan diperkenalkannya HTML5, elemen anchor secara khusus diizinkan untuk membungkus elemen tingkat block, inline, atau jenis elemen lainnya. Ini merupakan penyimpangan dari konvensi standar, tetapi diperbolehkan agar seluruh blok konten pada sebuah halaman dapat dijadikan sebagai tautan.

Relative & Absolute Path​

Dua jenis tautan yang paling umum adalah tautan ke halaman lain dalam website yang sama atau tautan ke website lain. Tautan-tautan ini ditentukan oleh nilai atribut href, yang juga dikenal sebagai path.

Tautan yang mengarah ke halaman lain di dalam website yang sama akan menggunakan relative path, yang tidak menyertakan domain (.com, .org, .edu, dan sebagainya) di dalam nilai atribut href. Karena tautan tersebut mengarah ke halaman lain dalam website yang sama, nilai atribut href cukup berisi nama file dari halaman yang dituju, misalnya about.html.

Jika halaman yang ditautkan berada di dalam direktori atau folder yang berbeda, nilai atribut href juga perlu mencerminkan hal tersebut. Misalnya, jika halaman about.html berada di dalam direktori pages, maka relative path-nya adalah pages/about.html.

Untuk menautkan ke website lain di luar website saat ini diperlukan absolute path, di mana nilai atribut href harus mencakup domain lengkap. Sebuah tautan ke Google, misalnya, harus menggunakan nilai atribut href http://google.com, dimulai dengan http dan menyertakan domain, dalam hal ini .com.

Pada contoh ini, mengklik teks “About” akan membuka halaman about.html di dalam browser kita. Sebaliknya, mengklik teks “Google” akan membuka http://google.com/ di dalam browser kita.

<!-- Relative Path -->
<a href="about.html">About</a>

<!-- Absolute Path -->
<a href="http://www.google.com/">Google</a>

Menautkan ke Alamat Email​

Terkadang kita ingin membuat sebuah hyperlink ke alamat email kita—misalnya teks tautan “Email Me” yang, ketika diklik, akan membuka aplikasi email bawaan pengguna dan mengisi sebagian isi email secara otomatis. Paling tidak, alamat email tujuan akan terisi; informasi lain seperti subjek dan isi pesan juga dapat ditambahkan.

Untuk membuat tautan email, nilai atribut href harus diawali dengan mailto: diikuti oleh alamat email tujuan. Sebagai contoh, untuk membuat tautan email ke shay@awesome.com, nilai atribut href adalah mailto:shay@awesome.com.

Selain itu, subjek, isi pesan, dan informasi lain pada email juga dapat diisi. Untuk menambahkan baris subjek, kita sertakan parameter subject= setelah alamat email. Parameter pertama setelah alamat email harus diawali dengan tanda tanya, ?, agar terikat dengan path hyperlink. Jika subjek terdiri dari beberapa kata, spasi harus dikodekan menggunakan %20.

Menambahkan isi pesan dilakukan dengan cara yang sama seperti menambahkan subjek, kali ini menggunakan parameter body= di dalam nilai atribut href. Karena kita mengikat satu parameter dengan parameter lainnya, kita perlu menggunakan tanda ampersand, &, sebagai pemisah. Seperti pada subjek, spasi harus dikodekan menggunakan %20, dan baris baru harus dikodekan menggunakan %0A.

Secara keseluruhan, sebuah tautan ke shay@awesome.com dengan subjek “Reaching Out” dan isi pesan “How are you” memerlukan nilai atribut href berupa mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you.

Berikut adalah rincian lengkapnya:

<a href="mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>

Membuka Tautan di Jendela Baru​

Salah satu fitur yang tersedia pada hyperlink adalah kemampuan untuk menentukan di mana sebuah tautan akan dibuka ketika diklik. Secara default, tautan akan terbuka di jendela yang sama tempat tautan tersebut diklik, namun tautan juga dapat dibuka di jendela baru.

Untuk memicu pembukaan tautan di jendela baru, gunakan atribut target dengan nilai _blank. Atribut target menentukan di mana tautan akan ditampilkan, dan nilai _blank menunjukkan jendela baru.

Untuk membuka http://shayhowe.com/ di jendela baru, kodenya akan terlihat seperti berikut:

<a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

Menautkan ke Bagian dalam Halaman yang Sama​

Terkadang kita menjumpai hyperlink yang menautkan ke bagian lain dari halaman yang sama tempat tautan tersebut berada. Contoh umum dari tautan semacam ini adalah tautan “Back to top” yang membawa pengguna kembali ke bagian atas halaman.

Kita dapat membuat tautan dalam halaman dengan terlebih dahulu menetapkan atribut id pada elemen yang ingin dituju, lalu menggunakan nilai atribut id tersebut di dalam atribut href pada elemen anchor.

Menggunakan contoh tautan “Back to top”, kita dapat memberi nilai atribut id sebesar top pada elemen <body>. Selanjutnya, kita dapat membuat elemen anchor dengan nilai atribut href #top, lengkap dengan tanda pagar, untuk menautkan ke awal elemen <body>.

Kode untuk tautan dalam halaman ini akan terlihat seperti berikut:

<body id="top">
  ...
  <a href="#top">Back to top</a>
  ...
</body>

Hyperlink sangatlah berguna dan telah merevolusi cara kita menggunakan Internet. Sejauh ini kita telah membahas cara menautkan ke halaman atau website lain, serta cara membuat tautan email dan tautan ke bagian dalam halaman yang sama. Sebelum melangkah lebih jauh, mari kita buat beberapa tautan kita sendiri.

Studi Kasus​

Kini waktunya meng-upgrade Syles Conference dari single-page website menjadi satu website utuh yang terdiri atas beberapa halaman dan semua halaman tersebut akan saling terhubung lewat hyperlink.

  1. Kita mulai dengan membuat teks "Styles Conference" di dalam elemen <h1> yang ada di dalaman <header> agar tertaut ke halaman index.html.

    Karena file yang kita buka sendiri sebetulnya adalah halaman index.html, mungkin menurut kamu ini hal yang tidak perlu (dan sebetulnya iya khusus untuk halaman ini), akan tetapi karena header akan kita duplikasi ke halaman lain juga, maka hal ini menjadi lebih masuk akal di halaman-halaman tersebut.

    <h1>
        <a href="index.html">Styles Conference</a>
    </h1>

  2. Agar bisa pindah ke halaman-halaman lain, kita perlu menambahkan navigation menu menggunakan elemen <nav>, di dalam <header>. Kita akan buat halaman-halaman Speaker, Schedule, Venue dan Register.

    <header>

    ...

    <nav>
        <a href="index.html">Home</a>
        <a href="speakers.html">Speakers</a>
        <a href="schedule.html">Schedule</a>
        <a href="venue.html">Venue</a>
        <a href="register.html">Register</a>
    </nav>

    </header>

  3. Mari tambahkan juga navigasi yang sama ke elemen <footer>.

    <footer>

    ...

    <nav>
        <a href="index.html">Home</a>
        <a href="speakers.html">Speakers</a>
        <a href="schedule.html">Schedule</a>
        <a href="venue.html">Venue</a>
        <a href="register.html">Register</a>
    </nav>

    </footer>

  4. Di bagian bawah <section> tempat kita mengenalkan konferensi ini, kita juga akan memiliki sebuah tautan untuk mendaftar. Tempatkan tautan tersebut di bawah paragraf.

<section>

  ...

  <a href="register.html">Register Now</a>

</section>
  1. Jangan lupa untuk menambahkan sebuah tautan di setiap <h3> dan <h5> ke halaman-halaman mereka masing-masing. Pastikan semua bagian terhubung.
<section>

  <section>
    <a href="speakers.html">
      <h5>Speakers</h5>
      <h3>World-Class Speakers</h3>
    </a>
    <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
  </section>

  ...

</section>

  1. Sekarang kita perlu membuat beberapa file baru. Buat speakers.html, schedule.html, venue.html, dan register.html. Keempat file tersebut harus berada di folder yang sama dengan file index.html. Karena kita menyimpannya di folder yang sama, maka setiap tautan akan bekerja dengan seharusnya.

    Untuk memastikan setiap halaman terlihat sama, pastikan file-file baru ini memiliki struktur dokumen, <header> dan <footer> yang sama dengan file index.html.

Sekarang kita sudah resmi untuk memiliki website utuh dengan beberapa halaman.

Demo dan Source Code​

Berikut ini contoh utuh dari studi kasus yang sudah dilakukan bila kamu mengalami kesulitan saat mengaplikasikannya.

Lihat hasilnya di sini atau Download source code di sini

Ringkasan​

Semantik, seperti yang dibahas dalam pelajaran ini, sangat penting untuk memberikan struktur dan makna pada HTML kita. Ke depannya, kita akan secara berkala memperkenalkan elemen-elemen baru, yang masing-masing memiliki makna semantiknya sendiri. Makna dari semua elemen inilah yang akan memberikan nilai terbesar pada konten kita.

Sekali lagi, dalam pelajaran ini kita telah membahas hal-hal berikut:

  • Apa itu semantik dan mengapa hal tersebut penting
  • <div> dan <span>, serta perbedaan antara elemen tingkat block dan inline
  • Elemen berbasis teks mana yang paling tepat merepresentasikan konten sebuah halaman
  • Elemen struktural HTML5 dan cara mendefinisikan struktur serta organisasi konten dan halaman
  • Cara menggunakan hyperlink untuk berpindah antar halaman web atau website

Mudah-mudahan kamu mulai merasa cukup nyaman dengan HTML. Masih banyak hal yang perlu dipelajari, tetapi fondasinya sudah terbentuk. Selanjutnya, kita akan belajar CSS secara lebih mendalam.