HTML | Kode Kampus

Apa itu HTML?

HTML adalah singkatan dari HyperText Markup Language. HTML digunakan untuk memberitau browser konten apa saja yang mau kita tampilkan di halaman web.

Apa itu Tag?

Tag HTML adalah elemen dasar dari halaman web. Tag HTML mengelilingi konten dan memberi tahu browser bagaimana cara menampilkannya. Setiap tag HTML memiliki nama yang dikelilingi oleh tanda kurung sudut.

Cara penulisan elemen HTML memiliki 2 versi, yaitu menggunakan:

Tag Pembuka dan Tag Penutup Elemen yang menggunakan tag ini memiliki content, yang diapit oleh kedua tag pembuka dan penutup. Perumpamaan untuk tag ini adalah tanda baca, seperti tanda kurung buka dan tutup, tanda petik buka dan tutup, dll. Contoh:
```
<p>Ini adalah paragraf</p>
```
Tag Tunggal (Self-closing tag) Elemen yang menggunakan tag ini tidak memiliki content, sehingga tidak memerlukan tag penutup. Perumpamaan untuk tag ini adalah tanda baca, seperti tanda titik, tanda koma, dll. Contoh:
```
<img src="gambar.jpg" alt="gambar" />
```

Apa itu Attribute?

Attribute adalah informasi tambahan yang diberikan pada elemen HTML. Attribute terdiri dari nama dan value. Attribute ditulis di dalam tag pembuka.

Urutan dari penulisan attribute tidak penting, sehingga kamu dapat menuliskannya sesuai keinginan.

Contoh:

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

Pada contoh di atas, src dan alt adalah attribute, sedangkan gambar.jpg dan gambar adalah value dari attribute tersebut.

Attribute di tag HTML dapat berbeda-beda, tergantung dari tag tersebut. Sebagai contoh, tag <img> memiliki attribute src dan alt, sedangkan tag <a> memiliki attribute href. Kita dapat memberikan attribute yang tidak sesuai ke tag apapun, namun attribute tersebut tidak akan mempengaruhi apapun. Sebagai contoh, jika kita memberikan attribute src ke tag <a>, maka attribute tersebut tidak akan berguna.

Namun, ada juga beberapa attribute yang dapat digunakan di tag apapun, seperti class dan id.

Tag Apa Saja yang Perlu Kamu Ketahui?

Tag HTML terdiri dari banyak sekali jenis, sehingga tidak mungkin untuk menghafal semuanya. Maka dari itu, berikut adalah list tag yang perlu kamu ketahui saat awal pembelajaran HTML.

Untuk mempermudah pembelajaran, tag-tag ini dibagi lagi menjadi 5 kelompok.

1. Utility

Tag ini digunakan untuk memberi informasi tambahan pada halaman web, seperti judul, deskripsi, import file CSS, JS, dll.

<html> Tag ini digunakan untuk memberi tahu browser bahwa ini adalah halaman web. Contoh:
```
<html>
  
</html>
```
<head> Tag ini digunakan untuk memberi informasi tambahan pada halaman web, seperti judul, deskripsi, import file CSS, JS, dll. Contoh:
```
<head>
  
</head>
```
<body> Tag ini digunakan untuk memberi tahu browser bahwa ini adalah bagian body dari halaman web. Contoh:
```
<body>
  
</body>
```
<title> Tag ini digunakan untuk memberi judul pada halaman web. Tag ini ditaruh di dalam tag <head>. Contoh:
```
<title>Ini adalah judul</title>
```
<meta> Tag ini digunakan untuk memberi informasi tambahan pada halaman web, seperti deskripsi, gambar untuk link preview, dll. Tag ini ditaruh di dalam tag <head>. Contoh:
```
<meta name="description" content="Ini adalah deskripsi" />
```
<link> Tag ini digunakan untuk mengimport file CSS. Tag ini ditaruh di dalam tag <head>. Contoh:
```
<link rel="stylesheet" href="style.css" />
```
<script> Tag ini digunakan untuk mengimport file JS. Contoh:
```
<script src="script.js"></script>
```

2. Konten

Tag ini digunakan untuk membuat konten halaman web, seperti teks, gambar, video, dll.

<h1> sampai <h6> Tag ini digunakan untuk membuat judul. Contoh:
```
<h1>Ini adalah judul 1</h1>
```
<p> Tag ini digunakan untuk membuat paragraf. Contoh:
```
<p>Ini adalah paragraf</p>
```
<a> Tag ini digunakan untuk membuat link ke halaman lain. Contoh:
```
<a href="https://google.com">Ini adalah link</a>
```
<button> Tag ini digunakan untuk membuat tombol. Contoh:
```
<button>Ini adalah tombol</button>
```
<img> Tag ini digunakan untuk menampilkan gambar. Contoh:
```
<img src="gambar.jpg" alt="gambar" />
```
<ul> atau <ol> dan <li> Tag ini digunakan untuk membuat list. <ul> digunakan untuk membuat list tanpa urutan, sedangkan <ol> digunakan untuk membuat list dengan urutan.

Sebagai contoh, jika kamu membuat list dengan <ol>, maka hasil nya akan menggunakan angka 1, 2, 3, dst. Sedangkan, jika menggunakan <ul>, maka hasilnya akan menggunakan bullet point. Contoh:
```
<ul>
  <li>Ini adalah list 1</li>
  <li>Ini adalah list 2</li>
  <li>Ini adalah list 3</li>
</ul>
```

<table> Tag ini digunakan untuk membuat tabel. Contoh:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Budi</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

3. Grouping

Tag ini digunakan untuk mengelompokkan konten halaman web. Tag pada kelompok ini hanya terdiri dari <span> dan <div>.

Perbedaannya adalah <span> digunakan untuk mengelompokkan text, sedangkan <div> digunakan untuk mengelompokkan konten lainnya. Apa gunanya pengelompokkan ini? Pengelompokkan ini berguna untuk mempermudah styling menggunakan CSS.

Sebagai contoh:

Penggunaan <span>
```
<p>
  Halo <span class="text-red">Andi</span>, selamat datang di website kami.
</p>
```
Di dalam contoh di atas, kita ingin memberi warna merah pada nama Andi. Dengan menggunakan <span>, kita dapat memberi class pada tag tersebut, sehingga kita dapat memberi styling pada class tersebut menggunakan CSS.

Di sini, jika kita menggunakan <div>, maka ada 2 masalah yang akan muncul:
1. <div> akan membuat baris baru, sehingga nama Andi akan berada di baris baru.
2. HTML memiliki aturan, di mana <div> tidak boleh berada di dalam konten yang isinya adalah text, seperti <p>, <h1>, <span>, dll.
Penggunaan <div>
```
<div class="container">
  <div class="header">
    <h1>Ini adalah judul</h1>
  </div>
  <div class="content">
    <p>Ini adalah paragraf</p>
  </div>
</div>
```
Di dalam contoh di atas, kita ingin membuat layout halaman web. Dengan menggunakan <div>, kita dapat memberi class pada tag tersebut, sehingga kita dapat memberi styling pada class tersebut menggunakan CSS.

4. Form

Tag di dalam kelompok ini merupakan elemen yang membentuk suatu form.

<form> Tag form digunakan untuk mengawali dan mengakhiri suatu form. Tag ini memiliki attribute action untuk menentukan URL yang akan diakses saat form dikirim, dan attribute method untuk menentukan metode pengiriman data form tersebut.

<input> Tag ini digunakan untuk membuat input form, seperti input text, input password, input number, dll. Tag ini memiliki attribute type untuk menentukan jenis input yang akan dibuat. Contoh:

<!-- Membuat textbox biasa -->
<input type="text" />

<!-- Membuat textbox untuk password -->
<input type="password" />

<!-- Membuat textbox untuk angka -->
<input type="number" />

<!-- Membuat textbox untuk email -->
<input type="email" />

<!-- Membuat checkbox -->
<input type="checkbox" />

<!-- Membuat radio button -->
<input type="radio" />

<!-- Masih banyak lagi tipe dari input yang tersedia, sehingga kamu bisa mencari di google sesuai kebutuhan -->

<label> Tag ini digunakan untuk membuat label untuk input form. Contoh:
```
<label for="nama">Nama</label> <input type="text" id="nama" />
```
Di dalam contoh di atas, kita membuat label untuk input form dengan id nama. Untuk menghubungkan label dengan input form, kita menggunakan attribute for pada tag <label> dengan value berupa id dari input form tersebut.

Kelebihan menggunakan tag <label> dibandingkan <span> untuk form adalah kita dapat mengklik label tersebut untuk memilih input form yang terhubung dengan label tersebut. Selain itu, screen reader juga akan bisa membaca label tersebut.
<textarea> Tag ini digunakan untuk membuat input form berupa textarea. Contoh:
```
<textarea></textarea>
```

<select> dan <option> Tag ini digunakan untuk membuat input form berupa dropdown. Contoh:

<select>
  <option value="1">Pilihan 1</option>
  <option value="2">Pilihan 2</option>
  <option value="3">Pilihan 3</option>
</select>

<button> Tag ini sama seperti tag <button> pada kelompok konten. Namun, jika tag ini berada di dalam tag <form>, maka tag ini akan berfungsi sebagai tombol untuk mengirim form. Untuk lebih spesifiknya, attribute type pada tag <button> otomatis berubah menjadi submit jika berada di dalam form. Sedangkan jika berada di luar form, maka attribute type akan tetap button.

Contoh:
```
<form>
  <button>Ini adalah tombol untuk submit form</button>
</form>
```

5. Layout

Tag ini digunakan untuk membuat layout halaman web, seperti header, footer, navigasi, dll.

Tag di bawah ini sebenarnya belum terlalu diperlukan saat awal pembelajaran, karena kalian masih bisa menggunakan <div> untuk membuat layout. Namun, tag ini akan membantu website kita memiliki aksesibilitas yang bagus, sehingga screen reader dapat membaca konten halaman web dengan baik untuk orang yang memiliki keterbatasan penglihatan.

<header>
<footer>
<nav>
<main>
<section>
<article>
<aside>
</article>
</section>
</main>