Home › HTML › Memahami Blok Bangunan Web: Menyelami Elemen-Elemen HTML

Memahami Blok Bangunan Web: Menyelami Elemen-Elemen HTML

Share

HTML, singkatan dari HyperText Markup Language, adalah bahasa fundamental yang menjadi dasar pembuatan halaman web. Ia bekerja dengan menggunakan elemen-elemen (elements) yang didefinisikan melalui tag (tanda) untuk memberi tahu browser web bagaimana menampilkan konten. Artikel ini akan menjadi panduan komprehensif yang mengajak Anda untuk memahami berbagai elemen HTML secara mendalam.


Bab 1: Elemen Dasar HTML

Mari berkenalan dengan beberapa elemen dasar yang umum digunakan dalam struktur halaman web:

  • <!DOCTYPE html>: Deklarasi dokumen yang memberitahu browser tentang versi HTML yang digunakan.
  • <html>: Elemen root (akar) yang menandakan awal dan akhir dokumen HTML.
  • <head>: Elemen yang berisi informasi tentang halaman web, seperti judul (<title>), meta tag, dan link ke file eksternal (CSS, JavaScript).
  • <body>: Elemen yang berisi konten utama halaman web yang akan ditampilkan di jendela browser.


Elemen Heading (Judul):

  • <h1> - <h6>: Elemen ini digunakan untuk membuat heading (judul) dengan berbagai ukuran, <h1> sebagai heading terbesar dan <h6> sebagai heading terkecil.


Elemen Paragraf:

  • <p>: Elemen ini digunakan untuk membuat paragraf (alinea) yang berisi teks.


Elemen Pencitraan:

  • <img>: Elemen ini digunakan untuk menampilkan gambar (image). Atribut penting yang digunakan:
    • src: Menentukan lokasi file gambar.
    • alt: Teks alternatif yang akan ditampilkan jika gambar tidak bisa dimuat.


Elemen Tautan (Link):

  • <a>: Elemen ini digunakan untuk membuat hyperlink (tautan) ke halaman web lain atau bagian lain dalam halaman yang sama. Atribut penting:
    • href: Menentukan URL tujuan tautan.


Elemen Daftar (List):

  • <ul>: Elemen ini digunakan untuk membuat unordered list (daftar tidak berurut), ditandai dengan bullet point (titik).
  • <ol>: Elemen ini digunakan untuk membuat ordered list (daftar berurut), ditandai dengan nomor.
  • <li>: Elemen ini digunakan untuk membuat item (daftar) di dalam <ul> atau <ol>.


Elemen Tabel:

  • <table>: Elemen ini digunakan untuk membuat tabel.
  • <tr>: Elemen ini digunakan untuk membuat baris (row) dalam tabel.
  • <td>: Elemen ini digunakan untuk membuat sel (cell) yang berisi data dalam tabel.


Bab 2: Elemen Formulir

Elemen formulir memungkinkan pengguna untuk memasukkan informasi ke halaman web. Beberapa elemen penting:

  • <form>: Elemen root yang mendefinisikan formulir. Atribut action menentukan halaman yang akan memproses data formulir dan method menentukan metode pengiriman data (biasanya GET atau POST).
  • <input>: Elemen ini digunakan untuk membuat berbagai input field (kolom input) seperti text input, password input, checkbox, dan radio button. Atribut type menentukan jenis input field.
  • <label>: Elemen ini digunakan untuk memberi label pada elemen formulir, sehingga pengguna mengerti informasi apa yang harus dimasukkan.
  • <button>: Elemen ini digunakan untuk membuat tombol submit yang digunakan untuk mengirimkan data formulir.


Bab 3: Elemen Semantik

Elemen semantik memberikan informasi tambahan tentang konten halaman web, selain sekedar penampilan visual. Ini membantu browser web dan mesin pencari memahami struktur dan makna konten. Contoh elemen semantik:

  • <header>: Elemen yang mewakili header (kepala) halaman web, biasanya berisi logo, judul utama, dan navigasi.
  • <nav>: Elemen yang mewakili navigasi utama halaman web.
  • <article>: Elemen yang mewakili konten utama dan independen dari konten di sekitarnya, seperti artikel berita atau entri blog.
  • <section>: Elemen yang mewakili bagian tematik dari konten halaman web, seperti bagian "Produk" atau "Kontak" pada halaman web perusahaan.
  • <aside>: Elemen yang mewakili konten yang relevan, namun terpisah dari konten utama, seperti sidebar atau widget.


Bab 4: Elemen Multimedia

  • <audio>: Elemen ini digunakan untuk memutar audio (suara).
  • <video>: Elemen ini digunakan untuk menampilkan video.
  • <iframe>: Elemen ini digunakan untuk menyematkan konten dari halaman web lain ke dalam halaman web Anda.


Bab 5: Kesimpulan

Menguasai elemen-elemen HTML adalah langkah awal yang penting dalam perjalanan Anda untuk membuat dan memahami halaman web. Artikel ini hanyalah pengantar, dan masih banyak lagi elemen-elemen lain, seperti CSS dan jquery atau javascript.

HTML

Komentar

Posting Komentar