HTML Tutorials : Apa itu Elements

By -
HTML Tutorials : Apa itu Elements

Thumbnail Apa itu Elements

 Pada tutorial sebelumnya, kita telah membahas tentang HTML Tutorials : Tag-Tag Dasar Kode HTML. Selain tag, dalam HTML kita perlu mengetahui apa itu elements HTML. Pada tutorial ini, rasa penasaran Anda mengenai elements akan terjawab. Silahkan langsung kita simak saja HTML Tutorials : Apa itu Elements.
------------------------------------------------------------------------------------------------
Pengertian Elements HTML
Elements adalah semua tulisan atau pun gambar yang berada di antara tag pembuka dan tag penutup. Sebuah elements secara default memiliki kedua hal tersebut, tag pembuka dan penutup. Elements akan ditampilkan pada sebuah web browser.

Tag Pembuka
Elements
Tag Penutup
<h1>
Apa itu Elements HTML
</h1>
<p>
Belajar HTML di sini
</p>
<b>
Pengertian Elements
</b>
<br>


Dari tabel di atas, dapat kita lihat bahwa terdapat sebuah tag, yaitu tag <br> yang hanya memiliki tag pembuka saja. Jika kita analisis tabel tersebut, kita mengetahui bahwa terdapat 2 (dua) jenis elements HTML.
FYI :
Tag <br> atau <br/> tidak memiliki elements dan tag penutup.
Oleh karena itu, disebut dengan empty elemnts (elemen kosong).

------------------------------------------------------------------------------------------------
Nested Elements
Sebuah elements HTML sangat mungkin dapat disarangkan. Seperti sebuah kata dari namanya,  nest memiliki arti bersarang. Jika diartikan, Nested Elements berarti elemen HTML yang disarangkan. Ini berarti, sebuah dokumen HTML dapat mengandung elements yang bersarang.
Maksud sederhananya, misal dalam kita menyusun sebuah dokumen HTML. Anda harus menuliskan setidaknya tag-tag dasar di sana. Teman-teman pasti tahu tag-tag tersebut. Anda dapat melihat bahwa ada elements sebuah tag yang menjadi elements tag lain yang lebih besar. Inilah yang disebut nested elements.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Elements</title>
</head>
<body>
<h1>Nested Elements</h1>
<p><b>Elements HTML</b> dapat bersarang, ini adalah contohnya.
Terdapat 7 buah elements HTML dan kebanyak jenis nested.</p>
</body>
</html>
Elements <html>…</html> diidentifikasikan sebagai dokumen keseluruhan dan mengandung konten elements <body>.
Elements <head>…</head> diidentifikasikan sebagai kepala dokumen yang berisi informasi halaman dan mengandung konten elements <title>.
Elements <title>…</title> diidentifikasikan sebagai judul halaman dan mengandung konten “Ma Haamesha | Elements” (tanpa petik).
Elements <body>…<body> diidentifikasikan sebagai badan dokumen yang akan ditampilkan dan mengandung konten elements <h1>; <p>; dan <b>.
Elements <h1>…</h1> diidentifikasikan sebagai judul artikel dan mengandung konten “Nested Elements” (tanpa petik).
Elements <p>…</p> diidentifikasikan sebagai sebuah paragraf dan mengandung konten “Teks” dan elements <b>.
Elements <b>…</b> diidentifikasikan sebagai teks cetak tebal dan mengandung konten “Elements HTML” (tanpa petik).
------------------------------------------------------------------------------------------------
Pentingnya Tag Penutup
Menuliskan tag penutup adalah hal yang penting. Walaupun ada bebearapa elements HTML yang tetap menampilkan dengan benar, meskipun kita lupa menuliskan tag penutup. Akan tetapi, dalam sebagian besar kasus, hal ini tidak berjalan demikian.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Elements</title>
</head>
<body>
<h1>Pentingnya Tag Penutup</h1>
<p>Ini berhasil pada tag paragraf.
<p>Coba kita lihat pada tag selain paragraf.
<p>Penulisan tanpa penutup tag.
<a href="http://mahaamesha.blogspot.com">Click this
<br/>seharusnya kalimat ini tidak termasuk link.
<a href="http://youtube.com">YouTube
<p>Untuk menguji pentingnya tag penutup,
<b>Anda bisa click keduanya.
<p>Tag penutup itu penting.
</body>
</html>
Setelah dijalankan di web browser, nampak sangat kacau. Tag link dan bold justru bekerja pada teks yang tidak semestinya. Dari contoh sederhana di atas, kita tahu bahwa penutup tag terhadap elements itu sangatlah penting.
Pada tag <p>, tanpa harus menuliskan tag penutupnya pun akan berjalan dengan rapih. Sebab, semua web browser sudah bekerja demikian. Penutup tag <p> tidak akan mempengaruhi elements-nya karena penutup tag <p> bersifat optional.
NB :
Lupa penulisan tag penutup dapat mengakibatkan hasil error.
------------------------------------------------------------------------------------------------
Empty Elements
Pada awal artikel tadi saya telah mencolek sedikit tentang empty elements ini. Empty Elements adalah elements HTML yang kosong (empty), tanpa isi atau konten. Pada artikel ini, Anda pasti sudah melihat tag <br> atau <br/>. Tag ini merupakan contoh dari empty elements. Jika diperhatikan, tag <br> berbeda dengan tag lainnya, tag ini berdiri sendiri.
Sebuah empty elements tidak menggunakan tag penutup dalam penulisannya. Tetapi, tag ini dapat disertai dengan penutup berupa garis miring atau slash (/) pada tag pembukanya.
Dalam penulisan HTML 5, kita tidak perlu menutup empty elements. HTML 5 sudah mendukung penulisan empty elements tanpa penutup slash. Jadi, kita hanya perlu menuliskan “<tagname>” saja.
NB :
Tuliskan penutup slash pada versi xHTML.
------------------------------------------------------------------------------------------------
Setelah rasa penasaran mengenai elements Anda terjawab. Masih ada partner dari tag dan elements, yaitu atribut. Pada tutorial selanjutnya kita akan membahas secara padat dan lugas materi tersebut di HTML Tutorials :Pengertian dan Konsep Atribut HTML.

Created by mahaamesha :}

Comments

Post a Comment