Tag Dasar HTML yang Termasuk ke dalam Fundamental
Tanpa panjang lebar langsung saja inilah beberapa tag HTML dasar yang sering diaplikasikan untuk mendesain website beserta fungsi dan contoh penggunaannya supaya kamu mudah memahaminya.
| No | Nama Tag | Fungsi |
| 1 | <! DOCTYPE html> | Deklarasi untuk mendefinisikan dokumen menjadi HTML |
| 2 | <html> | Tag pembuka untuk membuat dokumen HTML |
| 3 | <head> | Informasi meta tentang dokumen |
| 4 | <title> | Membuat judul halaman yang nantinya akan ditampilkan di browser |
| 5 | <body> | Tempat dibuatnya semua konten website menggunakan HTML |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Preview :
Baca juga :
- 3 Cara Membuat Website dengan WordPress untuk Pemula
- Membuat Website Sekolah yang Modern dan Profesional dengan CMS WordPress
- Baru ! Cara Install XAMPP di OS Windows, Linux, & Mac OS
- Lengkap ! 5 Contoh HTML untuk Latihan Desain Web
Tag HTML Membuat Judul
| No | Nama Tag | Fungsi |
| 1 | <h1> s/d <h6> | Membuat judul atau heading |
| 2 | <hr> | Memisahkan konten (biasanya ditampilkan garis pembatas) |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html>
Preview :
Tag HTML untuk Membuat Paragraf
| No | Nama Tag | Fungsi |
| 1 | <p> | Membuat paragraf |
| 2 | <br> | Membuat garis baru |
| 3 | <pre> | Memfortmat teks atau kalimat |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <p>In HTML, spaces and new lines are ignored:</p> <br> example <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> </body> </html>
Preview :
Tag Style
| No | Nama Tag | Fungsi |
| 1 | style | Atribut untuk elemen styling pada HTML |
| 2 | background-color | Memberikan warna latar belakang |
| 3 | color | Memberi warna pada teks |
| 4 | font-family | Mengubah font pada teks |
| 5 | font-size | Mengatur ukuran font |
| 6 | text-align | Mengatura perataan teks |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html>
Preview :
Baca juga :
- 15 Menit Memahami ” Apa itu HTML ” Secara Mendalam
- Pengertian, Sejarah HTML Serta Perkembangan Versi HTML
- Memahami Fungsi HTML dalam 10 Menit
Tag Formating
| No | Nama Tag | Fungsi |
| 1 | <b> | Membuat teks tebal |
| 2 | <strong> | Membuat teks penting |
| 3 | <i> | Membuat teks miring |
| 4 | <em> | Membuat teks ditekankan |
| 5 | <mark> | Membuat teks ditandai |
| 6 | <small> | Membuat teks kecil |
| 7 | <del> | Teks dihapus |
| 8 | <ins> | Teks dimasukan |
| 9 | <sub> | Teks subscript |
| 10 | <sup> | Teks superscript |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
Preview :
Tag Gambar
| No | Nama Tag | Fungsi |
| 1 | <img> | Elemen untuk mendefinisikan gambar |
| 2 | src | Atribut untuk menentukan URL gambar |
| 3 | alt | Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan |
| 4 | width – height | Menentukan ukuran gambar |
| 5 | float | Properti untuk float image pada CSS |
| 6 | <map> | Mendefinisikan gambar peta |
| 7 | <area> | Mendefinisikan area atau daerah-daerah gambar pada peta |
| 8 | <picture> | Menampilkan gambar yang berbeda untuk perangkat yang berbeda |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h2>Alternative text</h2> <p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p> <img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300"> </body> </html>
Preview :
Tag Form
| No | Nama Tag | Fungsi |
| 1 | <form> | Membuat formulir untuk mengumpulkan input pengguna |
| 2 | <input> | Membuat tipe inputan pada form yang akan dibuat |
| 3 | <textare> | Elemen untuk mendefinisikan field input |
| 4 | <label> | Memberikan label pada elemen input |
| 5 | <fieldset> | Mengelompokan elemen yang terdapat pada sebuah form |
| 6 | <select> | Membuat input dengan pilihan yang berbentuk list drop down |
| 7 | <optgroup> | Mengelompokan beberapa pilihan pada daftar pilihan input |
| 8 | <option> | Mendefinisikan opsi yang bisa dipilih |
| 9 | <button> | Membuat Button |
| 10 | <datalist> | Membuat daftar pilihan untuk input data |
| 11 | <output> | Menampilkan hasil dari hitungan |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h2>The datalist Element</h2> <p>The datalist element specifies a list of pre-defined options for an input element.</p> <form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p> </body> </html>
Preview :
