Belajar membuat website sering terasa membingungkan bagi pemula karena harus memahami banyak tag, struktur halaman, dan cara kerja kode HTML sekaligus.
Tidak sedikit orang berhenti belajar web development di tengah jalan hanya karena merasa coding terlalu rumit untuk dipahami sendiri.
Dengan memahami contoh coding HTML yang sudah jadi, kamu bisa langsung melihat bagaimana struktur website dibuat, bagaimana elemen saling terhubung, dan bagaimana tampilan halaman muncul di browser secara nyata.
Struktur Dasar HTML
Sebelum mulai membuat website, kamu perlu mengerti struktur dasar yang selalu dipakai dalam file HTML.
<!DOCTYPE html>
Tag ini digunakan untuk memberi tahu browser bahwa file yang digunakan adalah HTML5 agar ditampilkan dengan formatnya yang konsisten.
<html>
Tag <html> merupakan pembungkus utama seluruh isi halaman website agar browser dapat membaca struktur halaman dengan benar.
<head>
Bagian <head> berisi informasi penting tentang halaman website seperti title, meta description, stylesheet, dan script.
<title>
Tag <title> digunakan untuk menentukan judul halaman yang muncul di tab browser.
<body>
Bagian <body> adalah area utama berisikan semua konten—seperti teks, gambar, tombol, hingga form— yang akan ditampilkan kepada pengunjung website.
<h1> sampai <h6>
Tag heading digunakan untuk membuat judul dan subjudul pada halaman website. <h1> memiliki ukuran paling besar, sedangkan <h6> paling kecil.
<p>
Tag <p> digunakan sebagai paragraf teks pada halaman website dan membuat konten terlihat lebih rapi dan mudah dibaca.
<a>
Tag <a> digunakan untuk membuat link menuju halaman lain atau website tertentu. Kamu juga bisa menggunakannya untuk navigasi menu website.
<img>
Tag <img> digunakan untuk menampilkan gambar pada halaman website. Kamu juga perlu menambahkan atribut src untuk menentukan lokasi gambar.
<ul> dan <ol>
Tag <ul> digunakan untuk daftar tanpa nomor, sedangkan <ol> digunakan untuk daftar berurutan dengan angka. Keduanya dipakai untuk membuat menu atau list informasi.
<li>
Tag <li> digunakan sebagai isi dari daftar pada <ul> maupun <ol>. Setiap item dalam list harus dibungkus menggunakan tag ini.
<div>
Tag <div> berfungsi sebagai container untuk mengelompokkan elemen HTML tertentu dalam layout website.
<span>
Tag <span> digunakan untuk memberi style—baik warna atau format—pada sebagian kecil teks tertentu.
<br> dan <hr>
Tag <br> digunakan untuk membuat baris baru tanpa membuat paragraf baru. Sedangkan <hr> digunakan untuk membuat garis horizontal sebagai pemisah konten.
Contoh Coding HTML yang Sudah Jadi
Berikut beberapa contoh coding HTML yang sudah jadi yang bisa langsung kamu praktikkan sendiri di laptop maupun komputer.
1. Contoh Halaman Artikel
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artikel Teknologi</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eef2ff;
margin: 0;
}
.article {
max-width: 900px;
margin: 40px auto;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
color: #1e3a8a;
}
.meta {
color: #64748b;
margin-bottom: 20px;
}
img {
width: 100%;
border-radius: 10px;
margin: 20px 0;
}
p {
line-height: 1.8;
color: #334155;
}
.tag {
display: inline-block;
background-color: #dbeafe;
color: #1d4ed8;
padding: 6px 12px;
border-radius: 20px;
margin-top: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="article">
<h1>Perkembangan AI di Dunia Kerja</h1>
<div class="meta">Ditulis oleh Admin • 20 Mei 2026</div>
<img src="https://via.placeholder.com/800x350" alt="AI">
<p>
Artificial Intelligence mulai digunakan di berbagai industri untuk membantu
meningkatkan efisiensi kerja dan produktivitas bisnis.
</p>
<p>
Banyak perusahaan kini memanfaatkan AI untuk analisis data, customer service,
hingga automasi pekerjaan rutin.
</p>
<span class="tag">#ArtificialIntelligence</span>
</div>
</body>
2. Contoh Halaman Kontak
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontak Kami</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #3b82f6, #9333ea);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.contact-box {
background: white;
padding: 35px;
border-radius: 15px;
width: 400px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
h2 {
text-align: center;
color: #1e3a8a;
}
input,
textarea {
width: 100%;
padding: 12px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
}
button {
width: 100%;
padding: 12px;
background-color: #2563eb;
color: white;
border: none;
border-radius: 8px;
margin-top: 15px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #1d4ed8;
}
</style>
</head>
<body>
<div class="contact-box">
<h2>Hubungi Kami</h2>
<input type="text" placeholder="Nama Lengkap">
<input type="email" placeholder="Email">
<textarea rows="5" placeholder="Tulis pesan Anda"></textarea>
<button>Kirim Pesan</button>
</div>
</body>
</html>
3. Contoh Halaman Login Form
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #2563eb, #7c3aed);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-box {
background: white;
padding: 40px;
width: 350px;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
h2 {
text-align: center;
color: #1e3a8a;
margin-bottom: 25px;
}
input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #cbd5e1;
border-radius: 8px;
}
button {
width: 100%;
padding: 12px;
border: none;
background-color: #2563eb;
color: white;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #1d4ed8;
}
.footer {
text-align: center;
margin-top: 15px;
font-size: 14px;
}
.footer a {
color: #2563eb;
text-decoration: none;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login Account</h2>
<input type="email" placeholder="Masukkan Email">
<input type="password" placeholder="Masukkan Password">
<button>Login</button>
<div class="footer">
Belum punya akun?
<a href="#">Daftar Sekarang</a>
</div>
</div>
</body>
</html>
4. Contoh Halaman FAQ
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f5f9;
margin: 0;
padding: 40px;
}
.faq-container {
max-width: 800px;
margin: auto;
background: white;
padding: 35px;
border-radius: 14px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #1e3a8a;
margin-bottom: 30px;
}
.faq-item {
margin-bottom: 20px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
.faq-item h3 {
color: #2563eb;
margin-bottom: 8px;
}
.faq-item p {
color: #475569;
line-height: 1.7;
}
.badge {
display: inline-block;
background-color: #dbeafe;
color: #1d4ed8;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="faq-container">
<span class="badge">Frequently Asked Questions</span>
<h1>Pertanyaan Umum</h1>
<div class="faq-item">
<h3>Apa itu HTML?</h3>
<p>
HTML adalah bahasa markup yang digunakan untuk membuat struktur
halaman website seperti teks, gambar, tombol, tabel, dan form.
</p>
</div>
<div class="faq-item">
<h3>Apakah HTML sulit dipelajari?</h3>
<p>
Tidak. HTML termasuk bahasa yang mudah dipahami oleh pemula
karena syntax-nya sederhana dan mudah dipraktekan langsung.
</p>
</div>
<div class="faq-item">
<h3>Apakah HTML bisa digunakan tanpa CSS?</h3>
<p>
Bisa, tetapi tampilannya akan sangat sederhana. CSS biasanya
digunakan untuk mempercantik desain website.
</p>
</div>
</div>
</body>
</html>
5. Contoh Halaman Testimoni
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimoni</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #2563eb, #7c3aed);
margin: 0;
padding: 40px;
}
.testimonial-container {
max-width: 1000px;
margin: auto;
}
h1 {
text-align: center;
color: white;
margin-bottom: 40px;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.card p {
color: #475569;
line-height: 1.7;
font-style: italic;
}
.user {
display: flex;
align-items: center;
margin-top: 20px;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #2563eb;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 12px;
}
.name {
font-weight: bold;
color: #1e293b;
}
.job {
font-size: 14px;
color: #64748b;
}
</style>
</head>
<body>
<div class="testimonial-container">
<h1>Testimoni Peserta</h1>
<div class="testimonial-grid">
<div class="card">
<p>
"Materinya mudah dipahami dan cocok untuk pemula.
Penjelasan mentor juga sangat jelas."
</p>
<div class="user">
<div class="avatar">A</div>
<div>
<div class="name">Andi</div>
<div class="job">Frontend Developer</div>
</div>
</div>
</div>
<div class="card">
<p>
"Saya jadi lebih percaya diri belajar coding karena
banyak latihan project nyata."
</p>
<div class="user">
<div class="avatar">S</div>
<div>
<div class="name">Sinta</div>
<div class="job">UI Designer</div>
</div>
</div>
</div>
<div class="card">
<p>
"Tampilannya modern dan pembelajarannya sangat membantu
untuk memahami HTML dan CSS."
</p>
<div class="user">
<div class="avatar">R</div>
<div>
<div class="name">Rizky</div>
<div class="job">Mahasiswa IT</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Mulailah Belajar Membuat Website Sederhana dengan HTML!
Belajar HTML akan terasa jauh lebih mudah jika kamu langsung mencoba praktik membuat halaman website sederhana sendiri.
Untuk mempelajari web development secara lebih terarah, kamu bisa menggunakan bantuan penyedia kursus digital seperti Coding Studio.
Yuk, daftarkan dirimu dalam kursus Web Development dari Coding Studio! Di kursus ini, kamu akan mempelajari dasar-dasar yang dibutuhkan dalam pengembangan website, mulai dari basic HTML, CSS, hingga JavaScript.
Di akhir kursus, kamu juga akan dibimbing oleh mentor untuk membuat halaman website interaktif yang bisa kamu jadikan bukti di portofoliomu ke depannya!
Tingkatkan skill web development-mu sekarang bersama Coding Studio dan dapatkan proses pembelajaran secara lebih terarah!