<Head> में तत्वों को ऑर्डर करने के लिए सर्वोत्तम अभ्यास क्या हैं?

90

किसी भी क्रम में कुछ भी उपयोग कर सकते हैं? <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>सभी js और css के बाद SEO के लिए हर एक को जोड़ता है । फ़ाइलें। <head>दस्तावेज़ संगतता और एन्कोडिंग को प्रभावित करने की अनुमति देने वाले किसी भी क्रम में किसी भी तत्व को रखने से क्या हो सकता है ?

html  css  xhtml  w3c 
— जितेन्द्र व्यास
स्रोत
सभी टिप्पणियां कहां गईं?
— पक्के डेका
इस साइट (stackoverflow.com) में इसका एन्कोडिंग सेट (UTF-8) है, यह सिर्फ HTTP हेडर में है जहाँ यह है। मेटा टैग में चारसेट को परिभाषित करना एक तरह का हैकी वर्कअराउंड है।
— jpsimons
2
सही। HTTP हेडर में चारसेट को परिभाषित करना बेहतर है, लेकिन कुछ स्थितियों में आप उन्हें सेट नहीं कर सकते हैं (जैसे कि आपकी स्थानीय डिस्क से फ़ाइलें लोड करना), इसलिए <meta>टैग उन मामलों के लिए एक समाधान है, लेकिन आवश्यक नहीं है।
— ब्रायन कैंपबेल
यहाँ टिप्पणियों का एक समूह था, कम से कम नौ या दस। वे कुछ खास नहीं थे लेकिन उनमें कुछ भी आक्रामक नहीं था। वे सब कहां चले गए? टिप्पणियों को हटाने की शक्ति किसके पास है और क्यों है?
— पक्के डेका
हम सभी के पास अपनी टिप्पणियों को हटाने की शक्ति है; क्या कुछ लोगों ने अपने खुद को हटा दिया? इस सवाल पर मैंने कभी टिप्पणी नहीं देखी, क्योंकि मैं अपना जवाब लिखने में व्यस्त था। क्या आप वाकई एक और प्रश्न के बारे में नहीं सोच रहे हैं?
— ब्रायन कैंपबेल

जवाबों:

111

HTML में, DOCTYPEपहले आना चाहिए, उसके बाद एक <html>तत्व होना चाहिए, जिसमें एक <head>तत्व शामिल होना चाहिए <title>, उसके बाद एक तत्व होना चाहिए <body>। HTML 4.01 और HTML5 ड्राफ्ट में HTML डॉक्यूमेंट की वैश्विक संरचना का विवरण देखें ; वास्तविक आवश्यकताएं अधिकतर अन्य की तुलना में समान होती हैं 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-TypeHTTP हैडर का उपयोग करके निर्दिष्ट नहीं किए गए संसाधन के प्रकार को निर्धारित करने के लिए कुछ प्रकार के सूँघने का प्रदर्शन करते हैं , और यदि Content-Typeहेडर की आपूर्ति नहीं की गई है या कोई प्रकार शामिल नहीं करता है, तो इसे सूँघने के लिए वर्ण एन्कोडिंग भी शामिल हैcharset (आपको आम तौर पर प्रयास करना चाहिए इन हेडर को शामिल करने के लिए, और सुनिश्चित करें कि वे सही हैं, लेकिन कुछ परिस्थितियां हैं जिनमें आप नहीं कर सकते हैं, जैसे कि स्थानीय फाइलें HTTP से स्थानांतरित नहीं होती हैं)। वे इन उद्देश्यों के लिए दस्तावेज़ की शुरुआत में सीमित संख्या में बाइट्स को सूँघते हैं, हालाँकि, ऐसा कुछ भी जो सूँघने या चरित्र एन्कोडिंग को प्रभावित करने के उद्देश्य से सूँघ रहा है, दस्तावेज़ की शुरुआत के पास होना चाहिए।

इस कारण से, HTML5 निर्दिष्ट करता है कि metaवर्ण सेट को निर्दिष्ट करने के लिए उपयोग किया जाने वाला कोई भी टैग (या तो <meta http-equiv="Content-type" content="text/html; charset=...">बस <meta charset=...>) प्रभावी होने के लिए फ़ाइल के पहले 1024 बाइट्स के भीतर होना चाहिए। इसलिए, यदि आप अपने दस्तावेज़ में वर्ण एन्कोडिंग जानकारी शामिल करने जा रहे हैं, तो आपको टैग को फ़ाइल में जल्दी से डाल देना चाहिए, संभवतः <title>तत्व से पहले भी । लेकिन याद रखें कि यह टैग अनावश्यक है यदि आप ठीक से Content-typeहेडर निर्दिष्ट करते हैं ।

सीएसएस में, बाद में शैली की घोषणाएं पहले वाले से अधिक हो जाती हैं , बाकी सभी समान हैं। तो, आपको आम तौर पर सबसे सामान्य शैली की चादरें डालनी चाहिए जो पहले ओवरराइड हो सकती हैं, और बाद में अधिक विशिष्ट स्टाइल शीट।

प्रदर्शन के कारणों के लिए, पेज के निचले भाग में स्क्रिप्ट डालना सही हो सकता है </body>, इससे ठीक पहले , क्योंकि लोडिंग स्क्रिप्ट पेज के रेंडरिंग को ब्लॉक कर देती है।

जाहिर है, <script>टैग का आदेश दिया जाना चाहिए ताकि स्क्रिप्ट जो प्रत्येक आदेश पर निर्भर करती हैं, पहले निर्भरताएं भरी हुई हैं।

कुल मिलाकर, मैं पहले से निर्दिष्ट बाधाओं के <head>अलावा, पठनीयता के अलावा अन्य टैग का क्रम बहुत ज्यादा मायने नहीं रखता। मैं <title>ऊपर की ओर देखना पसंद करता हूं , और अन्य <meta>टैग्स को किसी प्रकार के तार्किक क्रम में रखता हूं ।

अधिकांश समय, आपको HTML दस्तावेज़ के मुख्य भाग में जो आदेश देना चाहिए, वह वह क्रम होना चाहिए, जिसमें वे प्रदर्शित होने चाहिए या उन्हें जिस क्रम तक पहुँचा जाना चाहिए। आप चीजों को पुनर्व्यवस्थित करने के लिए CSS का उपयोग कर सकते हैं, लेकिन स्क्रीन रीडर आमतौर पर स्रोत क्रम में चीजों को पढ़ेंगे, खोज अनुक्रमित स्रोत क्रम में चीजों को निकालेंगे, और इसी तरह।

— ब्रायन कैंपबेल
स्रोत
5
यह TITLE अनिवार्य है मेरे लिए समाचार था और थोड़ा अजीब लगता है। लेकिन आधिकारिक युक्ति की जाँच करना आप बिल्कुल सही हैं। जियो और सीखो!
— कार्ल स्मोत्रिकज़
मुझे जो आश्चर्य हुआ वह यह है कि यह एकमात्र अनिवार्य टैग है ... मैंने वास्तव में तर्क दिया है कि इसे HTML5 में भी वैकल्पिक बनाया जाना चाहिए (क्योंकि यह वास्तव में गैजेट जैसी चीजों के लिए आवश्यक नहीं है जो हमेशा एक में होगा iframeऔर एक दृश्यमान शीर्षक कभी नहीं होगा। ), लेकिन उन्होंने इस बार नहीं बदलने का फैसला किया।
— ब्रायन कैंपबेल
@ ब्रायन - इस अच्छी व्याख्या के लिए धन्यवाद ब्रायन। एसओ ने मुझे कभी निराश नहीं किया। इस साइट में मास्टरमाइंड हैं। और एक और बात यू को बहुत अच्छी तरह से समझ में आती है तो यू जवाब बहुत अच्छी तरह से देता है। अच्छा कार्य।
— जितेंद्र व्यास
1
@ जितेंद्र हा हा! मैंने आपके हाल के सवालों का एक गुच्छा जवाब दिया है, क्या मैंने नहीं? मैं नए साल की पार्टी से थोड़ा नशे में हूं। लेकिन मैं कोशिश कर सकता हूं ... मैं अभी गारंटी नहीं दूंगा कि मेरा जवाब आखिरी जोड़े के रूप में अच्छा होगा, हालांकि।
— ब्रायन कैंपबेल
3
आधुनिक दृष्टिकोण <script>एक asyncया deferविशेषता के साथ टैग लगाने के लिए है <head>। देखें stackoverflow.com/questions/436411/…
— joshreesjones
31

यह वह टेम्पलेट है जिसका मैं उपयोग करता हूं, बस एक नई परियोजना के लिए आपको जो कुछ भी आवश्यक नहीं है उसे हटा दें।

<!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- संगत को पहले टैग होना चाहिए, जिसका कारण stackoverflow.com/questions/3449286/… है
— डेनिस
@ क्या आप जानते हैं कि क्या <html class="default"> मतलब है?
— शैजुट
3
@stom का मतलब है कि वर्ग की विशेषता क्यों है? पेज लोड होने के बाद उस वर्ग को हटाने के लिए अतिरिक्त जावास्क्रिप्ट कोड की आवश्यकता होती है। ऐसा करना - आपको पता होगा कि जावास्क्रिप्ट ब्राउज़र में सक्षम है। यदि यह विशेषता अभी भी मौजूद है - इसका मतलब है कि JavaScrips अक्षम है, तो आप सीएसएस का उपयोग कर उपयोगकर्ता को कुछ संदेश दिखा सकते हैं, यदि आपको आवश्यकता है
— डेनिस
@Disis जावास्क्रिप्ट सक्षम करने के लिए जाँच करने के लिए <noscript> </ noscript> का उपयोग करें
— TheCrazyProfector
1
क्या आप इस आदेश के लिए कृपया अपने तर्क पर टिप्पणी कर सकते हैं?
— 2540625
7

ब्रायन के जवाब में कुछ प्रदर्शन सुझावों को जोड़ते हुए, सर्वोच्च प्राथमिकता तार्किक रूप से ऐसी चीजें होनी चाहिए जिन्हें डाउनलोड करने की आवश्यकता होगी, इसलिए ब्राउज़र उन्हें asap डाउनलोड करना शुरू कर सकता है, और ऐसी चीजें जो पृष्ठ को प्रस्तुत करने के तरीके को प्रभावित करेगी। तो मैं सुझाव देता हूं:

  • उपस्थिति को प्रभावित करने वाले मेटास, जैसे चारसेट (युक्ति द्वारा शीघ्रता से आवश्यक), व्यूपोर्ट, ऐप्पल-मोबाइल-वेब-ऐप-सक्षम
  • शीर्ष के पास का शीर्षक इसलिए ब्राउज़र इसे asap प्रस्तुत कर सकता है और उपयोगकर्ता को यह समझ में आता है कि कुछ हो रहा है
  • फ़ेविकॉन और टच आइकन
  • सीएसएस (कम से कम सीएसएस ऊपर-से-गुना के लिए; अन्य सीएसएस को पाद में लोड किया जा सकता है यदि आप फैंसी प्राप्त करना चाहते हैं)। यह कदम आम तौर पर आगे बढ़ने से बाकी सब को रोकता है, यही कारण है कि मैंने पिछली वस्तुओं को इसके ऊपर रखा, क्योंकि वे सीएसएस विलंब के दौरान कुछ प्रतिक्रिया प्रदान करते हैं।
  • महत्वपूर्ण स्क्रिप्ट (जैसे कि उपयोगकर्ता-एजेंट सूँघना जो लेआउट को प्रभावित कर सकते हैं) जिसे पाद लेख में लोड नहीं किया जा सकता है
  • बाकी सब कुछ (जैसे लिंक और मेटा टैग के रूप में आवश्यक मेटाडेटा)

आप सीएसएस और जेएस को सिर में लोड करने पर भी विचार कर सकते हैं, खासकर अगर इसकी छोटी और बाहरी स्क्रिप्ट / शीट आपके विशिष्ट आगंतुक की प्रोफ़ाइल के अनुसार कैश होने की संभावना नहीं है। और अगर आप इसे इनलाइन करते हैं, तो आप आदर्श रूप से इसे कंप्रेस करना चाहेंगे।

अंतिम चीज: उपयोगकर्ता को सिर के लिए इंतजार करना पड़ता है - और किसी भी अवरुद्ध संसाधनों को यह लोड करता है - इसलिए यह शरीर या पाद में जितना संभव हो सके उतना अच्छा है।

— mahemoff
स्रोत
7

W3 के अनुसार होना चाहिए:

  • मेटा चारसेट
  • शीर्षक
  • मेटा नाम = "विवरण"
  • मेटा नाम = "कीवर्ड"
  • शैली पत्रक
  • जावास्क्रिप्ट फ़ाइलें
— आंद्रे ब्रावो फरेरा
स्रोत
लिंक किया गया लेख पुनर्निर्देशित है, और यह आदेश के बारे में कुछ भी नहीं कहता है।
— 2540625
स्टाइल्सशीट्स रेंडर-ब्लॉकिंग हैं, बल्कि CSS से पहले js async लोड करें।
— Null
6

अधिकांश ब्राउज़रों को इस बात से कोई फर्क नहीं पड़ता कि आप अपने तत्वों को किस तरह से ऑर्डर करते हैं, लेकिन आपको हमेशा charsetपहले निर्दिष्ट करना चाहिए ।

के लिए IE7 + सर्वश्रेष्ठ अभ्यास की आवश्यकता होती है कि charset, X-UA-Compatible, और baseघोषणाओं में कुछ और से पहले होने head, अन्यथा ब्राउज़र से आरंभ होकर फिर से पार्स करता है सब कुछ है कि पहले आया था।

— jayrobinson
स्रोत
5

आप अपनी सामग्री-प्रकार पहले चाहते हैं क्योंकि यह वर्ण एन्कोडिंग को दर्शाता है, अन्यथा यदि यह बाद में आता है, तो कुछ ब्राउज़र एन्कोडिंग का अनुमान लगाने का प्रयास करते हैं। (मैं बारीकियों को याद नहीं कर सकता, लेकिन मुझे लगता है कि IE यह अनुमान लगाएगा कि क्या यह दस्तावेज़ के पहले 75 वर्णों में एन्कोडिंग नहीं ढूंढता है?)

अधिकांश वेबसर्वर HTTP हेडर में एन्कोडिंग भेजते हैं, लेकिन यदि कोई उपयोगकर्ता आपके पृष्ठ को सहेजता है, तो हेडर इसके साथ सहेजे नहीं जाते हैं।

मैं CSS संदर्भों को दूसरे स्थान पर रखूंगा ताकि ब्राउज़र उन्हें जल्द से जल्द डाउनलोड करे।

जावास्क्रिप्ट मैं सिर में नहीं डालूँगा, यह आपके पृष्ठों के नीचे जाना चाहिए क्योंकि उन्हें डाउनलोड करने से पृष्ठों के रेंडरिंग ब्लॉक होते हैं।

— रेयान डोहर्टी
स्रोत
0

IIRC, कुछ ब्राउज़र किसी content-typeतत्व से मुठभेड़ करने पर दस्तावेज़ को फिर से लोड करेंगे । तो वह तत्व संभवतः headदस्तावेज़ के तत्व के भीतर पहले आना चाहिए ।

— डेविड आर ट्रिब्बल
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.