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.^[1] Ini adalah kes bagi kebanyakan situasi, tetapi bukan semua unsur dalam dokumen HTML. Perbezaan ini secara khusus ditekankan dalam spesifikasi HTML 4.01:

Unsur bukan tag. Sebilangan orang merujuk kepada unsur sebagai tag (cth., "tag P"). Perlu diingatkan bahawa unsur ialah satu benda, dan tag pula (tag pemula atau penamat) adalah satu benda lain. Sebagai contoh, unsur HEAD sentiasa ada, meskipun tag-tag HEAD mungkin tiada dalam penulisan.^[1]

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 <p>, akan ditulis sebagai:

Huraian

Sintaks

\overbrace {\overbrace {{\mathtt {\color {BrickRed}<\!p\ }}\color {Magenta}\underbrace {\mathtt {class}} _{\mathsf {\color {Black}{Nama \atop atribut}}}{\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}<\!/p\!>}} ^{\mathsf {Teg \atop akhir}}} ^{\mathsf {Unsur}}

Bahagian-bahagian kod unsur HTML.

<p>Dalam sintaks HTML, kebanyakan unsur ditulis  ...</p>

Walau bagaimanapun, tidak semua elemen ini memerlukan teg akhir, termasuk teg pemula.^[2] Sesetengah elemen, yang dipanggil elemen kosong, tidak mempunyai tag akhir. Contoh biasa ialah elemen <br> (pemutus garis paksaan). Tingkah laku elemen kosong dipratentukan dan ia tidak boleh mengandungi sebarang kandungan atau unsur lain. Sebagai contoh, alamat akan ditulis sebagai:

<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 ditentukan dalam teg permulaan. Contohnya, elemen <abbr>, yang mewakili singkatan, menjangkakan atribut title dalam teg pembukaannya. Ini akan ditulis sebagai:

<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.^[3] 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

<html>...</html>: Unsur akar suatu dokumen HTML; kesemua unsur lain tergolong dalam unsur ini. Unsur ini menanda permulaan dan tamatnya satu unsur HTML.; Kedua-dua teg pemula dan penamat adalah tidak wajib (HTML5).^[2]; Dipiawaikan dalam HTML 2.0; masih digunakan.
<head>...</head>: Templat:Ghat Bekas yang menempatkan maklumat proses dan metadata sesebuah dokumen HTML.; Kedua-dua teg pemula dan penamat adalah tidak wajib, dan boleh dirujuk berdasarkan unsur bawahan (HTML5).^[2]; Dipiawaikan dalam HTML 2.0; masih digunakan.
<body></body>: Templat:Ghat Bekas bahagian dokumen HTML tampak.; Kedua-dua teg pemula dan penamat adalah tidak wajib, dan boleh dirujuk berdasarkan unsur bawahan (HTML5).^[2]; Dipiawaikan dalam HTML 2.0; masih digunakan.

Elemen kepala (head) dokumen

<base />

Menetapkan satu URL asas (base) bagi semua href relatif serta pautan lain dokumen. Mesti ada sebelum apa-apa unsur yang merujuk kepada sumber luar. HTML membenarkan hanya satu unsur <base> bagi setiap dokumen. Unsur ini memiliki atribut HTML, tetapi tiada kandungan.

Satu versi dibangunkan (sebagai BASE) disebut dalam Teg HTML; dipiawaikan dalam HTML 2.0; masih digunakan.

<basefont /> (lapuk)

Menetapkan saiz, jenis dan warna fon asas. Digunakan bersama dengan unsur-unsur <font>. Dilapukkan, dan digantikan dengan lembaran gaya.

Dipawaikan dalam HTML 3.2; dilapukkan dalam HTML 4.0 Transitional; tidak sah dalam HTML 4.0 Strict.

<isindex /> (lapuk)

<isindex> mungkin muncul dalam kepala atau badan, tetapi hanya satu dalam sebuah dokumen.

<link />

Menetapkan pautan ke dokumen lain, seperti pautan sebelum dan seterusnya atau versi alternatif.^[4] Satu kegunaan lazim ialah pautan ke lembaran gaya luaran dengan, <link rel="stylesheet" type="text/css" href="url" title="description_of_style">.^[5] Satu lagi kegunaan penting (tetapi kurang lazim) ialah memberikan petua navigasi secara konsisten melalui mikroformat. Beberapa hubungan lazim ditetapkan yang mungkin ditampak kepada pengguna melalui antaramuka berbanding secara telus daripada laman web, seperti: <link rel="next" href="url">. Sebuah unsur <head> boleh memiliki seberapa banyak unsur <link /> yang diingini. Unsur ini memiliki atribut HTML, tetapi tiada kandungan.

LINK wujud dalam HTML Internet Draft 1.2, dan dipiawaikan dalam HTML 2.0; masih digunakan.

<meta />

Boleh digunakan untuk menambah metadata tambahan berkenaan satu dokumen seperti pengarang, tarikh penerbitan, tarikh luput, bahasa, tajuk/huraian rencana, kata-kata kunci serta sebarang maklumat yang tidak diberi melalui unsur dan atribut kepala lain. Secara am, sebuah unsur meta menetapkan maklumat-maklumat sulit berkenaan dokumen. Sebilangan unsur meta boleh digunakan, dengan kesemuanya perlu dimasukkan ke dalam unsur kepala. Tujuan-tujuan khusus unsur <meta /> ditetapkan menerusi atributnya. Di luar XHTML, ia secara biasnya ditulus tanpa tanda palang (<meta>) walaupun sebagai unsur kosong.

Dalam satu jenis, unsur <meta /> boleh menetapkan kepala HTTP yang patut dihantar sesebuah pelayan web sebelum konten sebenar. Sebagai contoh, <meta http-equiv="foo" content="bar" /> menetapkan agar halaman diuruskan melalui kepala HTTP bernama foo dengan nilai bar.

Dalam bentuk am, sebuah unsur <meta /> menetapkan atribut HTML nama dan content yang menerangkan aspek-aspek halaman HTML. Untuk mengelakkan ambiguiti, satu atribut ketiga pilihan, scheme, boleh dimasukkan untuk menetapkan satu rangka semantik yang menerangkan makna kunci dan nilainya. Misalnya, dalam <meta name="foo" content="bar" scheme="DC" />, unsur <meta /> menetapkan dirinya mempunyai unsur foo, dengan nilai bar, Rangka Kerja Keterangan Sumber Dublin Core.

Dipiawaikan dalam HTML 2.0; masih digunakan.

<object>...</object>

Digunakan untuk memasukkan objek-objek generik dalam kepala dokumen. Meskipun jarang digunakan dengan unsur <head>, ia boleh digunakan untuk mengambil data berasingan dan disatukan dengan dokumen kini.

Dipiawaikan dalam HTML 4.0; masih digunakan.

<script>...</script>

Boleh digunakan sebagai bekas bagi arahan skrip atau pautan terhadap skrip luaran dengan atribut pilihan src.^[6] Juga dapat digunakan dalam badan dokumen untuk menjana suatu konten dalam blok atau sebaris.

Dipiawaikan dalam HTML 3.2; masih digunakan.

<style>...</style>

Menetapkan CSS dokumen, lazimnya dalam bentuk <style type="text/css"> ... </style>. Boleh digunakan bekas arahan penggayaan atau pautan ke lembaran luaran – sebagai contoh, dalam CSS, @import direktif bentuk^[7] <style> @import url; </style>

Dipiawaikan dalam HTML 3.2; masih digunakan.

<title>...</title>

Teg ini menetapkan tajuk dokumen. Wajib dalam setiap dokumen HTML dan XHTML. Agen pengguna boleh menggunakan tajuk dalam pelbagai cara, seperti:

Pengimbas web lazimnya memaparkannya dalam bar tajuk ketika tetingkap dibuka, dan (di mana mungkin) ketika tetingkap dikecilkan.
Ia boleh menjadi nama fail asal ketika laman disimpan.
Unsur <title> hanya dapat digunakan sekali dalam satu laman web, dan ketika mencipta satu lagi laman, satu unsur <title> perlu dicipta lagi (satu tag yang sama adalah tidak digalakkan kerana ia akan menimbulkan masalah pada enjin carian).
Perayap web pada enjin carian mungkin memberi tumpuan kepada perkataan yang digunakan pada tajuk.

Unsur <title> tidak boleh memiliki unsur lain, dan hanya satu unsur <title> dibenarkan dalam satu dokumen.

Wujud dalam HTML Tags, dan dipiawaikan dalam HTML 2.0; masih digunakan.

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 <body>; ia mesti dimasukkan sepenuhnya dalam elemen peringkat blok.^[8]

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,^[9] 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 <iframe> ) 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 <head> dan <body> atau <head> dan <frameset>, tetapi bukan kedua-dua <body> dan <frameset>. Walau bagaimanapun, <iframe> boleh digunakan dalam badan dokumen biasa.

Rujukan

^ ^a ^b "§3 On SGML and HTML". HTML 4.01 Specification. W3C. 24 December 1999. §3.2.1 Elements.
^ ^a ^b ^c ^d "HTML Standard § Optional tags". WHATWG. Dicapai pada 22 March 2019.
^ XHTML 1.0 §4.2
^ HTML 4.01 §12.3
^ HTML 4.01 §14.3.2
^ HTML 4.01 §18
^ CSS §1.1
^ HTML 4.01, W3.org, dicapai pada 2012-03-26
^ "Are frames accessible?". ...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.

Pautan luar

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

[HTML401_Elements-1] "§3 On SGML and HTML". HTML 4.01 Specification. W3C. 24 December 1999. §3.2.1 Elements.

[whatwg-syntax-tag-omission-2] "HTML Standard § Optional tags". WHATWG. Dicapai pada 22 March 2019.

[XHTML10-42-3] XHTML 1.0 §4.2

[4] HTML 4.01 §12.3

[5] HTML 4.01 §14.3.2

[6] HTML 4.01 §18

[7] CSS §1.1

[8] HTML 4.01, W3.org, dicapai pada 2012-03-26

[9] "Are frames accessible?". ...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]