HTML (HyperText Markup Language) adalah bahasa markup yang menjadi fondasi dari semua website di internet. Tanpa HTML, browser tidak akan bisa menampilkan teks, gambar, video, atau elemen lain di halaman web. HTML bukanlah bahasa pemrograman, melainkan bahasa markup yang digunakan untuk memberi struktur pada sebuah dokumen.
Bagi siswa RPL (Rekayasa Perangkat Lunak) maupun siapa pun yang ingin belajar membuat website, memahami tag HTML dasar adalah langkah pertama yang wajib dilakukan. Tag ini digunakan untuk menyusun teks, membuat tabel, menampilkan gambar, hingga membuat form input. Artikel ini akan membahas secara lengkap tag-tag HTML dasar beserta contoh penggunaannya, sehingga kamu bisa langsung praktik membuat halaman web sederhana.
baca juga:contoh soal standar deviasi
Struktur Dasar HTML
Sebuah halaman HTML memiliki struktur standar yang hampir selalu sama. Berikut contoh paling sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Penjelasan:
<!DOCTYPE html>→ memberi tahu browser bahwa dokumen ini menggunakan HTML5.<html>→ elemen root yang membungkus seluruh kode HTML.<head>→ berisi informasi meta, judul halaman, atau link ke file CSS/JavaScript.<title>→ judul halaman yang muncul di tab browser.<body>→ bagian utama yang menampilkan konten ke pengguna.
Heading: <h1> sampai <h6>
Heading digunakan untuk membuat judul dan subjudul di halaman web.
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Bagian Kecil</h3>
<h1>adalah heading terbesar, biasanya digunakan sekali untuk judul utama.<h2>hingga<h6>digunakan untuk subjudul dengan ukuran lebih kecil.
Heading juga penting untuk SEO (Search Engine Optimization) karena mesin pencari seperti Google membaca heading untuk memahami struktur konten.
Paragraf: <p>
Untuk menulis teks dalam bentuk paragraf digunakan tag <p>.
<p>Ini adalah sebuah paragraf dalam HTML. Setiap paragraf baru ditulis dengan tag p yang berbeda.</p>
Secara otomatis, browser memberi jarak antar paragraf agar teks lebih mudah dibaca.
Pemformatan Teks
HTML menyediakan beberapa tag untuk memformat teks agar lebih informatif.
<b>Teks Tebal</b>
<i>Teks Miring</i>
<u>Teks Bergaris Bawah</u>
<strong>Teks Penting</strong>
<em>Teks Ditekankan</em>
<mark>Teks Disorot</mark>
<small>Teks Lebih Kecil</small>
<b>dan<strong>→ sama-sama membuat teks tebal, tetapi<strong>lebih semantik karena menandakan teks tersebut penting.<i>dan<em>→ sama-sama miring, tetapi<em>memberi penekanan semantik.<mark>→ menyorot teks.<small>→ membuat teks lebih kecil.
Link: <a>
Tag <a> digunakan untuk membuat hyperlink yang bisa mengarahkan pengguna ke halaman lain.
<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
Atribut penting pada <a>:
href→ menentukan alamat tujuan.target="_blank"→ membuka link di tab baru.title→ memberi tooltip ketika mouse diarahkan.
Gambar: <img>
Untuk menampilkan gambar digunakan tag <img>.
<img src="foto.jpg" alt="Foto Profil" width="200" height="200">
Penjelasan:
src→ lokasi file gambar.alt→ teks alternatif jika gambar tidak bisa ditampilkan.widthdanheight→ mengatur ukuran gambar.
Daftar: <ul>, <ol>, <li>
HTML mendukung dua jenis daftar:
Daftar Tidak Berurutan
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Mangga</li>
</ul>
Daftar Berurutan
<ol>
<li>Langkah Pertama</li>
<li>Langkah Kedua</li>
<li>Langkah Ketiga</li>
</ol>
Tabel: <table>, <tr>, <th>, <td>
Tabel digunakan untuk menampilkan data dalam format grid.
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<tr>
<td>Budi</td>
<td>XI</td>
<td>RPL</td>
</tr>
<tr>
<td>Ani</td>
<td>XII</td>
<td>TKJ</td>
</tr>
</table>
<table>→ membuat tabel.<tr>→ baris tabel.<th>→ kolom judul (header).<td>→ isi data.
Formulir: <form>
Form digunakan untuk menerima input dari pengguna.
<form action="proses.php" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Kirim">
</form>
Atribut penting pada form:
action→ alamat file yang memproses data.method→ cara pengiriman data (getataupost).
Jenis input populer:
text,email,password,checkbox,radio,submit.
Multimedia: <audio> dan <video>
Menambahkan file audio atau video ke halaman HTML sangat mudah.
Audio
<audio controls>
<source src="lagu.mp3" type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
Video
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Browser Anda tidak mendukung video.
</video>
Tag Semantik HTML5
HTML5 memperkenalkan tag semantik agar struktur halaman lebih jelas.
<header>→ bagian kepala.<nav>→ navigasi.<section>→ bagian konten.<article>→ artikel independen.<aside>→ sidebar.<footer>→ bagian bawah halaman.
Contoh:
<header>
<h1>Website Sekolah</h1>
</header>
<nav>
<a href="index.html">Beranda</a> |
<a href="profil.html">Profil</a>
</nav>
<section>
<article>
<h2>Pengumuman</h2>
<p>Libur semester dimulai tanggal 15 Juni.</p>
</article>
</section>
<footer>
<p>© 2025 SMK Informatika</p>
</footer>
Komentar: <!-- -->
Komentar digunakan untuk memberi catatan pada kode HTML.
<!-- Ini adalah komentar -->
Komentar tidak akan muncul di browser, tapi berguna untuk dokumentasi kode.
Atribut Umum HTML
Selain tag, atribut juga penting dipahami. Beberapa atribut yang sering digunakan:
id→ identitas unik sebuah elemen.class→ untuk mengelompokkan elemen, biasanya digunakan bersama CSS/JavaScript.style→ menambahkan CSS langsung di tag.title→ memberi deskripsi singkat.
Contoh:
<p id="deskripsi" class="teks-merah" style="color:red;">Ini teks dengan atribut</p>
Latihan Membuat Halaman Profil
Gabungan berbagai tag di atas bisa menghasilkan sebuah halaman sederhana.
<!DOCTYPE html>
<html>
<head>
<title>Profil Saya</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
</header>
<img src="profil.jpg" alt="Foto Profil" width="150">
<p>Halo, nama saya Andi. Saya suka belajar pemrograman web.</p>
<h2>Keahlian</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Kontak</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Kirim">
</form>
<footer>
<p>© 2025 Andi</p>
</footer>
</body>
</html>penulis:mudho firudin
