Dalam aktivitas sebelumnya, Anda telah mempelajari:
- Dasar-dasar tag dan elemen HTML.
- Cara menyusun halaman web.
- HTML semantik dan praktik terbaik.
Dengan artikel ini, Anda terus meningkatkan pengetahuan HTML Anda dan membahas elemen HTML tambahan.
Elemen konten teks
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Elemen-elemen ini mendukung pembuatan konten teks dan menambahkan struktur, gaya, dan makna. Ada beberapa bagian konten teks yang dapat menggabungkan elemen berikut.
Elemen blockquote
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Contoh ini menunjukkan cara menggunakan elemen <blockquote>
, yang menampilkan kutipan terkenal karya Mahatma Gandhi. Ada begitu banyak kutipan bagus di luar sana yang memberikan konten dan makna yang berkesan. Pikirkan tentang beberapa tokoh inspiratif favorit Anda dan kutipan mereka.
Gunakan elemen <blockquote>
saat menggunakan kutipan dan referensi informasi dari sumber. Elemen <blockquote>
membuat indentasi dan perataan unik dalam presentasi, serta menggunakan tag pembuka dan penutup. <blockquote>
sangat membantu saat menggunakan kutipan yang lebih panjang yang mencakup beberapa baris teks.
Anda juga dapat menggunakan berbagai elemen dalam elemen <blockquote>
, seperti header, paragraf, atau daftar.
Elemen <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Sering kali, halaman web akan memiliki bagian FAQ dan informasi tambahan yang tersedia untuk pengguna. Ada bagian FAQ yang umum untuk informasi produk, itinerari perjalanan, atau jenis skenario tanya jawab apa pun.
Elemen <details>
berguna dengan menggunakan widget yang diungkapkan yang menyimpan informasi tambahan. Elemen ini menyertakan fungsi tombol bawaan serta pengguna dapat membuka dan menutup tombol. Saat tombol terbuka, konten informasi tambahan akan diperluas dan dapat dibaca oleh pengguna. Saat tombol ditutup, konten informasi tambahan akan disembunyikan dari pengguna. Untuk menamai widget <details>
itu sendiri, gunakan elemen <summary>
.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Ini adalah penggunaan elemen <figure>
. Di sini Anda melihat bahwa <figure>
, yang digunakan bersama dengan elemen <figcaption>
, dapat digunakan untuk meningkatkan pengalaman visual.
Anda melihat gambar di seluruh web, dan data visual lainnya yang bermanfaat setiap saat. Elemen visual membantu menarik perhatian pengunjung dan menciptakan pengalaman pengguna yang luar biasa. Elemen <figure>
adalah cara memberi label pada gambar, tabel, diagram, dll. Cara ini berfungsi dengan membuat konten mandiri yang terkait dengan konten utama.
Elemen <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Elemen <time>
memberikan makna dan makna semantik, sehingga memungkinkan fungsionalitas yang lebih baik dengan aktivitas seperti menjadwalkan janji temu online, memublikasikan tanggal dan waktu untuk artikel blog, arsip, dll. Beberapa contoh situs yang akan menggunakan elemen <time>
termasuk menggunakan kalender Google, memublikasikan artikel secara live di platform, atau membaca arsip sejarah online dari situs perpustakaan.
Elemen <time>
mereferensikan waktu, dan dapat mewakili waktu untuk format 24 jam atau tanggal tertentu yang dapat disesuaikan untuk zona waktu dan lokasi. Elemen ini memerlukan tag pembuka dan penutup, <time>
dan </time>
. Anda dapat menambahkan atribut datetime
sehingga tanggal dapat dibaca dalam format yang dapat dibaca mesin.
Metadata dokumen
<title>Sarah's Favorite Food Recipes</title>
Setiap kali Anda mengetik URL situs, ada nama <title>
yang dapat dibaca di kolom browser atau tab halaman web. Ini adalah nama judul yang Anda lihat diberikan untuk sebuah laman web. Elemen ini penting dan digunakan oleh mesin telusur untuk menampilkan daftar halaman web terkait di hasil penelusuran. Panjang judul dapat bervariasi dari yang pendek dan deskriptif, hingga lebih panjang dan lebih deskriptif.
Skenario: Anda memiliki halaman web yang ingin Anda pikirkan, tetapi tidak dapat mengingat URL situs web spesifik. Ketik kata kunci di mesin telusur. Mesin telusur membantu melacak halaman web yang Anda cari, dan Anda dapat melihat nama <title>
yang muncul di penelusuran.
Elemen konten yang disematkan
Selain konten teks, ada berbagai elemen konten tambahan yang dapat digunakan.
Elemen <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Saat menyelesaikan belanja item secara online dan mengklik opsi pembayaran Anda, seperti PayPal atau Apple Pay, fitur ini biasanya ditambahkan ke halaman web dengan <iframe>
. Melihat peta online untuk menelusuri bisnis lokal adalah pengalaman umum lainnya. Jenis pengalaman pengguna ini di halaman web dapat ditambahkan dengan iframe. Pada contoh di atas, Anda melihat URL Wikipedia di dalam iframe, yang berjudul "Wikipedia".
Elemen <iframe>
memungkinkan Anda menyisipkan konten dari sumber lain dan menyematkan frame dalam halaman web. Fungsi ini membuat bingkai berbentuk persegi panjang dan menampilkan konten di browser. Bingkai memungkinkan presentasi tata letak berbentuk jendela dalam elemen <iframe>
. Ini adalah cara ampuh untuk menambahkan konten ke halaman web untuk meningkatkan pengalaman.
Elemen formulir
<progress max="100" value="30"> 30% </progress>
Saat menonton video yang lebih panjang, menyampaikan materi, atau mengisi aplikasi yang lengkap, memiliki status progres visual dapat membantu melacak kemajuan Anda. Elemen <progress>
berguna untuk jenis skenario ini.
Elemen ini digambarkan sebagai panel visual dengan warna latar belakang. Panel visual dapat memiliki ukuran dan warna latar belakang yang bervariasi. Dengan status progres, Anda dapat memilih untuk menggunakan atribut max
dan value
. Atribut max
menetapkan angka floating point dan atribut value
mencatat seberapa banyak progres yang telah dilakukan pada tugas.
Pembuatan Naskah
<canvas id="canvas"></canvas>
Agar dapat menggambar grafik dan animasi secara real time, gunakan elemen <canvas>
. Tempatkan elemen <canvas>
ke dalam halaman web HTML Anda untuk membuat kanvas. Elemen ini memerlukan kode JavaScript agar fungsi dapat menggambar dan membuat grafik.
Elemen konten tabel
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Elemen <table>
Elemen <table>
membuat tabel. Ini adalah titik awal untuk menambahkan elemen tambahan dengan baris dan kolom. Tabel sering muncul di laman web, menjadi cara yang berguna untuk mengatur dan menampilkan informasi. Salah satu kasus penggunaan untuk menggunakan elemen <table>
adalah menampilkan informasi tabel kepada pengguna, seperti jenis informasi yang dapat Anda temukan di spreadsheet.
Elemen <th>
Elemen <th>
adalah header untuk sekelompok sel.
Elemen <tr>
Elemen <tr>
menentukan baris sel dalam tabel. Dari sini, Anda dapat menambahkan data sel tertentu.
Elemen <td>
Elemen <td>
membuat sel, menambahkan konten yang diperlukan.
Kesimpulan
Dalam artikel ini, Anda menemukan elemen HTML tambahan dan mengembangkan keterampilan coding Anda. Anda telah mempelajari lebih lanjut tentang konten, teks inline, konten yang disematkan, dan elemen tabel. Anda sekarang telah membangun pemahaman Anda tentang elemen HTML tambahan. Pertahankan pencapaian ini.