HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web.
HTML
digunakan untuk menyusun struktur konten di web, mulai dari teks, gambar, hingga elemen-elemen
interaktif lainnya. HTML menggunakan tag (kode yang ditulis di dalam tanda "< >") untuk memberi tahu
browser bagaimana menampilkan konten.
Berikut adalah penjelasan lengkap mengenai elemen-elemen HTML beserta kode dan fungsinya.
1. Struktur Dasar HTML
Setiap halaman HTML dimulai dengan struktur dasar yang terdiri dari elemen-elemen berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman -->
</body>
</html>
<!DOCTYPE html>: Mendefinisikan jenis dokumen HTML5.
<html>: Elemen root dari halaman HTML.
lang="id": Menandakan bahasa yang digunakan (dalam hal ini Bahasa Indonesia).
<head>: Bagian yang berisi metadata tentang dokumen (seperti pengaturan karakter, judul, dsb).
<meta charset="UTF-8">: Menentukan encoding karakter yang digunakan, biasanya UTF-8.
<meta name="viewport">: Mengatur tampilan halaman pada perangkat mobile.
<title>: Menentukan judul halaman yang tampil di tab browser.
<body>: Tempat di mana konten halaman web ditampilkan.
2. Elemen HTML untuk Teks
HTML memiliki berbagai elemen untuk menampilkan teks, misalnya:
<h1> hingga <h6>: Digunakan untuk judul. <h1> adalah yang terbesar dan <h6> yang terkecil.
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<p>: Membuat paragraf.
<p>Ini adalah sebuah paragraf.</p>
<b>: Menebalkan teks.
<b>Teks ini tebal.</b>
<i>: Memiringkan teks.
<i>Teks ini miring.</i>
<u>: Menggarisbawahi teks.
<u>Teks ini digarisbawahi.</u>
<em>: Menekankan teks (biasanya memiringkan secara default).
<em>Teks yang ditekankan.</em>
<strong>: Memberi penekanan kuat pada teks (biasanya dicetak tebal).
<strong>Teks penting.</strong>
3. Elemen Tautan (Links)
Tautan digunakan untuk menghubungkan satu halaman dengan halaman lain.
<a>: Digunakan untuk membuat link.
<a href="[Link] di sini untuk mengunjungi Google</a>
href: Atribut yang menunjukkan URL tujuan tautan.
target="_blank": Membuka tautan di tab baru.
<a href="[Link] target="_blank">Google</a>
4. Elemen Gambar
<img>: Menyisipkan gambar di halaman web.
<img src="[Link]" alt="Deskripsi Gambar" width="500" height="300">
src: Atribut yang menunjukkan lokasi file gambar.
alt: Atribut yang menyediakan deskripsi gambar untuk pengguna dengan gangguan penglihatan.
width dan height: Mengatur ukuran gambar.
5. Elemen Daftar (Lists)
Ada dua jenis daftar utama di HTML:
Daftar Tidak Urut (<ul>): Membuat daftar dengan tanda bullet.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Daftar Urut (<ol>): Membuat daftar bernomor.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Item Daftar (<li>): Digunakan untuk item dalam daftar.
6. Elemen Tabel
Tabel digunakan untuk menyusun data dalam baris dan kolom.
<table>: Membuat tabel.
<tr>: Membuat baris dalam tabel.
<td>: Membuat sel data dalam tabel.
<th>: Membuat sel header dalam tabel.
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Faiz</td>
<td>22</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border="1": Menambahkan garis batas pada tabel.
7. Formulir (Forms)
Formulir digunakan untuk mengumpulkan input dari pengguna.
<form>: Membuat form.
<input>: Untuk berbagai jenis input (teks, radio, checkbox, dsb.).
<label>: Memberikan label pada elemen input.
<textarea>: Untuk membuat area teks lebih besar.
<button>: Tombol untuk mengirim formulir.
<form action="[Link]" method="POST">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<input type="submit" value="Kirim">
</form>
action: URL tujuan untuk memproses data form.
method: Metode pengiriman data, bisa menggunakan "GET" atau "POST".
8. Elemen Media
Untuk menyisipkan video atau audio:
<video>: Menyisipkan video.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
controls: Menampilkan kontrol video (play, pause, volume).
<audio>: Menyisipkan audio.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
9. Elemen Div dan Span
<div>: Digunakan untuk mengelompokkan elemen blok.
<div>
<h2>Judul</h2>
<p>Isi paragraf.</p>
</div>
<span>: Digunakan untuk elemen inline.
<span>Teks ini ada di dalam span.</span>
10. CSS dan HTML
CSS (Cascading Style Sheets) digunakan untuk mendesain halaman HTML. CSS dapat ditulis di dalam
elemen <style> di bagian <head>, atau di file terpisah.
Contoh menambahkan CSS di dalam HTML:
<head>
<style>
body {
background-color: lightblue;
p{
font-size: 18px;
color: red;
</style>
</head>
11. Catatan Penting
Validasi HTML: Pastikan kode HTML yang ditulis valid dengan menggunakan validator HTML,
seperti yang ada di [Link].
Responsif: Pastikan halaman web responsif (dapat menyesuaikan dengan berbagai ukuran layar)
dengan menggunakan media query CSS atau framework seperti Bootstrap.
SEO: Gunakan elemen seperti <meta> untuk meningkatkan optimisasi mesin pencari (SEO).
Aksesibilitas: Pastikan untuk menggunakan atribut alt pada gambar dan memberi label yang
jelas pada elemen form untuk meningkatkan aksesibilitas.