Daftar isi akan muncul jika artikel memiliki heading (H2/H3)
Setelah memahami kerangka dasar dokumen HTML, langkah selanjutnya adalah mempelajari berbagai tag dan elemen yang digunakan untuk menyusun dan menampilkan konten di dalam bagian <body>. Tag-tag ini memberikan makna dan struktur pada teks, gambar, dan elemen lainnya, memungkinkan browser untuk menampilkannya dengan benar.
Elemen Heading (<h1> hingga <h6>):
Elemen heading digunakan untuk membuat judul dan subjudul dalam halaman web. <h1> merepresentasikan heading utama (paling penting), diikuti oleh <h2>, <h3>, dan seterusnya hingga <h6> yang memiliki tingkat kepentingan paling rendah. Penggunaan heading yang tepat tidak hanya membantu pengguna memahami struktur konten tetapi juga penting untuk SEO, karena mesin pencari menggunakan heading untuk mengindeks dan memahami topik utama halaman.
Contoh:
<h1>Judul Utama Artikel</h1>
<p>Ini adalah paragraf pembuka dari artikel.</p>
<h2>Subjudul Bagian 1</h2>
<p>Penjelasan lebih lanjut tentang topik bagian 1.</p>
<h3>Sub-subjudul Bagian 1.1</h3>
<p>Detail tambahan untuk sub-bagian 1.1.</p>
<h2>Subjudul Bagian 2</h2>
<p>Pembahasan mengenai topik bagian 2.</p>
Elemen Paragraf (<p>):
Elemen <p> digunakan untuk mengelompokkan teks menjadi paragraf. Browser secara otomatis menambahkan sedikit ruang sebelum dan sesudah setiap elemen <p>, membuatnya mudah dibaca.
Contoh:
<p>Ini adalah paragraf pertama. Paragraf digunakan untuk memisahkan blok teks yang berbeda dan meningkatkan keterbacaan konten.</p>
<p>Ini adalah paragraf kedua. Anda dapat memiliki banyak paragraf dalam satu halaman web untuk menyampaikan informasi yang berbeda.</p>
Elemen Link (<a>):
Elemen <a> (anchor) digunakan untuk membuat hyperlink yang menghubungkan satu halaman web dengan halaman lain, file, atau lokasi tertentu di halaman yang sama. Atribut href (hypertext reference) adalah atribut terpenting dalam tag <a>, karena menentukan tujuan dari tautan.
Contoh:
<p>Kunjungi <a href="https://www.example.com" target="_blank">Contoh Situs Web</a> untuk informasi lebih lanjut. Atribut <code>target="_blank"</code> akan membuka tautan di tab baru.</p>
<p>Anda juga bisa membuat tautan ke bagian lain di halaman ini: <a href="#bagian-tertentu">Lihat Bagian Tertentu</a>.</p>
<div id="bagian-tertentu">
<h3>Ini adalah bagian tertentu di halaman ini.</h3>
<p>Konten dari bagian yang dituju.</p>
</div>
Elemen Gambar (<img>):
Elemen <img> digunakan untuk menyisipkan gambar ke dalam halaman web. Tidak seperti kebanyakan elemen lain, <img> adalah elemen void atau self-closing, yang berarti tidak memiliki tag penutup. Atribut penting untuk <img> adalah:
src(source): Menentukan jalur atau URL ke file gambar.alt(alternative text): Menyediakan teks alternatif untuk gambar jika gambar gagal dimuat atau untuk pembaca layar (penting untuk aksesibilitas).
Contoh:
<img src="logo.png" alt="Logo Perusahaan">
<p>Gambar logo perusahaan ditampilkan di atas.</p>
Elemen List (<ul>, <ol>, dan <li>):
List digunakan untuk menyajikan informasi dalam format daftar. Ada dua jenis daftar utama:
- Unordered List (
<ul>): Membuat daftar dengan bullet points. Setiap item dalam daftar ditandai dengan tag<li>(list item).HTML<ul> <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ul> - Ordered List (
<ol>): Membuat daftar dengan nomor atau huruf. Setiap item juga ditandai dengan tag<li>.HTML<ol> <li>Buka browser</li> <li>Ketikkan alamat website</li> <li>Tekan Enter</li> </ol>
Pentingnya Struktur yang Baik:
Menggunakan tag dan elemen HTML yang tepat untuk menyusun konten sangat penting karena beberapa alasan:
- Keterbacaan: Struktur yang baik membuat konten lebih mudah dibaca dan dipahami oleh pengguna.
- Aksesibilitas: Penggunaan tag yang semantik (sesuai dengan makna konten) membantu pembaca layar dan teknologi bantu lainnya dalam menafsirkan halaman web untuk pengguna dengan disabilitas.
- SEO: Mesin pencari menggunakan struktur HTML untuk memahami topik dan hierarki konten, yang dapat mempengaruhi peringkat halaman web.
- Pemeliharaan: Kode HTML yang terstruktur dengan baik lebih mudah dibaca, dipelihara, dan dimodifikasi di kemudian hari.
Dengan memahami dan menggunakan tag dan elemen HTML ini dengan benar, Anda mulai membangun struktur yang solid untuk halaman web Anda dan menyampaikan konten dengan efektif kepada pengguna. Latihan terus-menerus dengan berbagai jenis konten akan membantu Anda semakin mahir dalam menyusun halaman web.
Komentar (0)
Login untuk dapat berkomentar
Belum ada komentar. Jadilah yang pertama mengomentari artikel ini!