Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.
Contoh: <p>, <a>, <body>, <head>, dan sebagainya
Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain.
Supaya lebih mudah saat mendesain web menggunakan HTML maka kita harus bisa menguasai tag – tag HTML dengan baik. Berikut beberapa tag HTML yang bisa anda pelajari dan dipraktekan sendiri.
Tag Dasar
|
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 ditampilkan di browser |
|
5 |
<body> |
Tempat dibuatnya semua
konten website menggunakan HTML |
Contoh Penggunaan
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Tag Judul
1 | <hr> | Tag untuk membuat perubahan dasar kata didalam isi |
2 | <!--...--> | Tag untuk membuat komentar |
3 | | Tag untuk membuat heading |
Contoh Penggunaan
<!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>1 | <p> | Tag untuk membuat paragraf |
2 | <br> | Memasukan satu baris putus |
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>| 1 | style | Atribut untuk elemen styling pada HTML |
| 2 | background-color | Mengatur warna latar belakang |
| 3 | color | Mengatur warna pada teks |
| 4 | font-family | Mengatur font pada teks |
| 5 | font-size | Mengatur ukuran font |
| 6 | text-align | Mengatur perataan teks |
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
</p>
</body>
</html>| No | Nama Tag | Fungsi |
| 1 | <b> | Format teks tebal |
| 2 | <strong> | Format teks penting |
| 3 | <i> | Format teks miring |
| 4 | <em> | Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring |
| 5 | <mark> | Format teks ditandai |
| 6 | <small> | Memperkecil ukuran teks dari ukuran defaultnya |
| 7 | <del> | Untuk memberi garis tengah pada teks/mencoret teks |
| 8 | <ins> | Membuat teks bergaris bawah |
| 9 | <sub> | Format subscript |
| 10 | <sup> | Format superscript |
<!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>Tag Gambar
| No | Nama Tag | Fungsi |
| 1 | <img> | Menampilkan gambar. |
| 2 | src | Menjelaskan lokasi tempat tersimpanya gambar |
| 3 | alt | Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan |
| 4 | width – height | Mendefinisikan 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 |
<!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>Tag Form
| No | Nama Tag | Fungsi |
| 1 | <form> | Mendefinisikan sebuah form HTML untuk input form |
| 2 | <input> | Mendefinisikan input field pada form |
| 3 | <textare> | Elemen untuk mendefinisikan field input |
| 4 | <label> | Mendefinisikan label untuk sebuah elemen input |
| 5 | <fieldset> | Mengelompokan elemen yang terdapat pada sebuah form |
| 6 | <select> | Membuat daftar drop-down |
| 7 | <optgroup> | Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down |
| 8 | <option> | Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down |
| 9 | <button> | Mendefinisikan sebuah tombol |
| 10 | <datalist> | Membuat daftar pilihan untuk input data |
| 11 | <output> | Menampilkan hasil dari hitungan |
<!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>