Unsur HTML

**Unsur HTML** ialah sejenis komponen dokumen HTML (*HyperText Markup Language*), salah satu daripada beberapa jenis nod HTML (terdapat juga nod teks, nod komen dan lain-lain). Dokumen HTML terdiri daripada pepohon nod HTML ringkas, seperti nod teks, dan unsur HTML, yang menambah semantik dan pemformatan pada bahagian dokumen (cth. menjadikan teks tebal, penyusunan ke dalam perenggan, senarai, jadual, pemasukan hiperpautan dan imej). Setiap elemen boleh mempunyai atribut HTML yang ditentukan. Satu unsur juga boleh mempunyai kandungan, termasuk unsur dan teks lain.

## Konsep

### Unsur lwn. tag
Seperti yang difahami secara umum, kedudukan unsur ditunjukkan sebagai bermula dari teg pemula dan ditamatkan teg penamat. Ini adalah kes bagi kebanyakan situasi, tetapi bukan semua unsur dalam dokumen HTML. Perbezaan ini secara khusus ditekankan dalam spesifikasi HTML 4.01:

Dalam sintaks HTML, kebanyakan elemen ditulis dengan teg pemula dan teg penamat, dengan kandungan di antaranya. **Teg HTML** terdiri daripada nama elemen, dikelilingi oleh kurungan sudut. Teg penamat juga mempunyai garis miring selepas kurungan sudut pembukaan, untuk membezakannya daripada teg mula. Sebagai contoh, perenggan, yang diwakili oleh elemen , akan ditulis sebagai:

## Huraian

### Sintaks
\mathtt{= *}\!\underbrace\mathtt{paragraph}_\mathsf{\color{White}{Attr} \atop \color{Black}Nilai\ atribut}*\mathtt{\color{BrickRed}>}}^\mathsf{Tag\ pemula}
  \overbrace\mathtt{\color{Green}Ini\ ialah\ sebuah\ perenggan.}^\mathsf{Kandungan}
  \overbrace\mathtt{\color{BrickRed}}^\mathsf{Teg \atop akhir}
}^\mathsf{Unsur}
}}
```html4strict
<p>Dalam sintaks HTML, kebanyakan unsur ditulis  ...</p>
```
Walau bagaimanapun, tidak semua elemen ini memerlukan teg akhir, termasuk teg pemula. Sesetengah elemen, yang dipanggil *elemen kosong*, tidak mempunyai tag akhir. Contoh biasa ialah elemen  (pemutus garis paksaan). Tingkah laku elemen kosong dipratentukan dan ia tidak boleh mengandungi sebarang kandungan atau unsur lain. Sebagai contoh, alamat akan ditulis sebagai:
```html4strict
<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>
```
Dalam XHTML, adalah mesti untuk membuka dan menutup semua elemen, termasuk elemen kosong. Ini boleh dilakukan dengan meletakkan teg tamat sejurus selepas teg permulaan, tetapi ini tidak sah dalam HTML 5 dan akan menyebabkan dua unsur tercipta. Cara alternatif untuk menentukan bahawa ia adalah elemen kosong, yang serasi dengan kedua-dua XHTML dan HTML 5, adalah dengan meletakkan `/` di akhir teg (jangan dikelirukan dengan `/` pada awal teg penamat).
```
[[atribut HTML|Atribut HTML]] ditentukan dalam teg permulaan. Contohnya, elemen , yang mewakili [[Singkatan kata|singkatan]], menjangkakan atribut <code>title</code> dalam teg pembukaannya. Ini akan ditulis sebagai:<syntaxhighlight lang="html4strict">
<abbr title="singkatan">sing.</abbr>
```
Secara tidak formal, unsur HTML kadangkala dirujuk sebagai teg, walaupun ramai yang memilih untuk merujuk teg semata-mata bagi kepada penanda yang permulaan dan penghujung unsur.

Nama elemen (dan atribut) boleh ditulis dalam mana-mana gabungan huruf besar atau kecil dalam HTML, tetapi mesti dalam huruf kecil dalam XHTML. Bentuk kanonik ialah huruf besar sehingga HTML 4, dan telah digunakan dalam spesifikasi HTML, tetapi dalam beberapa tahun kebelakangan ini, huruf kecil telah menjadi lebih lazim.

## Unsur struktur dokumen

## Elemen kepala (''head'') dokumen

## Unsur badan (''body'') dokumen
Dalam penyemak imbas visual, elemen boleh dipaparkan boleh dipaparkan sebagai sama ada secara *blok* atau *sebaris*. Walaupun semua elemen adalah sebahagian daripada jujukan dokumen, elemen blok muncul dalam elemen induknya:

* sebagai objek segi empat tepat yang tidak melanggar garis;
* dengan ciri jidar blok, lebar dan ketinggian yang boleh ditetapkan secara bebas daripada elemen sekeliling.

Sebaliknya, elemen sebaris dianggap sebagai sebahagian daripada aliran teks dokumen; mereka tidak boleh menetapkan jidar, lebar atau ketinggian, dan mampu memecahkan garisan.

### Unsur blok
Unsur blok, mempunyai struktur segi empat tepat. Secara asas, elemen ini akan merentangi keseluruhan lebar unsur induknya, dan oleh itu tidak akan membenarkan mana-mana elemen lain untuk menduduki ruang mendatar yang sama seperti tempat diletakkan.

Struktur segi empat tepat bagi elemen blok sering dirujuk sebagai model kotak, dan terdiri daripada beberapa bahagian. Setiap elemen mengandungi perkara berikut:

* **Kandungan** unsur ialah teks sebenar (atau media lain) yang diletakkan di antara tag pembuka dan penutup unsur.
* **Pelapik** (*padding*) unsur ialah ruang di sekeliling kandungan tetapi masih menjadi sebahagian daripada elemen. Pelapik tidak boleh digunakan untuk mencipta ruang putih antara dua elemen. Sebarang gaya latar belakang yang diberikan kepada unsur, seperti imej latar belakang atau warna, akan kelihatan dalam pelapik. Menambahkan saiz pelapik elemen meningkatkan jumlah ruang yang akan diambil oleh elemen ini.
* **Sempadan** (*border*) unsur ialah penghujung mutlak unsur dan merentangi perimeter unsur tersebut. Ketebalan sempadan meningkatkan saiz elemen.
* **Jidar** (*margin*) unsur ialah ruang putih yang mengelilingi unsur. Kandungan, pelapik dan sempadan mana-mana elemen lain tidak akan dibenarkan memasuki kawasan ini melainkan dipaksa untuk berbuat demikian oleh beberapa peletakan CSS lanjutan. Menggunakan kebanyakan DTD standard, jidar di sebelah kiri dan kanan yang elemen berbeza akan menolak satu sama lain. Jidar di bahagian atas atau bawah elemen, sebaliknya, tidak akan bertindan atau akan bercampur. Ini bermakna ruang putih antara unsur-unsur ini akan sama besar dengan jidar yang lebih besar di antara unsur-unsur ini.

Bahagian di atas hanya merujuk kepada pelaksanaan terperinci pemaparan CSS dan tidak mempunyai kaitan dengan elemen HTML itu sendiri.

## Unsur lain

### Elemen sebaris
Elemen sebaris tidak boleh diletakkan terus di dalam elemen ; ia mesti dimasukkan sepenuhnya dalam elemen peringkat blok.

### Borang
Elemen ini boleh digabungkan ke dalam bentuk atau dalam beberapa keadaan digunakan secara berasingan sebagai kawalan antara muka pengguna; dalam dokumen, ia boleh menjadi suatu HTML ringkas atau digunakan bersama dengan skrip. Penanda HTML menentukan unsur-unsur yang membentuk borang, dan kaedah yang mana ia akan diserahkan. Walau bagaimanapun, beberapa bentuk skrip (bahagian pelayan, bahagian klien atau kedua-duanya) mesti digunakan untuk memproses input pengguna sebaik sahaja ia diserahkan.

### Jadual
Format jadual HTML telah dicadangkan dalam Draf HTML 3.0 dan jadual HTML RFC 1942 yang terkemudian. Model ini telah diilhamkan oleh Model Jadual CALS. Beberapa elemen dalam cadangan ini disertakan dalam HTML 3.2; bentuk jadual HTML sekarang telah diseragamkan dalam HTML 4. (Banyak elemen yang digunakan dalam jadual bukan elemen *blok* mahupun *sebaris*.)

## ''Frame''
*Frame* ("bingkai") membenarkan tetingkap penyemak imbas HTML visual dibahagikan kepada segmen, dengan setiap satunya boleh menunjukkan dokumen yang berbeza. Ini boleh mengurangkan penggunaan lebar jalur, kerana bahagian susun atur yang berulang boleh digunakan dalam satu bingkai, manakala kandungan berubah dipaparkan dalam bingkai yang lain. Ini mungkin datang pada kos kebolehgunaan tertentu, terutamanya dalam ejen pengguna bukan visual, disebabkan oleh dokumen (atau tapak web) yang berasingan dan bebas dipaparkan bersebelahan antara satu sama lain dan dibenarkan berinteraksi dengan tetingkap induk yang sama. Disebabkan kos ini, *frame* (tidak termasuk elemen  ) hanya dibenarkan dalam HTML 4.01 Frame-set. *Iframes* juga boleh menyimpan dokumen dalam pelayan yang berbeza. Dalam kes ini interaksi antara tingkap disekat oleh penyemak imbas. Tapak seperti Facebook dan Twitter menggunakan *iframe* untuk memaparkan kandungan (*plugin*) pada tapak web pihak ketiga. Google AdSense menggunakan *iframe* untuk memaparkan iklan di tapak web pihak ketiga.

Dalam HTML 4.01, dokumen mungkin mengandungi  dan   atau  dan , tetapi bukan kedua-dua  dan . Walau bagaimanapun,  boleh digunakan dalam badan dokumen biasa.

## Rujukan


## Pautan luar

* HTML 4.01 (24 Dis 1999): unsur dan atribut
* HTML5 (28 Okt 2014): unsur dan atribut