แนวทางปฏิบัติที่ดีที่สุดในการจัดลำดับองค์ประกอบใน <head> คืออะไร


91

สามารถใช้อะไรก็ได้ตามลำดับ? การวาง<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">มีความสำคัญมาก่อนหรือไม่<title>

ใช้มากที่สุดเป็นวิธีที่ดีที่สุดหรือไม่?

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

ไซต์นี้http://stackoverflow.comไม่มีการเข้ารหัสใด ๆ และ<meta>

ฉันใช้ CMS ที่มีส่วนประกอบ SEO ซึ่งจะเพิ่มทุกๆส่วน<meta>สำหรับ SEO หลังจาก js และ css ทั้งหมด ไฟล์. สามารถวางองค์ประกอบใด ๆ ในลำดับใดก็ได้ที่อนุญาตให้<head>มีผลต่อความเข้ากันได้ของเอกสารและการเข้ารหัสหรือไม่?


ความคิดเห็นทั้งหมดหายไปไหน
Pekka

ไซต์นี้ (stackoverflow.com) มีชุดการเข้ารหัส (เป็น UTF-8) อยู่ในส่วนหัว HTTP ที่เป็นของ การกำหนดชุดอักขระในเมตาแท็กเป็นวิธีแก้ปัญหาแบบแฮ็ก
jpsimons

2
ขวา. ควรกำหนดชุดอักขระในส่วนหัว HTTP แต่ในบางสถานการณ์คุณไม่สามารถตั้งค่าได้ (เช่นการโหลดไฟล์จากดิสก์ในเครื่อง) ดังนั้น<meta>แท็กจึงเป็นวิธีแก้ปัญหาสำหรับกรณีเหล่านั้น แต่ไม่จำเป็น
Brian Campbell

มีความคิดเห็นมากมายที่นี่อย่างน้อยเก้าหรือสิบ พวกเขาไม่มีอะไรพิเศษ แต่ก็ไม่มีอะไรน่ารังเกียจในพวกเขาเช่นกัน พวกเขาไปไหนกันหมด? ใครมีอำนาจในการลบความคิดเห็นและทำไม?
Pekka

เราทุกคนมีอำนาจที่จะลบความคิดเห็นของตัวเอง บางคนลบของตัวเองหรือเปล่า ฉันไม่เคยเห็นความคิดเห็นเกี่ยวกับคำถามนี้เลยเพราะฉันยุ่งอยู่กับการเขียนคำตอบ แน่ใจหรือว่าคุณไม่ได้คิดถึงคำถามอื่น
Brian Campbell

คำตอบ:


111

ใน HTML สิ่งที่DOCTYPEต้องมาก่อนตามด้วย<html>องค์ประกอบเดียวซึ่งจะต้องมี<head>องค์ประกอบที่มี<title>องค์ประกอบตามด้วย<body>องค์ประกอบ ดูรายละเอียดของโครงสร้างระดับโลกของเอกสาร HTML ในHTML 4.01และร่าง HTML5 ; ข้อกำหนดที่แท้จริงส่วนใหญ่จะเหมือนกันนอกเหนือจากข้อกำหนดDOCTYPEแต่อธิบายไว้แตกต่างกัน

แท็กที่เกิดขึ้นจริง ( <html>, </html>, <head>ฯลฯ ) เป็นตัวเลือก; องค์ประกอบจะถูกสร้างขึ้นโดยอัตโนมัติหากไม่มีแท็ก <title>เป็นแท็กเดียวที่จำเป็นใน HTML เอกสาร HTML 4.01 ที่สั้นที่สุดที่ถูกต้อง (อย่างน้อยที่สุดที่ฉันสามารถสร้างได้) คือ (ต้องมี<p>เพราะต้องมีบางอย่างในเอกสาร<body>จึงจะถูกต้อง):

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

และเอกสาร HTML5 ที่สั้นที่สุดที่ถูกต้อง:

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

โปรดทราบว่าใน XHTML ต้องระบุแท็กทั้งหมดอย่างชัดเจน จะไม่มีการแทรกองค์ประกอบโดยปริยาย

เบราว์เซอร์ทำการดมกลิ่นประเภทเนื้อหาในบางสถานการณ์เพื่อกำหนดประเภทของทรัพยากรที่ไม่ได้ระบุโดยใช้Content-Typeส่วนหัว HTTP และยังมีการเข้ารหัสอักขระการดมกลิ่นหากContent-Typeไม่ได้ระบุส่วนหัวหรือไม่รวม a charset(โดยทั่วไปคุณควรลอง เพื่อรวมส่วนหัวเหล่านี้และตรวจสอบให้แน่ใจว่าถูกต้อง แต่มีบางสถานการณ์ที่คุณไม่สามารถทำได้เช่นไฟล์ในเครื่องไม่ได้โอนผ่าน HTTP) พวกเขาดมเพียงจำนวนไบต์ที่ จำกัด ที่จุดเริ่มต้นของเอกสารเพื่อจุดประสงค์เหล่านี้ดังนั้นสิ่งใดก็ตามที่มีวัตถุประสงค์เพื่อส่งผลกระทบต่อการดมเนื้อหาหรือการเข้ารหัสอักขระควรอยู่ใกล้จุดเริ่มต้นของเอกสาร

ด้วยเหตุนี้HTML5 จึงระบุว่าmetaแท็กใด ๆที่ใช้ระบุชุดอักขระ (อย่างใดอย่างหนึ่ง<meta http-equiv="Content-type" content="text/html; charset=...">หรือเพียงอย่างเดียว<meta charset=...>) ต้องอยู่ภายใน 1024 ไบต์แรกของไฟล์เพื่อให้มีผล ดังนั้นหากคุณจะรวมข้อมูลการเข้ารหัสอักขระไว้ในเอกสารของคุณคุณควรใส่แท็กไว้ในตอนต้นของไฟล์ซึ่งอาจจะอยู่ก่อน<title>องค์ประกอบด้วยซ้ำ แต่จำไว้ว่าแท็กนี้ไม่จำเป็นหากคุณระบุContent-typeส่วนหัวอย่างถูกต้อง

ใน CSS การประกาศรูปแบบในภายหลังจะมีความสำคัญเหนือกว่ารูปแบบก่อนหน้านี้ทั้งหมดเท่ากัน ดังนั้นโดยทั่วไปคุณควรใส่สไตล์ชีตทั่วไปส่วนใหญ่ที่อาจถูกแทนที่ก่อนหน้านี้และสไตล์ชีตที่เฉพาะเจาะจงมากขึ้นในภายหลัง

ด้วยเหตุผลด้านประสิทธิภาพคุณควรวางสคริปต์ไว้ที่ด้านล่างของหน้าก่อนหน้า</body>นี้เนื่องจากสคริปต์การโหลดจะบล็อกการแสดงผลของหน้า

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

โดยรวมแล้วนอกเหนือจากข้อ จำกัด ที่ฉันได้ระบุไว้แล้วการเรียงลำดับแท็กภายใน<head>ไม่ควรมีความสำคัญมากเกินไปนอกเหนือจากความสามารถในการอ่าน ฉันมักจะชอบมอง<title>ไปทางด้านบนและวาง<meta>แท็กอื่น ๆ ตามลำดับตรรกะ

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


5
TITLE บังคับว่าเป็นข่าวสำหรับฉันและดูเหมือนจะแปลกเล็กน้อย แต่การตรวจสอบข้อมูลจำเพาะอย่างเป็นทางการคุณถูกต้องแน่นอน อยู่และเรียนรู้!
Carl Smotricz

สิ่งที่ทำให้ฉันประหลาดใจก็คือมันเป็นแท็กบังคับเท่านั้น ... ฉันเคยโต้แย้งว่าควรทำเป็นตัวเลือกเช่นกันใน HTML5 (เนื่องจากไม่จำเป็นจริงๆสำหรับสิ่งต่างๆเช่นแกดเจ็ตที่มักจะอยู่ในชื่อiframeและไม่เคยมีชื่อที่มองเห็นได้ ) แต่พวกเขาตัดสินใจที่จะไม่เปลี่ยนแปลงในครั้งนี้
Brian Campbell

@ ไบรอัน - ขอบคุณ brian สำหรับคำอธิบายที่ดีนี้ ดังนั้นไม่เคยทำให้ฉันผิดหวัง ไซต์นี้มีผู้บงการ และอีกสิ่งหนึ่งที่คุณเข้าใจคำถามเป็นอย่างดีจากนั้นคุณก็ให้คำตอบเป็นอย่างดี การทำงานที่ดี.
Jitendra Vyas

1
@Jitendra ฮา! ฉันตอบคำถามล่าสุดของคุณไปหลายคำถามแล้วใช่หรือไม่? ฉันเมานิดหน่อยจากงานเลี้ยงปีใหม่ แต่ฉันพยายามได้ ... ฉันจะไม่รับประกันว่าคำตอบของฉันจะดีเท่าคู่สุดท้าย
Brian Campbell

3
วิธีการที่ทันสมัยคือการวาง<script>แท็กที่มีasyncหรือแอตทริบิวต์ในdefer <head>ดูstackoverflow.com/questions/436411/…
joshreesjones

32

นี่คือเทมเพลตที่ฉันใช้เพียงแค่ลบสิ่งที่คุณไม่ต้องการสำหรับโครงการใหม่

<!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-Compatible ต้องเป็นแท็กแรกในส่วนหัวเนื่องจากstackoverflow.com/questions/3449286/…
เดนิส

@ เดนิสคุณรู้ไหมว่าอะไรคือความ<html class="default"> หมาย?
Shaiju T

3
@stom คุณหมายความว่าทำไมมี class attribute? ต้องใช้โค้ด JavaScript เพิ่มเติมเพื่อลบคลาสนั้นเมื่อโหลดหน้า การทำเช่นนี้คุณจะรู้ว่า JavaScript ถูกเปิดใช้งานในเบราว์เซอร์ หากแอตทริบิวต์นี้ยังคงมีอยู่ - หมายความว่า JavaScrips ถูกปิดใช้งานดังนั้นคุณจึงสามารถแสดงข้อความถึงผู้ใช้โดยใช้ CSS ได้หากต้องการ
Denis

1
@Denis ใช้ <noscript> </noscript> เพื่อตรวจสอบการเปิดใช้งานจาวาสคริปต์
TheCrazyProfessor

1
คุณช่วยแสดงความคิดเห็นเกี่ยวกับเหตุผลของคำสั่งซื้อนี้ได้ไหม
2540625

7

การเพิ่มคำแนะนำด้านประสิทธิภาพบางอย่างให้กับคำตอบของ Brian ลำดับความสำคัญสูงสุดควรเป็นสิ่งที่ต้องดาวน์โหลดอย่างมีเหตุผลดังนั้นเบราว์เซอร์จึงสามารถเริ่มดาวน์โหลดได้โดยเร็วและสิ่งที่จะส่งผลต่อวิธีการนำเสนอหน้า ดังนั้นฉันขอแนะนำ:

  • Metas ที่มีผลต่อลักษณะที่ปรากฏเช่นชุดอักขระ (จำเป็นต้องมีในช่วงต้นของข้อมูลจำเพาะด้วย), วิวพอร์ต, แอปที่รองรับแอปเปิ้ลมือถือ - เว็บ
  • ชื่อเรื่องใกล้ด้านบนเพื่อให้เบราว์เซอร์สามารถแสดงผลได้โดยเร็วและผู้ใช้รู้สึกว่ามีบางอย่างเกิดขึ้น
  • ไอคอน Favicon และไอคอนสัมผัส
  • CSS (อย่างน้อย CSS สำหรับครึ่งหน้าบน; CSS อื่น ๆ สามารถโหลดในส่วนท้ายได้หากคุณต้องการจินตนาการ) โดยทั่วไปขั้นตอนนี้จะบล็อกทุกอย่างไม่ให้ดำเนินการต่อซึ่งเป็นสาเหตุที่ฉันวางรายการก่อนหน้าไว้ข้างบนเนื่องจากจะให้ข้อเสนอแนะบางอย่างในช่วงที่ CSS ล่าช้า
  • สคริปต์ที่สำคัญ (เช่นการดมกลิ่นของตัวแทนผู้ใช้ที่อาจส่งผลต่อโครงร่าง) ซึ่งไม่สามารถโหลดในส่วนท้ายได้
  • อย่างอื่น (เช่นข้อมูลเมตาที่จำเป็นในรูปแบบของลิงก์และเมตาแท็ก)

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

สิ่งสุดท้าย: ผู้ใช้ต้องรอคอยหัว - และทรัพยากรการบล็อกใด ๆ ที่โหลด - ดังนั้นจึงควรใส่เนื้อหาหรือส่วนท้ายให้มากที่สุด


7

ตามW3ควรเป็น:

  • ชุดอักขระเมตา
  • หัวข้อ
  • ชื่อเมตา = "descripition"
  • ชื่อเมตา = "คำหลัก"
  • สไตล์ชีต
  • ไฟล์ JavaScript

บทความที่เชื่อมโยงกำลังเปลี่ยนเส้นทางและดูเหมือนจะไม่ได้พูดอะไรเกี่ยวกับคำสั่งซื้อ
2540625

สไตล์ชีตเป็นการปิดกั้นการแสดงผลแทนที่จะโหลด js async ก่อน CSS
Null

6

เบราว์เซอร์ส่วนใหญ่ไม่สนใจว่าคุณจะเรียงลำดับองค์ประกอบอย่างไร แต่คุณควรระบุcharsetก่อนเสมอ

การปฏิบัติที่ดีที่สุดสำหรับ IE7 + ต้องว่าcharset, X-UA-Compatibleและbaseการประกาศเกิดขึ้นก่อนสิ่งอื่นใดในheadมิฉะนั้นเบราว์เซอร์เริ่มต้นมากกว่าและจะแยกวิเคราะห์อีกครั้งทุกอย่างที่มาก่อน


5

คุณต้องการประเภทเนื้อหาของคุณก่อนเนื่องจากสิ่งนี้หมายถึงการเข้ารหัสอักขระมิฉะนั้นหากมาในภายหลังเบราว์เซอร์บางตัวจะพยายามเดาการเข้ารหัส (ฉันจำข้อมูลจำเพาะไม่ได้ แต่ฉันคิดว่า IE จะเดาว่าไม่พบการเข้ารหัสใน 75 อักขระแรกของเอกสารหรือไม่)

เว็บเซิร์ฟเวอร์ส่วนใหญ่ส่งการเข้ารหัสในส่วนหัว HTTP แต่ถ้าผู้ใช้บันทึกหน้าของคุณส่วนหัวจะไม่ถูกบันทึกด้วย

ฉันจะใส่การอ้างอิง CSS เป็นอันดับสองเพื่อให้เบราว์เซอร์ดาวน์โหลดโดยเร็วที่สุด

JavaScript ที่ฉันจะไม่ใส่ไว้ในส่วนหัวควรอยู่ที่ด้านล่างของหน้าเว็บเนื่องจากการดาวน์โหลดจะบล็อกการแสดงผลหน้า


0

IIRC เบราว์เซอร์บางตัวจะโหลดเอกสารซ้ำเมื่อพบcontent-typeองค์ประกอบ ดังนั้นองค์ประกอบนั้นควรมาก่อนในheadองค์ประกอบของเอกสาร

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.