Elemen dan Tag HTML

Elemen adalah bagian-bagian kecil yang menyusun sebuah website.

Sebuah elemen terdiri dari tiga bagian, yaitu:

  1. Tag pembuka (Contoh: <p>)
  2. Isi elemen
  3. Tag penutup (Contoh: </p>)

Berikut ini adalah contoh elemen paragraph yang berguna untuk menampilkan text yang ada di dalamnya:

Contoh 1:

<p>Selamat Pagi!</p>

Pada contoh di atas, <p> adalah tag pembuka dan </p> adalah tag penutupnya. Kedua buah tag tersebut merupakan pasangan yang membentuk elemen paragraph.

Elemen di dalam elemen

Di dalam sebuah elemen bisa berisi elemen lainnya. Perhatikan contoh di bawah ini:

Contoh 2:

<p>Selamat <i>Pagi</i> Dunia!</p>

Pada contoh di atas, di dalam elemen paragraph (<p>…</p>) ada elemen italic (<i>…</i>) yang berguna untuk menampilkan text dalam bentuk miring.

Struktur document HTML

Berikut ini adalah contoh struktur document HTML:

Contoh 3:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Pada contoh di atas, tag <html> berguna sebagai pembungkus semua elemen HTML yang ada di dalamnya.

Elemen HTML terbagi menjadi dua yaitu head dan body. Elemen head berisi elemen-elemen yang memberi informasi mengenai document HTML termasuk informasi seperti metadata, script dan style yang akan digunakan. Sedangkan elemen body berisi elemen-elemen yang akan ditampilkan oleh web browser.

Berikut ini adalah beberapa elemen yang bisa dimasukkan ke dalam elemen head:

  • <title> – Memberi judul document HTML
  • <base> – Menentukan default url untuk semua link yang ada
  • <link> – Memanggil style yang akan digunakan. Digunakan untuk external CSS.
  • <meta> – Memberi informasi metadata
  • <script> – Memberi informasi bahwa script akan digunakan
  • <style> – Memberi informasi bahwa style (CSS) akan digunakan

Tag tanpa pasangan

Ada beberapa tag yang tidak memiliki pasangan (tag pembuka dan tag penutup). Salah satunya adalah tag baris baru <br> yang berfungsi untuk menghentikan menampilkan text pada titik yang ada tag <br> kemudian melanjutkan menampilkan kembali text pada baris yang baru.

Berikut ini adalah contoh penggunaan tag <br>:

Contoh 4:

<html>
<head>
</head>
<body>
    <p>Selamat <br>Pagi!</p>
</body>
</html>

Hasil contoh 4:

Selamat
Pagi!

Tag <br> bisa juga ditulis seperti ini: <br />. Perbedaannya adalah tag <br /> bisa digunakan oleh XML parser.

Tag tanpa pasangan bisa juga disebut sebagai void elements atau empty elements.

Berikut ini adalah daftar void elements:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Tag huruf kecil

Penulisan tag pada HTML5 bersifat case insensitive atau huruf besar dan kecil dianggap sama (B sama dengan b). Contoh, tag paragraph <P> sama dengan <p>.

Namun W3C World Web Consortium membuat standar bahwa semua tag harus ditulis menggunakan huruf kecil.

Tag heading

Tag heading berguna untuk text yang ingin dijadikan judul.

Text yang diberi tag heading akan ditampilkan lebih besar dan ditebalkan. Ada enam buah tag heading mulai dari <h1> sampai <h6>. Tampilan text dengan tag <h1> lebih besar dari tag <h2> dan seterusnya.

Berikut ini adalah contoh pemakaian tag heading:

Contoh 5:

<html>
<head>
</head>
<body>
    <h1>Ini adalah heading 1</h1>
    <h2>Ini adalah heading 2</h2>
    <h3>Ini adalah heading 3</h3>
    <h4>Ini adalah heading 4</h4>
    <h5>Ini adalah heading 5</h5>
    <h6>Ini adalah heading 6</h6>
</body> 
</html>

Hasil contoh 5:

Ini adalah heading 1

Ini adalah heading 2

Ini adalah heading 3

Ini adalah heading 4

Ini adalah heading 5
Ini adalah heading 6

Tag text

Berikut ini adalah beberapa tag yang bisa digunakan untuk mengubah tampilan text:

Tag Penjelasan
<p> membuat text menjadi satu paragraph
<b> membuat text bold
<strong> membuat text bold
<em> membuat text miring
<i> membuat text miring
<small> membuat text kecil
<sub> membuat text menjadi subscript (text menjadi kecil dan ditempatkan sedikit kebawah)
<sup> membuat text menjadi supscript (text menjadi kecil dan ditempatkan sedikit keatas)
<ins> menandai text yang telah ditambahkan ke dalam paragraph (memberi garis bawah pada text)
<del> menandai text yang telah dihapus di dalam paragraph (memberi garis horizontal pada text)
<mark> menandai text yang ditonjolkan

Contoh 6:

<p>Contoh dari <b>bold text</b></p>
<p>Contoh dari <strong>strong text</strong></p> 
<p>Contoh dari <em>emphasized text</em></p>
<p>Contoh dari <i>italic text</i></p>
<p>Contoh dari <small>small text</small></p>
<p>Contoh dari <sub>subscript text</sub></p> 
<p>Contoh dari <sup>superscript text</sup></p>
<p>Contoh dari <ins>ins text</ins>
<p>Contoh dari <del>struckthrough text</del></p>
<p>Contoh dari <mark>mark text</mark></p>

Hasil contoh 6:

Contoh dari bold text

Contoh dari strong text

Contoh dari emphasized text

Contoh dari italic text

Contoh dari small text

Contoh dari subscript text

Contoh dari superscript text

Contoh dari ins text

Contoh dari struckthrough text

Contoh dari mark text

Walaupun tag <b> dan tag <strong> memberikan hasil yang sama namun ada perbedaan diantara keduanya yaitu web browser dan search engine memberikan penilaian lebih penting terhadap kata yang diberi tag <strong>.

Hal yang sama juga terjadi pada tag <i> dan tag <em>. Nilai dari tag <em> lebih besar dari nilai tag <i>.

Tag preformatting <pre>

Tag preformatting <pre> berguna untuk menampilkan text seperti adanya text tersebut ditulis tanpa diubah sedikitpun baik spasi, tab maupun jarak antar baris. Biasanya tag <pre> digunakan untuk menampilkan tulisan seperti puisi atau sekelompok code.

Web browser mengubah text yang ditulis dan menampilkannya dalam bentuk satu baris panjang walaupun pada text yang ditulis terdapat spasi lebih dari 1, tab dan baris lebih dari 1. Lihat contoh berikut ini:

Contoh 7:

<html>
<head>
</head>
<body>

<p>satu
     dua
tiga    empat

lima</p>

</body>
</html>

Hasil contoh 7:

satu dua tiga empat lima

Berikut ini adalah contoh tampilan text pada web browser jika menggunakan tag <pre>:

Contoh 8:

<html>
<head>
</head>
<body>

<pre>satu
     dua
tiga    empat

lima</pre>

</body>
</html>

Hasil contoh 8:

satu
     dua
tiga    empat

lima

Tag <code>

Tag <code> berguna untuk menampilkan code komputer.

Walaupun tag <pre> dan <code> sama-sama bisa digunakan untuk menampilkan code namun ada perbedaan diantara keduanya yaitu tag <pre> menampilkan text secara apa adanya sedangkan tag <code> menghilangkan spasi berlebih dan membuat semua text menjadi satu baris panjang.

Selain itu, tag <code> memberi tahu search engine bahwa text yang diberi tag <code> tersebut adalah code komputer. Sedangkan tag <pre> memberi tahu search engine bahwa text yang diberi tag <pre> tersebut hanyalah text biasa yang tidak memiliki format apapun.

Berikut ini adalah contoh pemakaian tag <code>:

Contoh 9:

Contoh dari <code>code text</code></td>

Hasil contoh 9:

Contoh dari code text

Tag horizontal line <hr>

Tag horizontal line <hr> berguna untuk menampilkan garis pembatas horizontal.

Contoh 10:

<html>
<head>
</head>
<body>
    <p>satu</p>
    <hr>
    <p>dua</p>
    <hr>
    <hr>
    <p>tiga</p>
</body>
</html>

Hasil contoh 10:

satu


dua



tiga

Tag <hr> termasuk tag yang tidak memiliki pasangan.

Pada XHTML, tag <hr> harus ditulis seperti ini: <hr />.

<!DOCTYPE> Declaration

<!DOCTYPE> declaration berguna untuk memberi tahu web browser mengenai versi HTML yang digunakan.

<!DOCTYPE> declaration diletakkan pada awal document dan bersifat case insensitive atau huruf besar dan kecil dianggap sama (B sama dengan b).

HTML 5:

<!DOCTYPE html>

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>