Có nhất thiết phải viết các thẻ CHÍNH, CƠ THỂ và HTML không?


194

Có cần thiết phải viết <html>, <head><body>thẻ?

Ví dụ: tôi có thể tạo một trang như vậy:

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

Và Firebird phân tách chính xác đầu và cơ thể: nhập mô tả hình ảnh ở đây

Xác nhận W3C cho biết nó hợp lệ.

Nhưng tôi hiếm khi thấy thực hành này trên web.

Có bất kỳ lý do để viết các thẻ này?


5
Trình xác thực HTML5 tại html5.validator.nu yêu cầu titlethẻ. Đây là tài liệu nhỏ nhất mà nó cho là hợp lệ:<!DOCTYPE html> <title>A</title>
bonh

Câu trả lời:


142

Bỏ qua html, headbody thẻ được chắc chắn cho phép bởi các thông số kỹ thuật HTML. Lý do cơ bản là các trình duyệt luôn tìm cách phù hợp với các trang web hiện có và các phiên bản đầu tiên của HTML không xác định các yếu tố đó. Khi HTML2.0 Đầu tiên, nó được thực hiện theo cách mà các thẻ sẽ được suy ra khi thiếu.

Tôi thường thấy thuận tiện khi bỏ qua các thẻ khi tạo mẫu và đặc biệt là khi viết các trường hợp kiểm thử vì nó giúp giữ cho việc đánh dấu tập trung vào bài kiểm tra được đề cập. Quá trình suy luận sẽ tạo ra các yếu tố theo cách chính xác mà bạn nhìn thấy trong Fireorms và các trình duyệt khá nhất quán khi thực hiện điều đó.

Nhưng...

IE có ít nhất một lỗi đã biết trong lĩnh vực này. Ngay cả IE9 cũng thể hiện điều này. Giả sử đánh dấu là thế này:

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

Bạn nên (và làm trong các trình duyệt khác) có được một DOM giống như thế này:

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

Nhưng trong IE bạn có được điều này:

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

Xem nó cho chính mình.

Lỗi này dường như giới hạn ở formthẻ bắt đầu trước bất kỳ nội dung văn bản và bất kỳ bodythẻ bắt đầu nào .


5
HTML 1.0 được xác định HTML, ĐẦU và CƠ THỂ: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly

6
@Liza - Không thể tranh cãi liệu tài liệu đó có định nghĩa HTML 1.0 hay không, nhưng tôi đã sửa, rằng các yếu tố trước ngày 2.0 2.0. Cảm ơn. Tuy nhiên, hãy xem w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/ trộm từ năm 1992. Các yếu tố không tồn tại sau đó.
Alohci

1
Lỗi này dường như không ảnh hưởng đến Internet Explorer 11 (Tôi cũng đã kiểm tra IE8 mà tôi xác nhận là bị ảnh hưởng)
jornane

2
@Justin - Những hạn chế đó phần lớn là về mặt kỹ thuật và sẽ không ảnh hưởng đến bạn. Vì vậy, nếu nó quan trọng với trang của bạn cho dù nút bình luận hoặc khoảng trắng xuất hiện ngay trước phần tử đầu hoặc ngay bên trong nó, (JS của trang có thể phụ thuộc vào nó) thì bạn phải xác định rõ ràng thẻ bắt đầu để làm cho mối quan hệ đó chính xác . Nhưng nếu không, (và tôi chưa bao giờ viết một trang HTML ở đó) thì thẻ đầu sẽ được suy ra ở đâu đó hợp lý và bạn có thể bỏ qua nó một cách an toàn. Tương tự như vậy đối với các thẻ html, head và body khác.
Alohci

3
@Justin Câu trả lời này dường như có một manh mối vì câu hỏi là "Có cần thiết phải viết các thẻ CHÍNH, CƠ THỂ và HTML không?" không hay không đó là một thực hành tốt. Các quy ước có xu hướng thay đổi ... chỉ cần xem qua google styleguide ... đó là một quy ước mà bạn nên bỏ qua các thẻ này ... :-)
Potherca

77

Hướng dẫn Google Style cho HTML khuyên bạn nên bỏ qua tất cả các thẻ tùy chọn.
Điều đó bao gồm <html>, <head>, <body>, <p><li>.

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

Để tối ưu hóa kích thước tệp và mục đích có thể quét được, hãy xem xét bỏ qua các thẻ tùy chọn. Đặc tả HTML5 xác định những thẻ nào có thể được bỏ qua.

(Cách tiếp cận này có thể yêu cầu một giai đoạn ân hạn được thiết lập như một hướng dẫn rộng hơn vì nó khác biệt đáng kể so với những gì các nhà phát triển web thường được dạy.

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

2
Ví dụ về tính không tương thích: công cụ tải lại trực tiếp mà tôi sử dụng để phát triển web (puer) sẽ tự động chèn một tập lệnh vào đầu. Không có thẻ <head> cuối cùng, nó không hoạt động.
Offifyo

@ Offerirmo Cái gì trên trái đất vậy?
Ken Sharp

Các công cụ phát triển web của @KenSharp hepeload thường hoạt động bằng cách chèn một số mã trong các trang được cung cấp, như thế : <script src="http://localhost:35729/livereload.js"></script>. Đối với các mẫu kỳ lạ, họ không hiểu nơi họ nên chèn mã của mình.
Offirmo

1
@ Offerirmo Tài liệu về hepeload nói rằng bạn nên tự thêm tập lệnh đó vào các trang khách hàng của mình. Có lẽ bạn đang sử dụng một thư viện ma thuật làm điều đó cho bạn. Đó nên là nguồn gốc của những khó khăn bạn đang gặp phải.
kequc

7
Bỏ qua tất cả các thẻ có thể là khôn ngoan và ngu ngốc. Tiết kiệm băng thông là một% rất nhỏ (đặc biệt là vì hầu hết các kết nối tự động nén), trong khi tỷ lệ lỗi của con người đối với các trường hợp cạnh là cao (xem xét các tác giả, biên tập viên và thậm chí là người viết trình phân tích cú pháp HTML). Cũng khó tìm lỗi hơn (vì sự thay đổi của entropy).
TextGeek

48

Trái ngược với ghi chú của @Liza Daly về HTML5, thông số đó thực sự khá cụ thể về những thẻ nào có thể được bỏ qua và khi nào (và các quy tắc hơi khác so với HTML 4.01, chủ yếu là để làm rõ các yếu tố mơ hồ như nhận xét và khoảng trắng thuộc về đâu)

Tài liệu tham khảo có liên quan là http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags và thông báo:

  • Thẻ bắt đầu của phần tử html có thể bị bỏ qua nếu điều đầu tiên bên trong phần tử html không phải là một nhận xét.

  • Thẻ kết thúc của phần tử html có thể bị bỏ qua nếu phần tử html không được nhận xét ngay lập tức.

  • Thẻ bắt đầu của phần tử head có thể được bỏ qua nếu phần tử trống hoặc nếu thứ đầu tiên bên trong phần tử head là một phần tử.

  • Thẻ kết thúc của phần tử đầu có thể được bỏ qua nếu phần tử đầu không được theo dõi ngay lập tức bằng ký tự khoảng trắng hoặc nhận xét.

  • Thẻ bắt đầu của phần tử cơ thể có thể được bỏ qua nếu phần tử trống hoặc nếu điều đầu tiên bên trong phần tử cơ thể không phải là ký tự khoảng trắng hoặc nhận xét, ngoại trừ nếu điều đầu tiên bên trong phần tử cơ thể là phần tử tập lệnh hoặc kiểu.

  • Thẻ kết thúc của phần tử cơ thể có thể được bỏ qua nếu phần tử cơ thể không được theo dõi ngay lập tức.

Vì vậy, ví dụ của bạn là HTML5 hợp lệ và sẽ được phân tích cú pháp như thế này, với các thẻ html, head và body ở các vị trí ngụ ý của chúng:

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

Lưu ý rằng nhận xét "tập lệnh này sẽ nằm trong đầu" thực sự được phân tích cú pháp như một phần của cơ thể, mặc dù chính tập lệnh là một phần của phần đầu. Theo thông số kỹ thuật, nếu bạn muốn điều đó khác biệt hoàn toàn, thì thẻ </HEAD><BODY>có thể không bị bỏ qua. (Mặc dù vẫn có thể tương ứng <HEAD></BODY>các thẻ)


15

Nó hợp lệ để bỏ qua chúng trong 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

Trong HTML5, không có chính xác các yếu tố "bắt buộc" hoặc "tùy chọn", vì cú pháp HTML5 được xác định một cách lỏng lẻo hơn. Ví dụ title:

Phần tử tiêu đề là một phần tử con bắt buộc trong hầu hết các tình huống, nhưng khi giao thức cấp cao hơn cung cấp thông tin tiêu đề, ví dụ như trong dòng Tiêu đề của e-mail khi HTML được sử dụng làm định dạng tác giả e-mail, phần tử tiêu đề có thể bị bỏ qua .

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

Không có giá trị để bỏ qua chúng trong XHTML5 thực, mặc dù điều đó gần như không bao giờ được sử dụng (so với XHTML-act-like-HTML5).

Tuy nhiên, từ quan điểm thực tế, bạn thường muốn các trình duyệt chạy ở "chế độ tiêu chuẩn" để có thể dự đoán trong việc hiển thị HTML và CSS. Việc cung cấp DOCTYPE và cây HTML có cấu trúc chặt chẽ hơn sẽ đảm bảo kết quả trình duyệt chéo dễ dự đoán hơn.


13
Đừng nhầm lẫn các yếu tố với các thẻ. Xem bình luận của cHao ở nơi khác trên trang này. Đối với html, headbody, các yếu tố là bắt buộc, nhưng các thẻ là tùy chọn.
Alohci

Thật ra bạn đã sai trong bit cuối cùng. Bỏ sót thẻ là một tính năng DTD SGML, tất cả các trình duyệt hỗ trợ phân tích SGML (đó là tất cả các trình duyệt) cũng hỗ trợ bỏ qua thẻ. Lý do tại sao bạn không thể làm điều đó trong XHTML5 là vì đó là XML chứ không phải SGML. XML quá ngu ngốc để suy ra các yếu tố.
OdraEncoding

@OdraEncoding Bạn có thể cung cấp xác minh cho tuyên bố của mình không? Tôi không thấy đó là trường hợp (xem Tiêu chuẩn HTML ).
Bàn chải đánh răng

@OdraEncoding - gần, nhưng không hoàn toàn đúng. Bỏ sót thẻ là một tính năng tùy chọn cho các trình phân tích cú pháp SGML (mặc dù hầu hết đều hỗ trợ nó), như được định nghĩa trong ISO 8879. Gần như tất cả các trình phân tích cú pháp HTML đều hỗ trợ nó, mặc dù 'html.parse' của Python không xuất hiện (xem stackoverflow.com/questions/29954170/ ).
TextGeek

14

Đúng là thông số kỹ thuật HTML cho phép bỏ qua một số thẻ nhất định trong một số trường hợp nhất định, nhưng nói chung làm như vậy là không khôn ngoan.

Nó có hai hiệu ứng - nó làm cho thông số kỹ thuật phức tạp hơn, do đó khiến các tác giả trình duyệt khó viết các triển khai chính xác hơn (như đã chứng minh bởi IE đã hiểu sai).

Điều này làm cho khả năng lỗi trình duyệt trong các phần này của thông số kỹ thuật cao. Là một tác giả trang web, bạn có thể tránh được vấn đề bằng cách bao gồm các thẻ này - vì vậy trong khi thông số kỹ thuật không nói bạn phải làm như vậy, làm như vậy sẽ giảm nguy cơ xảy ra sự cố, đó là thực hành kỹ thuật tốt.

Hơn nữa, thông số WG HTML 5.1 mới nhất hiện đang nói (hãy nhớ rằng đây là một công việc đang tiến triển và có thể sẽ thay đổi).

Thẻ bắt đầu của phần tử cơ thể có thể bị bỏ qua nếu phần tử trống hoặc nếu điều đầu tiên bên trong phần tử cơ thể không phải là ký tự khoảng trắng hoặc nhận xét, ngoại trừ nếu điều đầu tiên bên trong phần tử cơ thể là meta, liên kết, tập lệnh, kiểu hoặc phần tử mẫu.

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

Đây là một chút tinh tế. Bạn có thể bỏ qua phần thân và phần đầu, và trình duyệt sau đó sẽ suy ra vị trí các phần tử đó sẽ được chèn vào. Điều này có nguy cơ không rõ ràng, có thể gây nhầm lẫn.

Vậy đây

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

dẫn đến yếu tố kịch bản là con của yếu tố cơ thể, nhưng điều này

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

sẽ dẫn đến thẻ script là một phần tử con của phần tử head.

Bạn có thể rõ ràng bằng cách làm điều này

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

và sau đó, bất cứ khi nào bạn có đầu tiên, tập lệnh hoặc h1, cả hai sẽ xuất hiện trong phần tử cơ thể. Đây là những thứ dễ bị bỏ qua trong khi tái cấu trúc và gỡ lỗi mã. (ví dụ: bạn có JS đang tìm phần tử script thứ 1 trong phần thân - trong đoạn mã thứ hai, nó sẽ ngừng hoạt động).

Theo nguyên tắc chung, rõ ràng về mọi thứ luôn tốt hơn là để mọi thứ mở ra để giải thích. Về vấn đề này, XHTML tốt hơn bởi vì nó buộc bạn phải hoàn toàn rõ ràng về cấu trúc phần tử trong mã của bạn, điều này làm cho nó đơn giản hơn và do đó ít bị giải thích sai.

Vì vậy, có, bạn có thể bỏ qua chúng và có giá trị kỹ thuật, nhưng nói chung là không khôn ngoan để làm như vậy.


1
IE có những điều sai lầm bởi vì các tác giả không thể quan tâm ít hơn về các tiêu chuẩn. Đó là lỗi của họ nếu nó không hoạt động đúng. Các tiêu chuẩn được xác định để họ đảm bảo IE hoạt động với chúng.
Ken Sharp

3
@KenSharp Tôi không đồng ý, nhưng cho đến khi bạn có thể buộc tất cả khách hàng của mình không sử dụng thì chúng tôi vẫn bị mắc kẹt với nó. Vì vậy, tốt hơn để viết mã hoàn toàn không rõ ràng hơn là dựa vào mọi thứ hoạt động như bình thường.
Peter Bagnall

1
Người dùng đã buộc phải bỏ IE trong nhiều năm vì không tuân thủ. Không ai mong muốn người dùng tiếp tục sử dụng IE6, ngay cả khi mọi người vẫn đang cài đặt Windows XP. Chúng tôi không thể mong đợi hỗ trợ Windows 3.1 mãi mãi. Lỗi OSI cấp 8.
Ken Sharp

1
Chính xác những thẻ nào có thể được bỏ qua và chính xác ở đâu, cũng thay đổi theo phiên bản HTML. Đó cũng có vẻ là một lý do tốt để tránh chúng (ngoại trừ các trường hợp rõ ràng và phổ biến nhất và nhất quán).
TextGeek

@TextGeek <!DOCTYPE html>.
Det

-2

Fireorms cho thấy điều này một cách chính xác vì Trình duyệt của bạn tự động sửa lỗi đánh dấu xấu cho bạn. Hành vi này không được chỉ định ở bất cứ đâu và có thể (sẽ) thay đổi tùy theo trình duyệt. Những thẻ đó được yêu cầu bởi DOCTYPE bạn đang sử dụng và không nên bỏ qua.

Phần tử htmlphần tử gốc của mỗi trang html. Nếu bạn xem mô tả của tất cả các yếu tố khác, nó cho biết nơi một yếu tố có thể được sử dụng (và hầu như tất cả các yếu tố đều yêu cầu đầu hoặc thân).


Vì vậy, nó có thể không phải là trình duyệt chéo?
Larry Cinnabar

5
nói cách khác - thực hành xấu mang lại kết quả không xác định.
Randy

3
@Innuendo Chỉ vì một cái gì đó lớn không có nghĩa là nó được kết hợp tốt.
Demian Brecht

2
Như một lời kêu gọi đến chính quyền, tôi thấy điều đó không thuyết phục. google.com là HTML không hợp lệ là tốt. Không có nghĩa là của bạn nên được.
Rein Henrichs

17
Các yếu tố phải tồn tại. Không có gì nói các thẻ làm. Thực tế, HTML không có thẻ html / head / body là hợp lệ miễn là không có phần tử nào xuất hiện ở nơi không nên. ( <title>sau một <p></p>ví dụ.)
cHao
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.