DaunKoder
HTML

Belajar HTML: Elemen-Elemen Dasar HTML

HTML mempunyai beberapa elemen dasar HTML, yang banyak digunakan dalam pembuatan web.

Elemen-Elemen Dasar HTML

Berikut elemen-elemen dasar HTML:

  • h1 sampai h6 - Heading
  • hr - Garis Heading
  • p - Paragraf
  • a - Link
  • img - Gambar
  • button - Tombol
  • ol - Daftar dengan urutan
  • ui - Daftar tanpa urutan
  • li - Item dalam Daftar
  • div - Elemen divider

Jenis-Jenis Elemen

Ada dua jenis elemen HTML yaitu Elemen Blok dan Elemen Inline. Kebanyakan elemen HTML adalah elemen blok. Elemen Blok merupakan elemen yang lebarbya memenuhi halaman dan membuat baris baru. Contoh elemen blok adalah h1, p, hr, div, dll. Elemen inline merupakan elemen yang lebarnya hanya yang dibutuhkan elemen dan tidak membuat baris baru. Contoh elemen inline adalah span, b, i, a, button, dll.

Heading

Heading terdiri dari 6 level dan mempuyai tag h1 sampai h6. Setelah heading, biasanya beberapa web menambahkan Garis Heading. Garis Heading merupakan garis yang berada di bawah heading dan mempunyai tag hr. Garis heading tidak membutuhkan penutup tag. Contoh

<h1>Heading 1</h1>
<hr />

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Menjadi

Heading

Paragraf

Paragraf merupakan elemen teks dan mempunyai tag p. Elemen ini dapat berisi elemen lain. Contoh

<p>Ini adalah paragraf pertama</p>
<p>Dan ini adalah pargraf kedua. <a href="/redir">Link dalam paragraf</a></p>

Menjadi

Paragraf

Link dapat mengarahkan kita pada web atau halaman lain. Link merupakan elemen inline dan mempunyai tag a. Link mempunyai atribut href yang berisi URL yang dituju. Contoh

<a href="/html">DaunKoder</a>

Menjadi

Link

Gambar

Gambar mempunyai tag img. Gambar mempunyai atribut src yang berisi lokasi gambar yang ditampilkan. Elemen ini tidak membutuhkan penutup tag. Contoh

<img src="/favicon.png" />

Menjadi

Gambar

Tombol

Tombol mempunyai tag button dan merupakan elemen teks. Elemen ini merupakan elemen inline. Kita dapat menghandle klik dengan JavaScript. Contoh

<button>Klik disini</button>

Menjadi

Gambar

Daftar

HTML mempunyai dua tipe daftar, yaitu dengan urutan dan tanpa urutan. Daftar dengan urutan mempunyai tag ol. Sedangakn dengan urutan mempuntai tag ul. Item pada daftar sama-sama menggunakan tag li. Contoh

<ol>
  <li>Satu</li>
  <li>Dua</li>
  <li>Tiga</li>
  <li>Empat</li>
</ol>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Menjadi

Gambar

Elemen div

Elemen div merupakan elemen yang tidak mempunyai arti. Elemen ini merupakan elemen blok. Elemen ini biasanya digunakan untuk membagi elemen dengan elemen lainya. Contohnya, seperti kita ingin membagi data peserta. Data peserta berisi gambar dan teks. Jadinya seperti berikut

<div>
  <img src="/user.png" />
  User 1
</div>
<div>
  <img src="/user.png" />
  User 2
</div>

Menjadi

Div

Contoh Web Sederhana

Kita dapat membuat halaman portofolio dengan elemen-elemen tadi. Contohnya seperti ini

<h1>Levi Rizki Saputra</h1>
<hr />

<img src="/aku.jpg" />
<p>Full Stack Web Developer dan Mobile Developer</p>

<p>Saya telah mengerjakan beberapa proyek diantaranya</p>
<ul>
  <li>AokaCSS, sebuah framework CSS yang menggunakan Material Design</li>
  <li>Potomat, aplikasi pomdoro lightweight</li>
</ul>

<a href="https://github.com/levirs565">Lihat di Github</a>
<button>Lebih lanjut</button>

Menjadi

Contoh

Kesimpulan

HTML itu mudah kok. Untuk menghafalkan tag HTML, kita harus konsiten dalam berlatih. Sekian.