Close Menu

Struktur Dasar HTML

Table of Contents

Struktur dasar HTML adalah fondasi yang digunakan untuk membuat halaman web. Berikut adalah elemen-elemen utama yang membentuk struktur dasar HTML:

Deklarasi DOCTYPE #

Deklarasi <!DOCTYPE html> adalah pernyataan yang memberitahu browser bahwa dokumen ini menggunakan HTML5. Deklarasi ini harus diletakkan pada baris pertama dokumen HTML.

<!DOCTYPE html>

Elemen HTML #

Elemen <html> adalah elemen pembungkus yang mencakup seluruh konten halaman web. Elemen ini memiliki tag pembuka <html> dan tag penutup </html>.

<html>
</html>

Elemen Head #

Elemen <head> berisi meta-informasi tentang dokumen, seperti judul halaman, link ke file CSS, dan informasi lainnya yang tidak ditampilkan langsung di halaman web. Beberapa elemen penting dalam <head> adalah <title>, <meta>, <link>, dan <style>.

<head>
    <title>Judul Halaman</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Elemen Title #

Elemen <title> menentukan judul halaman web yang akan ditampilkan di tab browser. Elemen ini harus berada di dalam elemen <head>.

<title>Judul Halaman</title>

Elemen Meta #

Elemen <meta> menyediakan metadata tentang dokumen, seperti charset (karakter encoding) dan viewport (pengaturan tampilan responsif). Elemen ini juga berada di dalam <head>.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Elemen Body #

Elemen <body> berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, video, dan elemen lainnya. Elemen ini memiliki tag pembuka <body> dan tag penutup </body>.

<body>
    <!-- Konten halaman web -->
</body>

Contoh Struktur Dasar HTML #

Berikut adalah contoh lengkap dari struktur dasar dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Selamat Datang di Halaman Web Saya</h1>
    <p>Ini adalah paragraf pertama di halaman web saya.</p>
</body>
</html>

Penjelasan:

  • <!DOCTYPE html>: Memberitahu browser bahwa dokumen ini menggunakan HTML5.
  • <html>: Elemen pembungkus untuk seluruh konten halaman web.
  • <head>: Berisi meta-informasi tentang dokumen.
  • <title>: Menentukan judul halaman web yang ditampilkan di tab browser.
  • <meta charset="UTF-8">: Mengatur karakter encoding dokumen.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur tampilan responsif untuk perangkat mobile.
  • <body>: Berisi konten yang akan ditampilkan di halaman web, seperti heading dan paragraf.

Dengan memahami struktur dasar HTML ini, Anda dapat mulai membuat halaman web yang terorganisir dan terstruktur dengan baik. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings