Các phương pháp hay nhất để sắp xếp các phần tử trong <head> là gì?


90

có thể sử dụng bất cứ thứ gì theo thứ tự? việc đặt <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">trước có quan trọng không<title>

cái này được sử dụng nhiều nhất, có phải là cách tốt nhất không?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

trang web này http://stackoverflow.com không có bất kỳ mã hóa nào và<meta>

Tôi sử dụng CMS có thành phần SEO bổ sung mọi thứ <meta>cho SEO sau tất cả js và css. các tập tin. Việc đặt bất kỳ phần tử nào theo bất kỳ thứ tự nào được phép có <head>ảnh hưởng đến khả năng tương thích và mã hóa của tài liệu không?


Tất cả các bình luận đã đi đâu?
Pekka,

Trang web này (stackoverflow.com) có bộ mã hóa của nó (thành UTF-8), nó chỉ nằm trong tiêu đề HTTP nơi nó thuộc về. Xác định bộ ký tự trong thẻ meta là một cách giải quyết khó hiểu.
jpsimons

2
Đúng. Tốt hơn là xác định bộ ký tự trong tiêu đề HTTP, nhưng trong một số trường hợp, bạn không thể đặt chúng (chẳng hạn như tải tệp khỏi đĩa cục bộ của bạn), vì vậy <meta>thẻ là một giải pháp thay thế cho những trường hợp đó, nhưng không cần thiết.
Brian Campbell,

Có rất nhiều bình luận ở đây, ít nhất là chín hoặc mười. Họ không có gì đặc biệt nhưng cũng không có gì khó chịu ở họ. Tất cả họ đã đi đâu? Ai có quyền xóa bình luận và tại sao?
Pekka,

Tất cả chúng ta đều có quyền xóa bình luận của chính mình; một số người đã xóa của riêng họ? Tôi chưa bao giờ thấy các bình luận về câu hỏi này, vì tôi đang bận soạn câu trả lời của mình. Bạn có chắc là mình không nghĩ đến câu hỏi khác không?
Brian Campbell,

Câu trả lời:


111

Trong HTML, phần tử DOCTYPEphải đến trước, theo sau là một <html>phần tử, phần tử này phải chứa <head>phần tử chứa <title>phần tử, theo sau là <body>phần tử. Xem mô tả cấu trúc chung của tài liệu HTML trong HTML 4.01bản nháp HTML5 ; các yêu cầu thực tế hầu hết giống nhau DOCTYPE, nhưng chúng được mô tả khác nhau.

Các thẻ thực tế ( <html>, </html>, <head>, vv) là không bắt buộc; các phần tử sẽ được tạo tự động nếu các thẻ không tồn tại. <title>là thẻ bắt buộc duy nhất trong HTML. Tài liệu HTML 4.01 hợp lệ ngắn nhất (ít nhất mà tôi có thể tạo) là (cần một <p>vì cần phải có một cái gì đó trong tài liệu <body>để hợp lệ):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

Và tài liệu HTML5 hợp lệ ngắn nhất:

<!DOCTYPE html><title></title>

Lưu ý rằng trong XHTML, tất cả các thẻ phải được chỉ định rõ ràng; không có phần tử nào sẽ được chèn ngầm.

Trình duyệt thực hiện đánh giá loại nội dung trong một số trường hợp để xác định loại tài nguyên chưa được chỉ định bằng cách sử dụng Content-Typetiêu đề HTTP và cũng có thể đánh giá mã hóa ký tự nếu Content-Typetiêu đề không được cung cấp hoặc không bao gồm một charset(bạn thường nên thử để bao gồm các tiêu đề này và đảm bảo rằng chúng chính xác, nhưng có một số trường hợp bạn không thể, chẳng hạn như tệp cục bộ không được chuyển qua HTTP). Tuy nhiên, họ chỉ đánh hơi một số byte giới hạn ở đầu tài liệu cho những mục đích này, vì vậy bất kỳ thứ gì nhằm mục đích ảnh hưởng đến việc đánh hơi nội dung hoặc đánh hơi mã hóa ký tự phải ở gần phần đầu của tài liệu.

Vì lý do này, HTML5 chỉ định rằng bất kỳ metathẻ nào được sử dụng để chỉ định bộ ký tự (hoặc <meta http-equiv="Content-type" content="text/html; charset=...">hoặc đơn giản <meta charset=...>) phải nằm trong 1024 byte đầu tiên của tệp để có hiệu lực. Vì vậy, nếu bạn định bao gồm thông tin mã hóa ký tự trong tài liệu của mình, bạn nên đặt thẻ sớm vào tệp, thậm chí có thể trước <title>phần tử. Nhưng hãy nhớ rằng thẻ này là không cần thiết nếu bạn chỉ định đúng Content-typetiêu đề.

Trong CSS, các khai báo kiểu sau được ưu tiên hơn các khai báo trước đó , tất cả các khai báo khác đều bình đẳng. Vì vậy, bạn nên đặt các bảng định kiểu chung nhất có thể bị ghi đè trước đó và các bảng định kiểu cụ thể hơn sau đó.

Vì lý do hiệu suất, có thể là một ý kiến ​​hay nếu bạn đặt các tập lệnh ở cuối trang, ngay trước </body>vì việc tải các tập lệnh sẽ chặn việc hiển thị trang.

Rõ ràng, <script>các thẻ nên được sắp xếp theo thứ tự để các tập lệnh phụ thuộc vào từng thứ tự có các phần phụ thuộc được tải trước.

Nhìn chung, ngoài những ràng buộc mà tôi đã chỉ định, thứ tự của các thẻ bên trong <head>không quá quan trọng, ngoài việc dễ đọc. Tôi có xu hướng thích nhìn <title>về phía trên cùng và đặt các <meta>thẻ khác theo một số thứ tự hợp lý.

Hầu hết thời gian, thứ tự bạn nên đặt mọi thứ vào nội dung của tài liệu HTML phải là thứ tự chúng sẽ được hiển thị hoặc thứ tự chúng nên được truy cập. Bạn có thể sử dụng CSS để sắp xếp lại mọi thứ, nhưng trình đọc màn hình nói chung sẽ đọc mọi thứ theo thứ tự nguồn, các chỉ mục tìm kiếm sẽ trích xuất mọi thứ theo thứ tự nguồn, v.v.


5
TITLE đó là bắt buộc đối với tôi và có vẻ hơi lạ. Nhưng kiểm tra thông số kỹ thuật chính thức, tất nhiên bạn hoàn toàn chính xác. Sống và học hỏi!
Carl Smotricz,

Điều làm tôi ngạc nhiên là đó là thẻ bắt buộc duy nhất ... Tôi thực sự đã lập luận rằng nó cũng nên được làm tùy chọn trong HTML5 (vì nó không thực sự cần thiết cho những thứ như tiện ích sẽ luôn ở trong iframevà không bao giờ có tiêu đề hiển thị ), nhưng họ quyết định không thay đổi điều đó vào khoảng thời gian này.
Brian Campbell,

@Brian - cảm ơn brian vì lời giải thích tốt đẹp này. VẬY không bao giờ làm tôi thất vọng. trang web này có chủ mưu. và một điều nữa là U hiểu câu hỏi rất tốt và bạn đưa ra câu trả lời rất tốt. công việc tuyệt vời.
Jitendra Vyas

1
@Jitendra Ha ha! Tôi đã trả lời một loạt các câu hỏi gần đây của bạn, phải không? Tôi hơi say trong một bữa tiệc năm mới. Nhưng tôi có thể thử ... Tuy nhiên, tôi sẽ không đảm bảo rằng câu trả lời của tôi sẽ tốt như cặp đôi cuối cùng.
Brian Campbell

3
Cách tiếp cận hiện đại là đặt <script>các thẻ có thuộc tính asynchoặc defervào trong <head>. Xem stackoverflow.com/questions/436411/…
joshreesjones

31

Đây là mẫu tôi sử dụng, chỉ cần xóa bất cứ thứ gì bạn không cần cho một dự án mới.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>

6
X-UA-Tương thích phải được gắn thẻ đầu tiên do stackoverflow.com/questions/3449286/…
Denis

@Denis bạn có biết <html class="default"> nghĩa là gì không?
shaijut

3
@stom ý bạn là tại sao lại có thuộc tính class? Nó yêu cầu mã JavaScript bổ sung để loại bỏ lớp đó sau khi tải trang. Làm điều này - bạn sẽ biết JavaScript đã được bật trong trình duyệt. Nếu thuộc tính này vẫn tồn tại - điều này có nghĩa là JavaScrips bị vô hiệu hóa để bạn có thể hiển thị một số thông báo cho người dùng sử dụng CSS, nếu bạn cần
Denis

@Denis sử dụng <noscript> </noscript> để kiểm tra xem đã bật javascript chưa
TheCrazyProfessor

1
Bạn có thể nhận xét, xin vui lòng, về lý do của bạn cho đơn đặt hàng này?
2540625

7

Thêm một vài đề xuất về hiệu suất vào câu trả lời của Brian, về mặt logic, mức độ ưu tiên cao nhất phải là những thứ cần được tải xuống, để trình duyệt có thể bắt đầu tải chúng xuống càng sớm càng tốt và những thứ sẽ ảnh hưởng đến cách trình bày trang. Vì vậy, tôi đề nghị:

  • Các metas ảnh hưởng đến giao diện, chẳng hạn như bộ ký tự (cũng được yêu cầu sớm bởi thông số kỹ thuật), chế độ xem, apple-mobile-web-app-available
  • Tiêu đề gần đầu để trình duyệt có thể hiển thị nó càng sớm càng tốt và người dùng có cảm giác có điều gì đó đang xảy ra
  • Biểu tượng yêu thích và biểu tượng cảm ứng
  • CSS (ít nhất là CSS cho trong màn hình đầu tiên; các CSS khác có thể được tải ở chân trang nếu bạn muốn bắt mắt). Bước này thường chặn mọi thứ khác tiếp tục, đó là lý do tại sao tôi đặt các mục trước đó lên trên nó, vì chúng cung cấp một số phản hồi trong thời gian trễ CSS.
  • Các tập lệnh quan trọng (chẳng hạn như đánh giá tác nhân người dùng có thể ảnh hưởng đến bố cục) không thể tải ở chân trang
  • Mọi thứ khác (ví dụ: siêu dữ liệu cần thiết ở dạng liên kết và thẻ meta)

Bạn cũng có thể xem xét nội tuyến bất kỳ CSS và JS nào được tải trong đầu, đặc biệt nếu tệp / trang tính nhỏ và bên ngoài không có khả năng được lưu vào bộ nhớ đệm theo hồ sơ của khách truy cập thông thường của bạn. Và nếu bạn làm nội dòng, lý tưởng nhất là bạn sẽ muốn nén nó lại.

Điều cuối cùng: Người dùng phải đợi phần đầu - và bất kỳ tài nguyên chặn nào mà nó tải - vì vậy tốt nhất nên đặt càng nhiều càng tốt trong phần thân hoặc phần chân trang.


7

Theo W3 nên:

  • Bảng mã meta
  • Tiêu đề
  • Meta name = "descripition"
  • Meta name = "từ khóa"
  • Biểu định kiểu
  • Tệp JavaScript

Bài viết được liên kết đang chuyển hướng và nó dường như không nói gì về thứ tự.
2540625

Biểu định kiểu đang chặn hiển thị, thay vì tải js không đồng bộ trước CSS.
Null


5

Bạn muốn loại nội dung của mình trước vì nó biểu thị mã hóa ký tự, nếu không, nếu nó xuất hiện sau này, một số trình duyệt sẽ cố gắng đoán mã hóa. (Tôi không thể nhớ chi tiết cụ thể, nhưng tôi nghĩ IE sẽ đoán nếu nó không tìm thấy mã hóa trong 75 ký tự đầu tiên của tài liệu?)

Hầu hết các máy chủ web đều gửi mã hóa trong các tiêu đề HTTP, nhưng nếu người dùng lưu trang của bạn, các tiêu đề sẽ không được lưu cùng với nó.

Tôi sẽ đặt các tham chiếu CSS thứ hai để trình duyệt tải chúng xuống càng sớm càng tốt.

JavaScript mà tôi không đưa vào đầu, nó sẽ nằm ở cuối các trang của bạn vì việc tải xuống chúng sẽ chặn hiển thị các trang.


0

IIRC, một số trình duyệt sẽ tải lại tài liệu khi gặp một content-typephần tử. Vì vậy, phần tử đó có thể nên xuất hiện đầu tiên trong headphần tử của tài liệu.

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.