Struktur Umum HTML
1. <html>
o Fungsi: Menandai awal dan akhir halaman HTML.
o Penggunaan:
html
Copy
<html>
<!-- Isi halaman -->
</html>
2. <head>
o Fungsi: Berisi metadata dari halaman seperti judul, tautan ke CSS, dan
informasi lainnya.
o Penggunaan:
html
Copy
<head>
<title>Halaman Saya</title>
</head>
3. <title>
o Fungsi: Menentukan judul halaman yang muncul di tab browser.
o Penggunaan:
html
Copy
<title>Judul Halaman</title>
4. <body>
o Fungsi: Menandai bagian utama halaman tempat konten ditampilkan.
o Penggunaan:
html
Copy
<body>
<!-- Konten halaman -->
</body>
Elemen Teks dan Konten
5. <h1> - <h6>
o Fungsi: Menandai heading atau judul, dengan <h1> adalah yang paling besar,
dan <h6> yang paling kecil.
o Penggunaan:
html
Copy
<h1>Heading Utama</h1>
<h2>Subheading</h2>
6. <p>
o Fungsi: Menandai sebuah paragraf teks.
o Penggunaan:
html
Copy
<p>Ini adalah paragraf pertama.</p>
7. <a>
o Fungsi: Menyisipkan hyperlink (tautan).
o Penggunaan:
html
Copy
<a href="[Link] Website</a>
8. <strong>
o Fungsi: Menandai teks yang memiliki penekanan kuat, biasanya ditampilkan
dalam huruf tebal.
o Penggunaan:
html
Copy
<strong>Penekanan kuat</strong>
9. <em>
o Fungsi: Menandai teks yang diberi penekanan (sering kali dalam huruf
miring).
o Penggunaan:
html
Copy
<em>Ini penting</em>
10. <br>
Fungsi: Menyisipkan baris baru (line break).
Penggunaan:
html
Copy
Ini teks pertama.<br>Ini teks kedua.
11. <hr>
Fungsi: Menyisipkan garis horizontal (untuk pemisahan konten).
Penggunaan:
html
Copy
<hr>
Daftar
12. <ul>
Fungsi: Membuat daftar tak terurut (bullet list).
Penggunaan:
html
Copy
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
13. <ol>
Fungsi: Membuat daftar terurut (numbered list).
Penggunaan:
html
Copy
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
</ol>
14. <li>
Fungsi: Menandai item dalam daftar.
Penggunaan:
html
Copy
<ul>
<li>Item pertama</li>
</ul>
Tabel
15. <table>
Fungsi: Membuat tabel.
Penggunaan:
html
Copy
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
</table>
16. <tr>
Fungsi: Membuat baris dalam tabel.
Penggunaan:
html
Copy
<tr>
<td>Ali</td>
<td>25</td>
</tr>
17. <th>
Fungsi: Membuat header tabel.
Penggunaan:
html
Copy
<th>Nama</th>
18. <td>
Fungsi: Menandai sel data dalam tabel.
Penggunaan:
html
Copy
<td>Ali</td>
Elemen Multimedia
19. <img>
Fungsi: Menampilkan gambar.
Penggunaan:
html
Copy
<img src="[Link]" alt="Deskripsi gambar">
20. <audio>
Fungsi: Menyisipkan elemen audio.
Penggunaan:
html
Copy
<audio controls>
<source src="musik.mp3" type="audio/mp3">
</audio>
21. <video>
Fungsi: Menyisipkan elemen video.
Penggunaan:
html
Copy
<video width="320" height="240" controls>
<source src="film.mp4" type="video/mp4">
</video>
22. <iframe>
Fungsi: Menyisipkan halaman atau dokumen lain ke dalam halaman.
Penggunaan:
html
Copy
<iframe src="[Link] width="300"
height="200"></iframe>
Formulir
23. <form>
Fungsi: Menandai elemen formulir untuk input.
Penggunaan:
html
Copy
<form action="/submit" method="POST">
<input type="text" name="nama">
<input type="submit" value="Kirim">
</form>
24. <input>
Fungsi: Menyediakan berbagai jenis elemen input.
Penggunaan:
html
Copy
<input type="text" name="username">
<input type="password" name="password">
25. <button>
Fungsi: Menyediakan tombol yang bisa diklik.
Penggunaan:
html
Copy
<button>Click Me</button>
26. <select>
Fungsi: Menyediakan dropdown untuk memilih nilai.
Penggunaan:
html
Copy
<select name="buah">
<option value="apel">Apel</option>
<option value="jeruk">Jeruk</option>
</select>
27. <textarea>
Fungsi: Menyediakan area teks untuk input panjang.
Penggunaan:
html
Copy
<textarea name="komentar"></textarea>
Elemen Penataan
28. <div>
Fungsi: Elemen blok yang digunakan untuk membungkus konten atau grup elemen.
Penggunaan:
html
Copy
<div class="konten">Ini adalah konten utama.</div>
29. <span>
Fungsi: Elemen inline untuk membungkus bagian kecil dari teks atau elemen lainnya.
Penggunaan:
html
Copy
<span>Highlight this text</span>
30. <style>
Fungsi: Menyisipkan CSS di dalam dokumen HTML.
Penggunaan:
html
Copy
<style>
body { background-color: lightblue; }
</style>
31. <link>
Fungsi: Menyambungkan halaman HTML dengan file eksternal, seperti file CSS.
Penggunaan:
html
Copy
<link rel="stylesheet" href="[Link]">
32. <meta>
Fungsi: Menyediakan metadata untuk halaman HTML (misalnya pengaturan karakter
atau informasi SEO).
Penggunaan:
html
Copy
<meta charset="UTF-8">
<meta name="description" content="Halaman Informasi">
Lain-lain
33. <noscript>
Fungsi: Menyediakan konten alternatif jika JavaScript tidak didukung.
Penggunaan:
html
Copy
<noscript>
JavaScript tidak didukung di browser ini.
</noscript>
34. <mark>
Fungsi: Menandai teks yang perlu disorot.
Penggunaan:
html
Copy
<mark>Highlight me</mark>