HTML Tags, Element, Attribute dan Content

0 Shares
0
0

Perhatikan struktur halaman web html di bawah.

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Gambar ilustrasi struktur halaman web

Halaman web html tersusun dari satu element atau lebih, setiap element dibuat dari tag-tag, terdapat attribute dan content, kesatuan ini membentuk struktur halaman web.

HTML Element

Element adalah satu komponen individu dokumen html, pada umumnya tersusun dari sebuah tag pembuka, content dan tag penutup. Pada gambar struktur halaman web di atas, terdapat 6 jenis element, yaitu element induk <html></html>, elemen head<head></head>, element title<title></title>, element body<body></body>, element heading<h1></h1> dan element paragraf <p></p>.

Berikut adalah ilustrasi struktur element HTML.

Di dalam element html terdapat tag, attribute dan content.

Contoh element paragraf yang berisi content berupa text (string).

<p>Ini adalah konten di dalam elemen paragraf</p>

Rangkaian kode di atas disebut sebagai satu element, yaitu element paragraf, terdiri dari tag pembuka <p>, content “Ini adalah konten di dalam elemen paragraf” dan tag penutup </p>.

HTML Tag, Attribute dan Content

Tag digunakan untuk menandai awal dan akhir sebuah element.

Tag bersifat read-only, berupa tagName (nama tag) di dalam angle brackets (<>). Contoh, jika tag pembuka dari element paragraf adalah <p>, maka “p” adalah tagName-nya.

<tagName></tagName>

HTML tags biasanya berpasangan (paired tag), contohnya adalah tag title <title> berpasangan dengan </ title>, tag pertama disebut tag pembuka (start tag, opening tag) dan tag kedua disebut tag penutup (end tag, closing tag). Tag penutup ditulis seperti tag pertama, tetapi sebelum tagName disisipkan forward slash (/).

Contoh tag-tag berpasangan (paired tag).

<html></html>, <head></head>, <title></title>, <body></body>, <p></p>

Contoh tag-tag tidak berpasangan (single tag).

<img>, <br>, <hr>, <area>, <input>, <link>

Attribute adalah informasi tambahan di dalam sebuah element, attribute selalu di sisipkan di dalam tag pembuka. Attribute terdiri dari nama attribute (attribute name) dan nilainya (attribute value).

Contoh tag dengan attribute class dan data.

<p class="info" data="ini adalah data text"></p>

Sedangkan content adalah data/informasi berupa text (string) di dalam element, content inilah yang akan ditampilkan di dalam halaman web. Sistem mark up html yang membuat content/informasi di dalam website terstruktur, menarik dan enak dibaca.

Contoh elemen paragraf dengan content.

<p>Ini adalah content di dalam elemen paragraf</p>

Contoh struktur dokumen html dan tampilannya di web http://example.com/

Lihat tampilan informasi dari halaman web https://topdocumentaryfilms.com/

0 Shares
Leave a Reply

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

You May Also Like

Regresi Linear

Regresi membantu mengetahui hubungan antara dua variabel. Contoh, beberapa pertanyaan yang sering ditanyakan tentang pendidikan adalah, apakah tingkat…

Model OSI

Apa model OSI? Model Open Systems Interconnection (OSI) adalah sebuah model konseptual yang dibuat oleh Organisasi Standar Internasional…