Apakah perlu untuk menulis tag HEAD, BODY dan HTML?

194

Apakah perlu menulis <html>, <head>dan memberi <body>tag?

Sebagai contoh, saya dapat membuat halaman seperti itu:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Dan Firebug memisahkan kepala dan tubuh dengan benar: masukkan deskripsi gambar di sini

Validasi W3C mengatakan itu valid.

Tetapi saya jarang melihat latihan ini di web.

Apakah ada alasan untuk menulis tag ini?

html tags Larry Cinnabar
sumber
5
Validator HTML5 di html5.validator.nu membutuhkan titletag. Ini adalah dokumen terkecil yang dianggap sah:<!DOCTYPE html> <title>A</title>
bonh

Jawaban:

142

Menghilangkan tanda html,, headdan body tag tentu saja diizinkan oleh spesifikasi HTML. Alasan yang mendasarinya adalah bahwa browser selalu berusaha untuk konsisten dengan halaman web yang ada, dan versi awal HTML tidak mendefinisikan elemen-elemen itu. Ketika HTML2.0 pertama kali, itu dilakukan dengan cara bahwa tag akan disimpulkan ketika hilang.

Saya sering merasa nyaman untuk menghilangkan tag saat membuat prototipe dan terutama ketika menulis kasus uji karena membantu menjaga mark-up terfokus pada tes yang dimaksud. Proses inferensi harus membuat elemen persis seperti yang Anda lihat di Firebug, dan browser cukup konsisten dalam melakukan itu.

Tapi...

IE memiliki setidaknya satu bug yang dikenal di area ini. Bahkan IE9 menunjukkan ini. Misalkan markupnya adalah ini:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

Anda harus (dan lakukan di browser lain) mendapatkan DOM yang terlihat seperti ini:

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

Tetapi di IE Anda mendapatkan ini:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

Lihat sendiri.

Bug ini tampaknya terbatas pada formtag awal sebelum konten teks apa pun dan bodytag awal apa pun .

Alohci
sumber
5
HTML 1.0 mendefinisikan HTML, HEAD, dan BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly
6
@ Liza - Yah, bisa diperdebatkan apakah dokumen itu mendefinisikan HTML 1.0, tapi saya berdiri terkoreksi, bahwa elemen pra-tanggal HTML 2.0. Terima kasih. Namun, lihat w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… dari tahun 1992. Elemen-elemennya tidak ada saat itu.
Alohci
1
Bug ini tampaknya tidak mempengaruhi Internet Explorer 11 (saya juga menguji IE8 yang saya konfirmasi terpengaruh)
jornane
2
@ Justin - Pembatasan itu sebagian besar bersifat teknis dan biasanya tidak akan memengaruhi Anda. Jadi ya, jika itu penting untuk halaman Anda apakah simpul komentar atau spasi muncul sebelum elemen kepala atau tepat di dalamnya, (JS halaman dapat bergantung padanya) maka Anda harus secara eksplisit mengidentifikasi tag mulai kepala untuk membuat hubungan itu benar . Tetapi jika tidak, (dan saya belum pernah menulis halaman HTML di mana ia melakukannya) maka tag kepala akan disimpulkan di suatu tempat masuk akal dan Anda dapat dengan aman menghilangkannya. Demikian juga untuk tag html, kepala dan tubuh lainnya.
Alohci
3
@Justin Jawaban ini tampaknya memiliki petunjuk yang cukup karena pertanyaannya adalah "Apakah perlu untuk menulis HEAD, BODY dan tag HTML?" bukan apakah itu praktik yang baik atau tidak. Konvensi cenderung berubah ... lihat saja google styleguide ... itu adalah konvensi yang menyatakan Anda harus menghilangkan tag ini ... :-)
Potherca
77

Panduan Gaya Google untuk HTML merekomendasikan untuk menghapus semua tag opsional.
Itu termasuk <html>, <head>, <body>, <p>dan <li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

Untuk tujuan pengoptimalan ukuran file dan scannability, pertimbangkan untuk menghapus tag opsional. Spesifikasi HTML5 menentukan tag apa yang dapat dihilangkan.

(Pendekatan ini mungkin memerlukan masa tenggang untuk ditetapkan sebagai pedoman yang lebih luas karena berbeda secara signifikan dari apa yang biasanya diajarkan pengembang web. Untuk alasan konsistensi dan kesederhanaan, sebaiknya dihilangkan semua tag opsional, bukan hanya pilihan.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
Rima
sumber
2
Contoh ketidakcocokan: alat live-reload yang saya gunakan untuk pengembangan web (puer) secara otomatis memasukkan skrip di kepala. Tanpa akhirnya tag <head>, itu tidak berfungsi.
Offirmo
@Offirmo Apa-apaan itu?
Ken Sharp
@KenSharp livereload alat web dev biasanya bekerja dengan menyisipkan beberapa kode di halaman dilayani, seperti itu: <script src="http://localhost:35729/livereload.js"></script>. Untuk templat eksotis, mereka tidak mengerti di mana mereka harus memasukkan kode mereka.
Offirmo
1
@Offirmo Dokumentasi status pemuatan-hati Anda harus menambahkan sendiri skrip itu ke halaman klien Anda. Mungkin Anda menggunakan perpustakaan ajaib yang melakukannya untuk Anda. Itu harus menjadi sumber kesulitan yang Anda hadapi.
kequc
7
Menghilangkan semua tag yang mungkin adalah sen dolar dan bodoh. Penghematan bandwidth adalah% kecil (terutama karena sebagian besar koneksi kompres otomatis), sementara kemungkinan kesalahan manusia pada kasus tepi tinggi (pertimbangkan penulis, editor, dan bahkan penulis parser HTML). Juga lebih sulit untuk menemukan kesalahan (karena perubahan entropi).
TextGeek
48

Berlawanan dengan catatan @Liza Daly tentang HTML5, spek itu sebenarnya cukup spesifik tentang tag mana yang dapat dihilangkan, dan kapan (dan aturannya sedikit berbeda dari HTML 4.01, sebagian besar untuk memperjelas di mana elemen ambigu seperti komentar dan spasi termasuk)

Referensi yang relevan adalah http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags , dan dikatakan:

  • Tag awal elemen html dapat dihilangkan jika hal pertama di dalam elemen html bukan komentar.

  • Tag akhir elemen html dapat dihilangkan jika elemen html tidak segera diikuti oleh komentar.

  • Tag awal elemen kepala dapat dihilangkan jika elemen kosong, atau jika hal pertama di dalam elemen kepala adalah elemen.

  • Tag akhir elemen kepala dapat dihilangkan jika elemen kepala tidak segera diikuti oleh karakter spasi atau komentar.

  • Tag awal elemen tubuh dapat dihilangkan jika elemen kosong, atau jika hal pertama di dalam elemen tubuh bukan karakter spasi atau komentar, kecuali jika hal pertama di dalam elemen tubuh adalah skrip atau elemen gaya.

  • Tag akhir elemen tubuh dapat dihilangkan jika elemen tubuh tidak segera diikuti oleh komentar.

Jadi contoh Anda adalah HTML5 yang valid, dan akan diuraikan seperti ini, dengan tag html, kepala dan badan di posisi tersirat mereka:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

Perhatikan bahwa komentar "skrip ini akan ada di kepala" sebenarnya diuraikan sebagai bagian dari tubuh, meskipun skrip itu sendiri adalah bagian dari kepala. Menurut spesifikasi, jika Anda ingin itu sama sekali berbeda, maka tag </HEAD>dan <BODY>mungkin tidak dihilangkan. (Meskipun tag yang sesuai <HEAD>dan </BODY>masih bisa)

Ian Clelland
sumber
15

Ini valid untuk menghilangkannya dalam HTML4:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

Di HTML5, tidak ada elemen "wajib" atau "opsional" yang tepat, karena sintaksis HTML5 lebih longgar. Sebagai contoh title:

Elemen judul adalah anak wajib dalam kebanyakan situasi, tetapi ketika protokol tingkat tinggi memberikan informasi judul, misalnya dalam baris Subjek email ketika HTML digunakan sebagai format penulisan email, elemen judul dapat dihilangkan. .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Menghilangkan mereka dalam XHTML5 benar, meskipun hampir tidak pernah digunakan (dibandingkan XHTML-acting-like-HTML5).

Namun, dari sudut pandang praktis Anda sering ingin browser dijalankan dalam "mode standar," untuk dapat diprediksi dalam rendering HTML dan CSS. Menyediakan DOCTYPE dan struktur HTML yang lebih terstruktur akan menjamin hasil lintas-browser yang lebih mudah diprediksi.

Liza Daly
sumber
13
Jangan campur aduk dengan tag. Lihat komentar cao di tempat lain di halaman ini. Untuk html, headdan body, elemen-elemen itu wajib, tetapi tag itu opsional.
Alohci
Sebenarnya Anda salah di bagian terakhir. Penghilangan tag adalah fitur SGML DTD, semua browser yang mendukung penguraian SGML (semua browser) juga mendukung penghapusan tag. Alasan mengapa Anda tidak dapat melakukannya di XHTML5 adalah karena XML, bukan SGML. XML terlalu bodoh untuk menyimpulkan elemen.
OdraEncoded
@OdraEncoded Bisakah Anda memberikan verifikasi untuk pernyataan Anda? Saya tidak menemukan itu menjadi kasusnya (lihat Standar HTML ).
Sikat gigi
@OdraEncoded - close, tetapi tidak sepenuhnya benar. Penghilangan tag adalah fitur opsional untuk pengurai SGML (meskipun sebagian besar mendukungnya), seperti yang didefinisikan dalam ISO 8879. Hampir semua pengurai HTML mendukungnya, meskipun 'html.parse' Python tampaknya tidak (lihat stackoverflow.com/questions/29954170/… ).
TextGeek
14

Memang benar bahwa spesifikasi HTML mengizinkan tag tertentu untuk dihilangkan dalam kasus tertentu, tetapi secara umum melakukannya tidak bijaksana.

Ini memiliki dua efek - itu membuat spec lebih kompleks, yang pada gilirannya membuat penulis browser lebih sulit untuk menulis implementasi yang benar (seperti yang ditunjukkan oleh IE yang salah).

Ini membuat kemungkinan kesalahan peramban di bagian-bagian spesifikasi ini tinggi. Sebagai penulis situs web, Anda dapat menghindari masalah dengan memasukkan tag ini - jadi sementara spek tidak mengatakan Anda harus melakukannya, hal itu mengurangi kemungkinan terjadi kesalahan, yang merupakan praktik rekayasa yang baik.

Terlebih lagi, spesifikasi HTML 5.1 WG terbaru saat ini mengatakan (perlu diingat ini adalah pekerjaan yang sedang berlangsung dan mungkin akan berubah).

Tag awal elemen tubuh dapat dihilangkan jika elemen kosong, atau jika hal pertama di dalam elemen tubuh bukan karakter spasi atau komentar, kecuali jika hal pertama di dalam elemen tubuh adalah meta, tautan, skrip, gaya , atau elemen templat.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

Ini agak halus. Anda dapat menghilangkan body dan head, dan browser kemudian akan menyimpulkan di mana elemen-elemen itu harus dimasukkan. Ini membawa risiko tidak eksplisit, yang dapat menyebabkan kebingungan.

Jadi ini

<html>
  <h1>hello</h1>
  <script ... >
  ...

menghasilkan elemen skrip menjadi anak dari elemen tubuh, tapi ini

<html>
  <script ... >
  <h1>hello</h1>

akan menghasilkan tag skrip menjadi anak dari elemen kepala.

Anda bisa eksplisit dengan melakukan ini

<html>
    <body>
      <script ... >
      <h1>hello</h1>

dan kemudian yang mana pun yang Anda miliki pertama kali, skrip atau h1, keduanya akan, diprediksi muncul di elemen tubuh. Ini adalah hal-hal yang mudah diabaikan saat melakukan refactoring dan debugging kode. (misalnya, Anda memiliki JS yang mencari elemen skrip 1 di badan - di cuplikan kedua ia akan berhenti berfungsi).

Sebagai aturan umum, menjadi eksplisit tentang hal-hal selalu lebih baik daripada membiarkan hal-hal terbuka untuk interpretasi. Dalam hal ini XHTML lebih baik karena memaksa Anda untuk sepenuhnya eksplisit tentang struktur elemen Anda dalam kode Anda, yang membuatnya lebih sederhana, dan karenanya kurang rentan terhadap salah tafsir.

Jadi ya, Anda dapat menghilangkannya dan secara teknis valid, tetapi umumnya tidak bijaksana untuk melakukannya.

Peter Bagnall
sumber
1
IE mendapat kesalahan karena penulis tidak peduli tentang standar. Ini kesalahan mereka jika itu tidak berfungsi dengan baik. Standar didefinisikan sehingga mereka harus memastikan IE bekerja dengannya.
Ken Sharp
3
@ KenSharp Saya tidak setuju, tetapi sampai Anda dapat memaksa semua pelanggan Anda untuk tidak menggunakannya, kami agak terjebak dengannya. Jadi lebih baik menulis kode yang sama sekali tidak ambigu daripada mengandalkan semua yang berfungsi sebagaimana mestinya.
Peter Bagnall
1
Pengguna telah dipaksa untuk membuang IE selama bertahun-tahun karena tidak patuh. Tidak ada yang mengharapkan pengguna untuk terus menggunakan IE6, bahkan jika orang masih menginstal Windows XP. Kami juga tidak dapat mengharapkan untuk mendukung Windows 3.1 selamanya. OSI Level 8 error.
Ken Sharp
1
Tag mana yang dapat dihilangkan dan di mana tepatnya, juga bervariasi menurut versi HTML. Itu juga sepertinya alasan yang baik untuk menghindarinya (kecuali untuk kasus yang paling jelas dan umum serta konsisten).
TextGeek
@TextGeek <!DOCTYPE html>.
Det
-2

Firebug menunjukkan ini dengan benar karena Browser Anda secara otomatis memperbaiki markup buruk untuk Anda. Perilaku ini tidak ditentukan di mana pun dan dapat (akan) bervariasi dari browser ke browser. Tag tersebut diperlukan oleh DOCTYPE yang Anda gunakan dan tidak boleh dihilangkan.

The elemen html adalah elemen akar setiap halaman html. Jika Anda melihat deskripsi semua elemen lain, dikatakan di mana elemen dapat digunakan (dan hampir semua elemen memerlukan kepala atau badan).

halfdan
sumber
Jadi, ini mungkin bukan browser lintas?
Larry Cinnabar
5
dengan kata lain - praktik buruk menghasilkan hasil yang tidak ditentukan.
Randy
3
@Innuendo Hanya karena sesuatu yang besar tidak berarti disatukan dengan baik.
Demian Brecht
2
Sebagai permohonan kepada otoritas, saya menemukan itu tidak meyakinkan. google.com juga HTML yang tidak valid. Bukan berarti milikmu seharusnya.
Rein Henrichs
17
Elemen harus ada. Tidak ada yang mengatakan tag lakukan. HTML tanpa tag html / head / body sebenarnya valid selama tidak ada elemen yang muncul. ( <title>setelah <p></p>, misalnya.)
cHao