จำเป็นต้องเขียนแท็ก HEAD, BODY และ HTML หรือไม่?

194

มันเป็นสิ่งจำเป็นที่จะเขียน<html>, <head>และ<body>แท็ก?

ตัวอย่างเช่นฉันสามารถสร้างหน้าดังกล่าว:

<!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>

และ Firebug แยกส่วนหัวและร่างกายอย่างถูกต้อง: ป้อนคำอธิบายรูปภาพที่นี่

การตรวจสอบ W3C บอกว่ามันถูกต้อง

แต่ฉันไม่ค่อยเห็นแบบฝึกหัดนี้บนเว็บ

มีเหตุผลในการเขียนแท็กเหล่านี้หรือไม่

html tags

— Larry Cinnabar
แหล่งที่มา

5

เครื่องมือตรวจสอบ HTML5 ที่html5.validator.nuจำเป็นต้องใช้titleแท็ก นี่เป็นเอกสารที่เล็กที่สุดที่พิจารณาว่าใช้ได้:<!DOCTYPE html> <title>A</title>

— bonh

142

ถนัดhtml, headและbody แท็กที่ได้รับอนุญาตอย่างแน่นอนโดยรายละเอียดของ HTML เหตุผลพื้นฐานคือเบราว์เซอร์พยายามที่จะสอดคล้องกับหน้าเว็บที่มีอยู่เสมอและ HTML รุ่นแรก ๆ นั้นไม่ได้กำหนดองค์ประกอบเหล่านั้น เมื่อ HTML~~2.0~~ เริ่มแรกทำโดยใช้วิธีที่แท็กจะอนุมานเมื่อไม่มี

ฉันมักจะพบว่าสะดวกที่จะละเว้นแท็กเมื่อสร้างต้นแบบและโดยเฉพาะอย่างยิ่งเมื่อเขียนกรณีทดสอบเนื่องจากช่วยให้มาร์คอัปเน้นไปที่การทดสอบที่เป็นปัญหา กระบวนการอนุมานควรสร้างองค์ประกอบในลักษณะที่คุณเห็นใน Firebug และเบราว์เซอร์ค่อนข้างสอดคล้องกันในการทำเช่นนั้น

แต่...

IE มีข้อผิดพลาดที่รู้จักอย่างน้อยหนึ่งรายการในพื้นที่นี้ แม้แต่ IE9 ก็แสดงสิ่งนี้ สมมติว่ามาร์กอัปคือ:

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

คุณควร (และทำในเบราว์เซอร์อื่น) รับ DOM ที่มีลักษณะดังนี้:

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

แต่ใน IE คุณจะได้รับ:

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

ดูด้วยตัวคุณเอง

ข้อผิดพลาดนี้ดูเหมือน จำกัด อยู่ที่formแท็กเริ่มต้นที่อยู่ด้านหน้าเนื้อหาข้อความและbodyแท็กเริ่มต้นใด ๆ

— Alohci
แหล่งที่มา

5

HTML 1.0 กำหนด HTML, HEAD และ BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt

— Liza Daly

6

@Liza - มันเป็นที่ถกเถียงกันอยู่ว่าเอกสารนั้นกำหนด HTML 1.0 หรือไม่ แต่ฉันแก้ไขแล้วว่าองค์ประกอบนั้นเป็น HTML 2.0 ล่วงหน้า ขอบคุณ อย่างไรก็ตามดูw3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/?hl=thจากปี 1992 องค์ประกอบดังกล่าวไม่มีอยู่จริง

— Alohci

1

ข้อผิดพลาดนี้ดูเหมือนว่าจะไม่ส่งผลกระทบต่อ Internet Explorer 11 (ฉันได้ทดสอบ IE8 ซึ่งฉันยืนยันแล้วว่าได้รับผลกระทบ)

— jornane

2

@Justin - ข้อ จำกัด เหล่านั้นส่วนใหญ่เป็นเรื่องทางเทคนิคและโดยทั่วไปจะไม่ส่งผลกระทบต่อคุณ ใช่ถ้ามันเกี่ยวกับหน้าเว็บของคุณไม่ว่าจะเป็นโหนดความคิดเห็นหรือพื้นที่สีขาวปรากฏขึ้นก่อนที่องค์ประกอบส่วนหัวหรือเพียงแค่อยู่ข้างใน (JS ของหน้าอาจขึ้นอยู่กับมัน) จากนั้นคุณจะต้องระบุแท็กเริ่มต้นอย่างชัดเจน . แต่ถ้ามันไม่เป็นเช่นนั้น (และฉันยังไม่เคยเขียนหน้า HTML ที่เป็นเช่นนั้น) แท็กส่วนหัวจะถูกอนุมานที่ใดที่หนึ่งที่เหมาะสมและคุณสามารถละเว้นได้อย่างปลอดภัย เช่นเดียวกันกับแท็ก html, head and body อื่น ๆ

— Alohci

3

@Justin คำตอบนี้ดูเหมือนจะมีเบาะแสค่อนข้างมากเนื่องจากคำถามคือ "จำเป็นต้องเขียน HEAD, BODY และแท็ก HTML หรือไม่" ไม่ว่าจะเป็นแนวปฏิบัติที่ดีหรือไม่ก็ตาม การประชุมมีแนวโน้มที่จะเปลี่ยนแปลง ... เพียงแค่ดูที่ google styleguide ... นั่นคือการประชุมที่ระบุว่าคุณควรละเว้นแท็กเหล่านี้ ... :-)

— Potherca

77

คู่มือสไตล์ Google สำหรับ HTML แนะนำให้เว้นแท็กทางเลือกทั้งหมด
ซึ่งรวมถึง <html>, <head>, <body>, และ <p><li>

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

สำหรับการปรับขนาดไฟล์ให้เหมาะสมและเพื่อความสามารถในการสแกนให้พิจารณาเว้นแท็กเผื่อเลือก ข้อมูลจำเพาะ HTML5 กำหนดแท็กที่สามารถละเว้นได้

(วิธีนี้อาจต้องใช้ระยะเวลาผ่อนผันที่จะกำหนดเป็นแนวทางที่กว้างขึ้นเนื่องจากมันแตกต่างอย่างมากจากสิ่งที่นักพัฒนาเว็บได้รับการสอนโดยทั่วไปด้วยเหตุผลที่สอดคล้องและเรียบง่าย

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


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

— Rima
แหล่งที่มา

2

ตัวอย่างของความไม่ลงรอยกัน: เครื่องมือโหลดสดที่ฉันใช้สำหรับการพัฒนาเว็บ (puer) แทรกสคริปต์ไว้ในหัวโดยอัตโนมัติ หากไม่มีแท็ก <head> ในที่สุดมันก็ไม่ทำงาน

— Offirmo

@Offirmo อะไรในโลกนั่นคืออะไร?

— เคนชาร์ป

@KenSharp livereload เครื่องมือเว็บ dev <script src="http://localhost:35729/livereload.js"></script>มักจะทำงานโดยการใส่รหัสบางอย่างในหน้าทำหน้าที่เช่นว่า: สำหรับเทมเพลตที่แปลกใหม่พวกเขาไม่เข้าใจว่าควรใส่รหัสที่ใด

— Offirmo

1

@Offirmo เอกสารของ livereload ระบุว่าคุณควรจะเพิ่มสคริปต์นั้นไปยังหน้าลูกค้าของคุณเอง บางทีคุณอาจใช้ห้องสมุดเวทมนตร์ที่ทำเพื่อคุณ นั่นควรเป็นสาเหตุของความยากลำบากที่คุณมี

— kequc

7

การละเว้นแท็กที่เป็นไปได้ทั้งหมดคือเงินที่ฉลาดและปอนด์ที่โง่ ประหยัดแบนด์วิดธ์เป็น% เล็ก ๆ (โดยเฉพาะอย่างยิ่งเนื่องจากการเชื่อมต่ออัตโนมัติส่วนใหญ่บีบอัด) ในขณะที่อัตราต่อรองของข้อผิดพลาดของมนุษย์ในกรณีขอบสูง (พิจารณาผู้เขียนบรรณาธิการและแม้แต่นักเขียน parser HTML) นอกจากนี้ยังเป็นการยากที่จะหาข้อผิดพลาด (เนื่องจากการเปลี่ยนแปลงของเอนโทรปี)

— TextGeek

48

ตรงกันข้ามกับ @Liza Daly เกี่ยวกับ HTML5 ข้อมูลจำเพาะนั้นค่อนข้างเฉพาะเจาะจงเกี่ยวกับแท็กที่สามารถละเว้นได้และเมื่อ (และกฎแตกต่างจาก HTML 4.01 เล็กน้อยส่วนใหญ่จะชี้แจงว่าองค์ประกอบที่คลุมเครือเช่นความคิดเห็นและช่องว่างอยู่ที่ใด)

การอ้างอิงที่เกี่ยวข้องคือhttp://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tagsและกล่าวว่า:

แท็กเริ่มต้นขององค์ประกอบ html อาจถูกละเว้นหากสิ่งแรกที่อยู่ภายในองค์ประกอบ html นั้นไม่ใช่ความคิดเห็น
แท็กสิ้นสุดขององค์ประกอบ html อาจถูกละเว้นหากองค์ประกอบ html ไม่ได้ถูกตามด้วยความคิดเห็นทันที
แท็กเริ่มต้นขององค์ประกอบส่วนหัวอาจถูกละเว้นหากองค์ประกอบนั้นว่างเปล่าหรือหากสิ่งแรกที่อยู่ภายในองค์ประกอบส่วนหัวเป็นองค์ประกอบ
แท็กสิ้นสุดขององค์ประกอบส่วนหัวอาจถูกตัดออกหากองค์ประกอบส่วนหัวไม่ได้ตามด้วยอักขระเว้นวรรคหรือแสดงความคิดเห็นทันที
แท็กเริ่มต้นขององค์ประกอบร่างกายอาจถูกละเว้นหากองค์ประกอบนั้นว่างเปล่าหรือสิ่งแรกที่อยู่ภายในองค์ประกอบร่างกายไม่ใช่อักขระเว้นวรรคหรือความคิดเห็นยกเว้นสิ่งแรกที่อยู่ภายในองค์ประกอบร่างกายคือสคริปต์หรือองค์ประกอบสไตล์
แท็กสิ้นสุดขององค์ประกอบร่างกายอาจถูกละเว้นหากองค์ประกอบของร่างกายไม่ได้ตามมาด้วยความคิดเห็นทันที

ดังนั้นตัวอย่างของคุณคือ HTML5 ที่ถูกต้องและจะถูกแยกวิเคราะห์เช่นนี้ด้วยแท็ก html, head and body ในตำแหน่งโดยนัย:

<!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>

โปรดทราบว่าความคิดเห็น "สคริปต์นี้จะอยู่ในหัว" จะถูกแยกวิเคราะห์เป็นส่วนหนึ่งของเนื้อความแม้ว่าสคริปต์นั้นจะเป็นส่วนหนึ่งของส่วนหัว ตามสเป็คถ้าคุณต้องการที่จะแตกต่างกันทั้งหมดแล้วแท็ก</HEAD>และ<BODY>อาจไม่ถูกละเว้น (แม้ว่าแท็กที่เกี่ยวข้อง<HEAD>และ</BODY>แท็กยังคงเป็นไปได้)

— Ian Clelland
แหล่งที่มา

15

มันถูกต้องเพื่อละเว้นพวกเขาใน 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

ใน HTML5 ไม่มีองค์ประกอบ "ที่จำเป็น" หรือ "เป็นทางเลือก" อย่างแน่นอนเนื่องจากไวยากรณ์ HTML5 นั้นถูกกำหนดอย่างอิสระมากขึ้น ตัวอย่างเช่นtitle:

อิลิเมนต์หัวเรื่องเป็นชายด์ที่จำเป็นในสถานการณ์ส่วนใหญ่ แต่เมื่อโพรโทคอลระดับสูงกว่าให้ข้อมูลชื่อเรื่องเช่นในบรรทัดหัวเรื่องของอีเมลเมื่อ HTML ถูกใช้เป็นรูปแบบการเขียนอีเมลองค์ประกอบชื่อเรื่องสามารถละเว้นได้ .

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

มันไม่ถูกต้องที่จะละเว้นพวกเขาใน XHTML5 จริงแม้ว่ามันแทบจะไม่เคยใช้เลย (เทียบกับ XHTML-Act-like-HTML-5)

อย่างไรก็ตามจากมุมมองเชิงปฏิบัติคุณมักต้องการให้เบราว์เซอร์ทำงานใน "โหมดมาตรฐาน" เพื่อการคาดการณ์ในการแสดงผล HTML และ CSS การให้ DOCTYPE และแผนผัง HTML ที่มีโครงสร้างมากขึ้นจะรับประกันผลลัพธ์ข้ามเบราว์เซอร์ที่คาดการณ์ได้มากขึ้น

— Liza Daly
แหล่งที่มา

13

อย่าทำให้องค์ประกอบยุ่งเหยิงด้วยแท็ก ดูความเห็นของ cHao ที่อื่นในหน้านี้ สำหรับhtml, headและbodyองค์ประกอบที่มีผลบังคับ แต่แท็กเป็นตัวเลือก

— Alohci

ที่จริงคุณผิดในบิตสุดท้าย การละเว้นแท็กเป็นคุณสมบัติ SGML DTD เบราว์เซอร์ทั้งหมดที่รองรับการแยกวิเคราะห์ SGML (นั่นคือเบราว์เซอร์ทั้งหมด) ยังรองรับการละเว้นแท็ก สาเหตุที่คุณไม่สามารถทำได้ใน XHTML5 นั้นเป็นเพราะเป็น XML ไม่ใช่ SGML XML นั้นโง่เกินไปที่จะสรุปองค์ประกอบ

— OdraEncoded

@OdraEncoded คุณสามารถให้การยืนยันคำสั่งของคุณได้ไหม? ฉันไม่พบว่าเป็นกรณี (ดูมาตรฐาน HTML )

— แปรงสีฟัน

@OdraEncoded - ปิด แต่ไม่เป็นความจริงเลย แท็กละเลยเป็นคุณลักษณะที่จำเป็นสำหรับการ parsers SGML (แม้ว่าการสนับสนุนส่วนใหญ่) ที่กำหนดไว้ในมาตรฐาน ISO 8879. เกือบทั้งหมด parsers HTML สนับสนุนมันแม้ว่างูใหญ่ 'html.parse' จะปรากฏขึ้นไม่ (ดูstackoverflow.com/questions/29954170/... )

— TextGeek

14

เป็นความจริงที่รายละเอียด HTML อนุญาตให้ละเว้นแท็กบางอย่างในบางกรณี แต่โดยทั่วไปแล้วการทำเช่นนั้นจะไม่ฉลาด

มันมีเอฟเฟกต์สองอย่าง - ทำให้ข้อมูลจำเพาะซับซ้อนขึ้นซึ่งทำให้ผู้เขียนเบราว์เซอร์ยากที่จะเขียนการใช้งานที่ถูกต้อง (ดังที่ IE แสดงให้เห็นว่าผิด)

ทำให้โอกาสในการเกิดข้อผิดพลาดของเบราว์เซอร์ในส่วนต่าง ๆ ของข้อมูลจำเพาะสูง ในฐานะผู้เขียนเว็บไซต์คุณสามารถหลีกเลี่ยงปัญหานี้ได้ด้วยการรวมแท็กเหล่านี้ดังนั้นในขณะที่สเป็คไม่ได้บอกว่าคุณต้องทำเช่นนั้นจะช่วยลดโอกาสที่จะเกิดข้อผิดพลาดซึ่งเป็นแนวปฏิบัติทางวิศวกรรมที่ดี

ยิ่งไปกว่านั้นข้อมูลจำเพาะ HTML 5.1 WG ล่าสุดกล่าวในขณะนี้ (โปรดทราบว่ามันเป็นงานที่อยู่ระหว่างดำเนินการและอาจเปลี่ยนแปลงได้)

แท็กเริ่มต้นขององค์ประกอบร่างกายอาจถูกละเว้นหากองค์ประกอบนั้นว่างเปล่าหรือสิ่งแรกที่อยู่ภายในองค์ประกอบร่างกายนั้นไม่ใช่อักขระช่องว่างหรือความคิดเห็นยกเว้นสิ่งแรกที่อยู่ภายในองค์ประกอบร่างกายคือเมตาลิงค์สคริปต์สไตล์ หรือองค์ประกอบแม่แบบ

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

นี่เป็นเรื่องเล็กน้อย คุณสามารถละทิ้งร่างกายและส่วนหัวและเบราว์เซอร์จะอนุมานตำแหน่งที่ควรใส่องค์ประกอบเหล่านั้น สิ่งนี้มีความเสี่ยงที่จะไม่ชัดเจนซึ่งอาจทำให้เกิดความสับสน

ดังนั้นนี่

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

ส่งผลให้องค์ประกอบของสคริปต์เป็นลูกขององค์ประกอบร่างกาย แต่สิ่งนี้

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

จะส่งผลให้แท็กสคริปต์เป็นลูกขององค์ประกอบส่วนหัว

คุณอาจชัดเจนโดยทำสิ่งนี้

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

และสิ่งใดก็ตามที่คุณมีก่อนสคริปต์หรือ h1 พวกเขาทั้งสองจะคาดเดาปรากฏในองค์ประกอบของร่างกาย สิ่งเหล่านี้เป็นสิ่งที่มองข้ามได้ง่ายในขณะที่ refactoring และ debugging code (พูดตัวอย่างเช่นคุณมี JS ที่กำลังมองหาองค์ประกอบสคริปต์ที่ 1 ในร่างกาย - ในตัวอย่างที่สองมันจะหยุดทำงาน)

ตามกฎทั่วไปการมีความชัดเจนเกี่ยวกับสิ่งต่าง ๆ ย่อมดีกว่าการเปิดสิ่งต่าง ๆ ไว้เพื่อตีความ ในเรื่องนี้ XHTML จะดีกว่าเพราะบังคับให้คุณมีความชัดเจนอย่างสมบูรณ์เกี่ยวกับโครงสร้างองค์ประกอบของคุณในรหัสของคุณซึ่งทำให้มันง่ายขึ้นและมีแนวโน้มที่จะตีความผิดน้อยกว่า

ใช่คุณสามารถละเว้นพวกเขาและใช้งานได้ในทางเทคนิค แต่โดยทั่วไปแล้วมันไม่ฉลาดในการทำเช่นนั้น

— Peter Bagnall
แหล่งที่มา

1

IE ทำสิ่งผิดพลาดเพราะผู้เขียนไม่สนใจมาตรฐานน้อยลง เป็นความผิดของพวกเขาหากทำงานไม่ถูกต้อง มีการกำหนดมาตรฐานเพื่อให้แน่ใจว่า IE ทำงานร่วมกับพวกเขาได้

— Ken Sharp เมื่อ

3

@ KenSharp ฉันไม่เห็นด้วย แต่จนกว่าคุณจะสามารถบังคับให้ลูกค้าทุกคนไม่ใช้มันเราก็ติดอยู่กับมัน ดังนั้นควรเขียนโค้ดที่ไม่มีความกำกวมอย่างสมบูรณ์มากกว่าพึ่งพาทุกสิ่งที่ทำงานตามที่ควร

— Peter Bagnall

1

ผู้ใช้ถูกบังคับให้ถ่ายโอนข้อมูล IE เป็นเวลาหลายปีเนื่องจากไม่เป็นไปตามมาตรฐาน ไม่มีใครคาดหวังให้ผู้ใช้ใช้งาน IE6 ต่อไปแม้ว่าผู้ใช้จะยังคงติดตั้ง Windows XP อยู่ก็ตาม เราไม่สามารถคาดหวังได้ว่าจะรองรับ Windows 3.1 ตลอดไป ข้อผิดพลาด OSI ระดับ 8

— Ken Sharp

1

ว่าแท็กใดที่สามารถละเว้นได้และตรงกับที่แตกต่างกันไปตามเวอร์ชัน HTML นั่นก็ดูเหมือนจะเป็นเหตุผลที่ดีที่จะหลีกเลี่ยงพวกเขา (ยกเว้นกรณีที่ชัดเจนและพบบ่อยที่สุดและสอดคล้องกัน)

— TextGeek

<!DOCTYPE html>@TextGeek

— เดช

-3

Firebug แสดงสิ่งนี้อย่างถูกต้องเนื่องจากเบราว์เซอร์ของคุณแก้ไขมาร์กอัปที่ไม่ดีสำหรับคุณโดยอัตโนมัติ พฤติกรรมนี้ไม่ได้ระบุไว้ที่ใดก็ได้และสามารถ (จะ) แตกต่างกันไปในแต่ละเบราว์เซอร์ แท็กเหล่านี้ต้องการโดย DOCTYPE ที่คุณใช้และไม่ควรตัดออก

องค์ประกอบ HTMLเป็นองค์ประกอบหลักของหน้า html ทุก หากคุณดูที่คำอธิบายองค์ประกอบอื่น ๆ ทั้งหมดมันจะบอกว่าสามารถใช้องค์ประกอบใดได้บ้าง (และองค์ประกอบเกือบทั้งหมดต้องใช้ทั้งส่วนหัวและร่างกาย)

— Halfdan
แหล่งที่มา

ดังนั้นมันอาจไม่ใช่เบราว์เซอร์ข้าม?

— Larry Cinnabar

5

กล่าวอีกนัยหนึ่ง - การปฏิบัติที่ไม่ดีซึ่งให้ผลลัพธ์ที่ไม่ได้กำหนด

— แรนดี้

3

@Innuendo เพียงเพราะบางสิ่งที่ยิ่งใหญ่ไม่ได้แปลว่ามันเข้ากันได้ดี

— Demian Brecht

2

ในฐานะที่เป็นการอุทธรณ์ต่อผู้มีอำนาจฉันพบว่าไม่น่าเชื่อถือ google.com นั้นเป็น HTML ที่ไม่ถูกต้องเช่นกัน ไม่ได้หมายความว่าคุณควรจะเป็น

— Rein Henrichs

17

องค์ประกอบจะต้องมีอยู่ ไม่มีอะไรบอกว่าแท็กทำ ในความเป็นจริงแล้ว HTML ที่ไม่มีแท็ก html / head / body จะใช้ได้ตราบใดที่ไม่มีองค์ประกอบใดปรากฏขึ้น ( ตัวอย่างเช่น<title>หลังจาก<p></p>,)

— cHao