Pada dasarnya, HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang berguna untuk membangun dan mengatur struktur halaman web. Struktur HTML ini menjadi salah satu elemen kunci dalam dunia web yang memungkinkan pembuatan dan pengaturan konten website.
Apa Itu Struktur HTML ?
HTML berperan penting sebagai bahasa yang mendasari pembangunan web. Tanpa HTML, tidak ada konten web yang bisa dipahami peramban, sehingga sulit untuk diakses pengguna. Saat memeriksa halaman web menggunakan alat pengembang pramban, pengguna akan melihat sekumpulan div tag. Selain itu, ada pula beberapa konten yang terbungkus dalam satu span tag.
Fungsi dari Struktur HTML
Apa saja fungsi dari struktur-struktur ini? Simak pembahasannya sebagai berikut.
Tag div HTML
Tag div merupakan elemen tingkat blok generik yang berguna untuk mengaitkan dan mengelompokkan bagian halaman web. Biasanya, struktur HTML ini digunakan untuk bagian halaman web yang lebih besar seperti header, footer, konten utama dan seterusnya.
Selain itu, pengguna juga bisa memanfaatkan tag div untuk mengelompokkan konten serupa. Misalnya seperti teks, gambar, video dan sebagainya.
Span Tag HTML
Tag span merupakan elemen sebaris yang bisa digunakan untuk menonjolkan sebagian kecil konten dengan CSS ataupun JavaScript. Sebaiknya, pengguna tidak menumpuk span. Sebagai gantinya, pengguna bisa menempatkan beberapa tag span dalam elemen tingkat blok.
Secara keseluruhan, ada perbedaan yang terlihat menonjol dalam penggunaan struktur HTML, seperti div dan span. Dalam hal ini, tag span menandai elemen tingkat baris, sementara div menandai elemen tingkat blok.
Kemudian, span digunakan untuk mengelompokkan potongan teks kecil. Berbeda dengan div yang digunakan untuk mengelompokkan potongan teks besar secara bersamaan. Terakhir, tag span tidak boleh disarangkan untuk menghindari kebingungan. Sementara itu, penggunaan tag div memang cenderung bersarang.
Kapan Harus Menggunakan Span atau Div?
Sebaiknya, pengguna memanfaatkan span jika ingin memberi gaya berbeda pada bagian tertentu dari konten atau memanipulasinya dengan JavaScript. Di samping itu, pengguna juga bisa menjadikannya sebagai wadah untuk elemen sebaris. Di sisi lain, pengguna harus menggunakan div tag jika ingin mengelompokkan potongan konten besar secara bersamaan. Tag div ini juga diperlukan ketika pengguna ingin menata elemen pada halaman web.
Struktur pada HTML
Secara umum, HTML terdiri dari rangkaian elemen atau tag yang berguna untuk mengelompokkan dan memformat konten. Setiap tag dalam struktur HTML ini membawa berbagai fungsi khusus. Misalnya seperti menandai judul, paragraf, gambar, tautan, dan elemen-elemen lainnya dalam halaman web.
HTML sendiri memiliki struktur dasar yang harus diikuti dalam setiap halaman web. Berikut berbagai komponen utama dalam struktur tersebut.
- <!DOCTYPE html>: Deklarasi tipe dokumen yang memberi tahu peramban bahwa halaman web menggunakan HTML baru. <!DOCTYPE> digunakan untuk memberi tahu browser versi HTML yang digunakan pada halaman web. Elemen ini sebenarnya bukan tag HTML, melainkan instruksi kepada browser, bersifat null element tanpa tag penutup dan tidak boleh berisi konten. Ada beberapa tipe deklarasi HTML, seperti HTML 4.01 Strict, HTML 4.01 Frameset, dan HTML 4.01 Transitional.
- <html>: Tag penanda untuk awal dokumen HTML. <html> berfungsi sebagai root element dari dokumen HTML atau XHTML, memberi tahu browser bahwa dokumen tersebut adalah HTML. Elemen ini membungkus seluruh konten HTML dan membutuhkan tag pembuka serta penutup.
- <head>: Bagian informasi tentang dokumen. Misalnya seperti judul halaman, meta data, dan penghubung ke berkas eksternal seperti CSS dan JavaScript.
- <title>: Judul halaman yang akan tampil di tab browser dan dan berperan penting dalam optimasi mesin pencari jika memuat kata kunci yang relevan.
- <body>: Bagian berisi konten utama halaman web. Misalnya seperti teks, gambar, tabel, tautan, video dan elemen-elemen lainnya.
- <h1>, <h2>, <h3>, …, <h6>: Tag untuk menandai judul atau heading. Kode <h1> sebagai heading tertinggi dan <h6> paling rendah.
- <p>: Tag untuk menandai paragraf teks.
- <a>: Tag untuk membuat tautan atau hyperlink.
Fungsi HTML dalam Sebuah Web
Hingga saat ini, struktur HTML masih menjadi bagian penting dalam ekosistem web modern. Berikut fungsi penggunaan HTML dalam sebuah web.
Struktur Konten
HTML memungkinkan para pengembang web untuk mengatur dan mengelompokkan konten ke berbagai elemen. Misalnya seperti paragraf, heading, daftar, tabel, dan lainnya. Hal ini membantu pengguna untuk memahami berbagai struktur informasi di halaman web.
Tautan dan Navigasi
Keberadaan HTML memungkinkan pembuatan tautan atau hyperlink yang menghubungkan halaman web satu dengan lainnya. Hal ini memungkinkan pengguna untuk menavigasi antara halaman web dengan cara paling mudah.
Media dan Multimedia
Selain teks, keberadaan HTML juga memberikan dukungan media seperti gambar, video, dan audio. Hal ini memungkinkan pengembang untuk menyajikan konten yang lebih interaktif kepada para pengguna.
Interaktivitas
Keberadaan struktur HTML mampu mendukung elemen-elemen interaktif seperti formulir. Hal ini memungkinkan pengguna untuk mengisi data atau memberikan umpan balik tertentu.
Aksesibilitas
Keberadaan HTML memiliki fitur penting yang memungkinkan pengembang untuk meningkatkan aksesibilitas web. Misalnya, menyediakan teks alternatif untuk gambar, sehingga pengguna disabilitas visual bisa memahami konten terkait.
Kompatibilitas Cross-Browser
HTML sengaja dirancang khusus untuk bekerja di berbagai peramban web berbeda. Hal ini memastikan bahwa halaman web bisa diakses dengan konsisten oleh sebagian besar pengguna internet.
Baca juga: Kenali Div Mulai dari Fungsi, Contoh dan Keunggulannya di HTML
Cara Menyusun Konten dalam HTML
Ketika menyusun konten HTML, pengguna bisa memanfaatkan berbagai elemen baik untuk menampilkan teks, gambar, tautan dan sebagainya. Berikut penjelasan lengkapnya.
Heading dan Paragraf
Pengguna bisa membuat judul atau heading dalam HTML menggunakan tag <h1> hingga <h6>.
Daftar (Ordered dan unordered)
Dalam HTML tersedia dua jenis daftar, yakni ordered dan unordered. Ordered list menggunakan angka atau huruf sebagai tanda penomoran. Sementara unordered list menggunakan simbol seperti bullet atau lingkaran kecil.
Gambar
Gunakan tag <img> untuk menyisipkan gambar. Jenis tag ini membutuhkan atribut src untuk menentukan lokasi atau URL gambar. Saat melakukan tahapan ini, pastikan pengguna memberikan deskripsi gambar dengan menggunakan atribut alt. Nantinya, deskripsi tersebut akan ditampilkan jika gambar tidak bisa dimuat atau dibaca oleh para pengguna.
Tautan (Link)
Tautan atau link pada struktur HTML berguna untuk menghubungkan halaman web dengan halaman lain. Hal ini berlaku baik dalam situs web yang sama maupun di luar situs web tersebut. Jika ingin membuat tautan, pengguna bisa memanfaatkan tag <a> dengan atribut href. Hal ini dilakukan untuk menentukan URL yang menjadi tujuan tautan.
Baca juga: Mengenal Tag dan Fungsinya dalam Elemen Paragraf HTML
Cara Menambahkan Styling dengan CSS
Pengguna bisa menambahkan styling pada elemen-elemen HTML. Dalam hal ini, pengguna bisa memanfaatkan CSS atau Cascading Style Sheets. Berikut beberapa tahapannya.
Gunakan Inline CSS
Inline CSS berguna untuk memberikan gaya langsung pada elemen HTML. Dalam tag elemen terkait, pengguna bisa memanfaatkan atribut style untuk menentukan properti gaya.
Gunakan CSS Internal
Umumnya, CSS internal berada di dalam tag <style> dan di dalam tag <head>. Dengan menggunakan CSS internal, pengguna bisa menggabungkan gaya untuk beberapa elemen dalam satu halaman.
Gunakan CSS Eksternal
Sejatinya, CSS eksternal berada di dalam file terpisah dengan ekstensi .css. File CSS ini dihubungkan ke halaman HTML dengan menggunakan tag <link>. Melalui CSS internal ini, pengguna bisa memisahkan struktur HTML dan gaya CSS.
Cara Kerja dari HTML
Mungkin Anda mulai bertanya-tanya, bagaimana sebenarnya cara kerja bahasa markup seperti HTML. Bagaimana kumpulan tag berubah menjadi website menarik yang bisa dibaca banyak orang? Prosesnya cukup unik. Setelah dokumen HTML dibuat menggunakan aplikasi editor HTML, file tersebut disimpan dengan format .htm atau .html.
Satu website biasanya terdiri dari banyak halaman, misalnya halaman utama, blog, atau halaman kontak, sehingga pengguna dapat membuat lebih dari satu file HTML. Setiap dokumen HTML berisi berbagai komponen yang membentuk struktur halaman, seperti konten utama, heading, dan paragraf. File HTML ini dapat dibuka menggunakan berbagai browser.
Agar bisa diakses publik, file tersebut perlu diunggah secara online melalui layanan web hosting, misalnya DomaiNesia. Setelah diunggah, browser akan membaca dan melakukan rendering file HTML menjadi tampilan website yang utuh, sehingga dapat dilihat di layar perangkat dan diakses oleh banyak orang.
Baca juga: Mengenal Index HTML File Utama yang Wajib Ada di Website
Penutup
Struktur HTML yang baik bisa mempengaruhi indeks dan peringkat website dalam mesin pencari. Oleh sebab itu, pemahaman mengenai struktur ini menjadi bagian penting untuk mengoptimalkan penggunaan berbagai elemen krusial. Misalnya seperti penggunaan heading yang relevan, atribut alt pada gambar, penggunaan tag tautan paling tepat, dan lain-lain.
Struktur HTML yang baik menjadi fondasi dari website yang rapi, mudah di-maintain, dan SEO-friendly. Memahami fungsi tag dasar seperti div dan span adalah langkah penting dalam membangun situs web modern. Anda bisa menggunakan WordPress Hosting ideal untuk pemula maupun developer yang ingin langsung membangun website dengan HTML, CSS, dan CMS populer.
