Tag HTML

lah contoh kode HTML dasar beserta penjelasannya:

html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman HTML</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah contoh paragraf dalam HTML.</p>
    
    <h2>Tentang Saya</h2>
    <p>Nama saya adalah [Nama Anda]. Saya sedang belajar HTML.</p>
    
    <h3>Hobi Saya:</h3>
    <ul>
        <li>Membaca</li>
        <li>Menulis</li>
        <li>Bermain Musik</li>
    </ul>
    
    <a href="https://www.example.com">Kunjungi Contoh Website</a>
    
    <img src="gambar.jpg" alt="Deskripsi gambar" width="200">
</body>
</html>

Penjelasan Kode:

  1. <!DOCTYPE html>

    • Deklarasi tipe dokumen, memberitahu browser bahwa ini adalah dokumen HTML5.

  2. <html lang="id">

    • Elemen root dari dokumen HTML. Atribut lang="id" menunjukkan bahasa dokumen (Indonesia).

  3. <head>

    • Bagian kepala dokumen yang berisi metadata dan informasi untuk browser.

  4. <meta charset="UTF-8">

    • Menentukan pengkodean karakter untuk dokumen (mendukung karakter internasional).

  5. <meta name="viewport">

    • Membuat halaman responsive untuk perangkat mobile.

  6. <title>

    • Judul halaman yang muncul di tab browser.

  7. <body>

    • Bagian utama dokumen yang menampilkan konten ke pengguna.

  8. <h1>, <h2>, <h3>

    • Heading/header dengan level berbeda (h1 paling penting, h6 paling kecil).

  9. <p>

    • Paragraf teks.

  10. <ul> dan <li>

    • Unordered list (daftar tidak berurut) dan list item (item daftar).

  11. <a href="...">

    • Anchor/link ke halaman lain. Atribut href berisi URL tujuan.

  12. <img>

    • Menampilkan gambar. Atribut src untuk sumber gambar, alt untuk teks alternatif, width untuk lebar.








Tag HTML dasar yang paling sering digunakan:

1. Tag Struktur Dokumen


<!DOCTYPE html>  <!-- Mendeklarasikan tipe dokumen HTML5 -->
<html>          <!-- Elemen root dari dokumen HTML -->
<head>          <!-- Berisi metadata dan informasi untuk browser -->
<title>         <!-- Judul halaman (muncul di tab browser) -->
<body>          <!-- Berisi konten yang ditampilkan di halaman web -->

2. Tag Heading (Judul)


<h1>Judul Utama</h1>  <!-- Heading level 1 (paling besar) -->
<h2>Sub Judul</h2>    <!-- Heading level 2 -->
<h3>Sub Sub Judul</h3> <!-- Heading level 3 -->
...
<h6>Heading Terkecil</h6> <!-- Heading level 6 (paling kecil) -->

3. Tag Teks dan Paragraf


<p>Ini adalah paragraf.</p>          <!-- Paragraf teks -->
<br>                                 <!-- Line break (baris baru) -->
<hr>                                 <!-- Horizontal rule (garis pemisah) -->
<strong>Teks tebal (penting)</strong> <!-- atau <b> untuk teks tebal -->
<em>Teks miring (penekanan)</em>     <!-- atau <i> untuk teks miring -->
<u>Teks bergaris bawah</u>           <!-- Underline text -->
<del>Teks tercoret</del>             <!-- Deleted text -->
<mark>Teks ditandai</mark>           <!-- Highlighted text -->

4. Tag List (Daftar)


<!-- Daftar tidak berurut (bullet points) -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Daftar berurut (nomor) -->
<ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ol>

<!-- Daftar definisi -->
<dl>
  <dt>Term 1</dt>
  <dd>Definisi term 1</dd>
  <dt>Term 2</dt>
  <dd>Definisi term 2</dd>
</dl>

5. Tag Link dan Gambar


<a href="https://example.com">Teks Link</a>  <!-- Hyperlink -->
<img src="gambar.jpg" alt="Deskripsi">     <!-- Menampilkan gambar -->

6. Tag Tabel


<table>
  <tr>                <!-- Table row (baris tabel) -->
    <th>Header 1</th> <!-- Table header (sel header) -->
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>   <!-- Table data (sel data) -->
    <td>Data 2</td>
  </tr>
</table>

7. Tag Formulir


<form action="/submit" method="post">
  <input type="text" placeholder="Nama">     <!-- Input teks -->
  <input type="password">                   <!-- Input password -->
  <input type="email">                      <!-- Input email -->
  <input type="number">                     <!-- Input angka -->
  <input type="checkbox"> Pilihan 1         <!-- Checkbox -->
  <input type="radio" name="group"> Opsi 1  <!-- Radio button -->
  <input type="radio" name="group"> Opsi 2
  <select>                                  <!-- Dropdown -->
    <option>Pilihan 1</option>
    <option>Pilihan 2</option>
  </select>
  <textarea rows="4"></textarea>            <!-- Text area -->
  <button type="submit">Kirim</button>      <!-- Tombol submit -->
</form>

8. Tag Div dan Span


<div>Elemen blok untuk pengelompokan</div> <!-- Block-level container -->
<span>Elemen inline untuk pengelompokan</span> <!-- Inline container -->

9. Tag Semantik HTML5


<header>Kepala halaman</header>
<nav>Menu navigasi</nav>
<main>Konten utama</main>
<section>Bagian dari dokumen</section>
<article>Konten independen</article>
<aside>Konten samping</aside>
<footer>Kaki halaman</footer>

Komentar

Posting Komentar