Belajar Frontend Part 2 - Struktur Dasar HTML

Memahami Elemen HTML Lengkap untuk Pemula

#1. Apa Itu Elemen HTML?

Halo Gen Z! Elemen HTML adalah blok dasar yang membangun sebuah website. Setiap elemen biasanya terdiri dari tag pembuka, konten, dan tag penutup. Contohnya:

<p>Ini adalah sebuah paragraf.</p>

#2. Jenis-Jenis Elemen HTML

Berikut adalah elemen-elemen HTML penting yang wajib kamu tahu:

1. Heading

Heading digunakan untuk judul. Ada enam level, dari <h1> (paling besar) hingga <h6> (paling kecil).

<h1>Judul Utama</h1>

<h2>Subjudul</h2>

2. Paragraf

Untuk membuat teks biasa, gunakan elemen <p>.

<p>Ini adalah teks paragraf.</p>

3. Tautan (Link)

Tautan dibuat menggunakan elemen <a>. Kamu bisa menambahkan atribut href untuk menentukan tujuan link.

<a href="https://google.com">Kunjungi Google</a>

4. Gambar

Untuk menampilkan gambar, gunakan elemen <img>. Jangan lupa atribut src untuk menentukan lokasi gambar.

<img src="gambar.jpg" alt="Deskripsi gambar">

5. Daftar

HTML mendukung dua jenis daftar:

• Ordered List (<ol>): Daftar bernomor.
• Unordered List (<ul>): Daftar dengan bullet point.

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

</ol>

<ul>

  <li>Item A</li>

  <li>Item B</li>

</ul>

6. Tabel

Untuk menampilkan data dalam bentuk tabel, gunakan elemen <table>.

<table>

  <tr>

    <th>Nama</th>

    <th>Usia</th>

  </tr>

  <tr>

    <td>Thoriq</td>

    <td>18</td>

  </tr>

</table> 

7. Form

Formulir digunakan untuk mengambil input dari pengguna.

<form action="/submit" method="post">

  <label for="nama">Nama:</label>

  <input type="text" id="nama" name="nama">

  <button type="submit">Kirim</button>

</form>

#3. Next Step

Elemen-elemen ini adalah dasar dari HTML. Latihan dan eksplorasi lebih banyak elemen di artikel berikutnya tentang CSS agar websitemu lebih cantik!