<হেড> এ উপাদানগুলি অর্ডার করার জন্য সেরা অনুশীলনগুলি কী কী?

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>

আমি একটি সিএমএস ব্যবহার করি যার এসইও উপাদান রয়েছে যা এসইওর <meta>জন্য সমস্ত জেএস এবং সিএসএসের পরে যুক্ত করে । নথি পত্র. <head>ডকুমেন্টের সামঞ্জস্যতা এবং এনকোডিংকে প্রভাবিত করার অনুমতিপ্রাপ্ত কোনও ক্রমে কোনও উপাদান রেখে দেওয়া যাবে ?

html  css  xhtml  w3c 
— জিতেন্দ্র ব্যাস
সূত্র
সব মন্তব্য কোথায় গেল?
— পেক্কা
এই সাইটের (স্ট্যাকওভারফ্লো ডটকম) এর এনকোডিং সেট রয়েছে (ইউটিএফ -8 এ), এটি ঠিক যেখানে এটির অন্তর্ভুক্ত HTTP শিরোনামে রয়েছে। মেটা ট্যাগে চরসেটটি সংজ্ঞায়িত করা হ্যাকি ওয়ার্কারআউন্ডের মতো।
— jpsimons
4
ঠিক আছে। এইচটিটিপি শিরোনামে চরসেটটি সংজ্ঞায়িত করা ভাল, তবে কিছু পরিস্থিতিতে আপনি সেগুলি সেট করতে পারবেন না (যেমন আপনার স্থানীয় ডিস্ক থেকে ফাইলগুলি লোড করা), তাই <meta>ট্যাগগুলি এই ক্ষেত্রে কার্যকর নয় তবে প্রয়োজনীয় নয়।
— ব্রায়ান ক্যাম্পবেল
ঠিক এখানেই বেশ কিছু মন্তব্য ছিল, কমপক্ষে নয় বা দশটি। এগুলি বিশেষ কিছু ছিল না তবে তাদের মধ্যে কোনও আপত্তিকর কিছুই ছিল না। তারা সবাই কোথায় গেল? মন্তব্য মুছে ফেলার ক্ষমতা কার আছে এবং কেন?
— পেক্কা
আমাদের সকলের নিজস্ব মন্তব্য মুছে ফেলার ক্ষমতা আছে; কিছু লোক তাদের নিজস্ব মুছে ফেলা হয়েছে? আমি আমার উত্তর রচনায় ব্যস্ত থাকায় এই প্রশ্নের মন্তব্য আমি কখনই দেখিনি। আপনি কি নিশ্চিত যে আপনি অন্য প্রশ্নের কথা ভাবছেন না?
— ব্রায়ান ক্যাম্পবেল

উত্তর:

111

এইচটিএমএলে, DOCTYPEঅবশ্যই প্রথমে আসবে, তার পরে একটি একক <html>উপাদান থাকবে, যার মধ্যে একটি <head>উপাদান যুক্ত উপাদান থাকতে হবে এবং <title>তারপরে একটি <body>উপাদান থাকবে। এইচটিএমএল 4.01 এবং এইচটিএমএল 5 খসড়াতে একটি HTML ডকুমেন্টের বৈশ্বিক কাঠামোর বিবরণ দেখুন ; আসল প্রয়োজনীয়তাগুলি বেশিরভাগই বাদে একই রকম DOCTYPE, তবে সেগুলি আলাদাভাবে বর্ণনা করা হয়।

প্রকৃত ট্যাগ ( <html>, </html>, <head>, ইত্যাদি) ঐচ্ছিক; ট্যাগগুলি উপস্থিত না থাকলে উপাদানগুলি স্বয়ংক্রিয়ভাবে তৈরি হবে। <title>এইচটিএমএলে একমাত্র প্রয়োজনীয় ট্যাগ। সংক্ষিপ্ততম বৈধ এইচটিএমএল 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>

এবং সংক্ষিপ্ততম বৈধ এইচটিএমএল 5 নথি:

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

নোট করুন যে এক্সএইচটিএমএলে, সমস্ত ট্যাগ অবশ্যই স্পষ্টভাবে নির্দিষ্ট করা উচিত; কোনও উপাদান স্পষ্টভাবে sertedোকানো হবে না।

Content-Typeএইচটিটিপি শিরোলেখ ব্যবহার করে নির্দিষ্ট করা হয়নি এমন কোনও সংস্থার ধরণ নির্ধারণ করতে ব্রাউজারগুলি কিছু পরিস্থিতিতে কনটেন্ট টাইপ স্নিফিং সম্পাদন করে এবং Content-Typeশিরোনাম সরবরাহ না করে বা একটি অন্তর্ভুক্ত না করে তবে অক্ষর এনকোডিং স্নিফিং charset(আপনার সাধারণত চেষ্টা করা উচিত) এই শিরোনামগুলি অন্তর্ভুক্ত করার জন্য এবং সেগুলি সঠিক কিনা তা নিশ্চিত করার জন্য, তবে এমন কিছু পরিস্থিতি রয়েছে যা আপনি করতে পারবেন না, যেমন স্থানীয় ফাইলগুলি HTTP- র মাধ্যমে স্থানান্তরিত হয়নি)। তারা এই উদ্দেশ্যে ডকুমেন্টের শুরুতে সীমিত সংখ্যক বাইট স্নিগ্ধ করে, যদিও, সামগ্রীতে স্নিফিং বা চরিত্রের এনকোডিং স্নিফিংকে প্রভাবিত করার উদ্দেশ্যে যে কোনও কিছুই নথির শুরুতে হওয়া উচিত।

এই কারণে, এইচটিএমএল 5 নির্দিষ্ট করে যে metaঅক্ষর সেট নির্দিষ্ট করতে ব্যবহৃত হয় এমন কোনও ট্যাগ (হয় <meta http-equiv="Content-type" content="text/html; charset=...">বা সহজভাবে <meta charset=...>) কার্যকর হওয়ার জন্য ফাইলের প্রথম 1024 বাইটের মধ্যে থাকা আবশ্যক। সুতরাং, আপনি যদি আপনার নথির মধ্যে অক্ষর এনকোডিংয়ের তথ্য অন্তর্ভুক্ত করতে চলেছেন তবে আপনার ফাইলটি প্রাথমিক পর্যায়ে এমনকি প্রাথমিক <title>উপাদানটির আগে করা উচিত । তবে মনে রাখবেন যে আপনি সঠিকভাবে একটি Content-typeশিরোনাম নির্দিষ্ট করে নিলে এই ট্যাগটি অপ্রয়োজনীয় ।

সিএসএসে, পরবর্তী শৈলীর ঘোষণাগুলি পূর্বেরগুলির চেয়ে বেশি অগ্রাধিকার নেয় , সমস্ত কিছু সমান। সুতরাং, আপনার সাধারণত সর্বাধিক জেনেরিক স্টাইল শিটগুলি আগে ছাপানো হতে পারে এবং আরও নির্দিষ্ট স্টাইল শিটগুলি পরে দেওয়া উচিত।

পারফরম্যান্সের কারণে, ঠিক এর ঠিক আগে পৃষ্ঠার নীচে স্ক্রিপ্টগুলি রাখা ভাল ধারণা হতে পারে </body>, কারণ স্ক্রিপ্টগুলি লোড করা পৃষ্ঠার উপস্থাপনকে অবরুদ্ধ করে।

স্পষ্টতই, <script>ট্যাগগুলি অর্ডার করা উচিত যাতে প্রতিটি ক্রমের উপর নির্ভরশীল স্ক্রিপ্টগুলির উপর নির্ভরতা প্রথমে লোড হয়।

সামগ্রিকভাবে, আমি ইতিমধ্যে নির্দিষ্ট করে থাকা সীমাবদ্ধতাগুলি <head>বাদে, পঠনযোগ্যতা ব্যতীত ট্যাগগুলির ক্রমগুলির মধ্যে খুব বেশি কিছু হওয়া উচিত নয়। আমি <title>উপরের দিকে দিকে দেখতে পছন্দ করি এবং অন্যান্য <meta>ট্যাগগুলি কিছুটা যৌক্তিক ক্রমে রেখেছি ।

বেশিরভাগ সময়, এইচটিএমএল ডকুমেন্টের শরীরে জিনিসগুলি আপনার যে অর্ডার করা উচিত তা হ'ল তাদের প্রদর্শিত হওয়া ক্রম বা তাদের অ্যাক্সেস হওয়া ক্রম হওয়া উচিত। আপনি জিনিসগুলি পুনরায় সাজানোর জন্য সিএসএস ব্যবহার করতে পারেন, তবে স্ক্রিনের পাঠকরা সাধারণত উত্স অনুসারে জিনিসগুলি পড়তে পারবেন, অনুসন্ধান সূচীগুলি উত্স ক্রমে জিনিসগুলি বের করবে এবং আরও অনেক কিছু।

— ব্রায়ান ক্যাম্পবেল
সূত্র
4
এই শিরোনামটি বাধ্যতামূলক আমার কাছে সংবাদ ছিল এবং কিছুটা অদ্ভুত বলে মনে হচ্ছে। তবে অফিসিয়াল স্পেসটি পরীক্ষা করে নিচ্ছেন আপনি অবশ্যই একদম সঠিক। শিখুন এবং বাচুন!
— কার্ল স্মট্রিক্জ
আমাকে অবাক করে দেওয়ার কারণ হ'ল এটিই একমাত্র বাধ্যতামূলক ট্যাগ ... আমি আসলে যুক্তি দিয়েছিলাম যে এটি এইচটিএমএল 5 তেও optionচ্ছিকভাবে তৈরি করা উচিত (কারণ গ্যাজেটগুলির মতো জিনিসগুলির জন্য এটি সত্যই প্রয়োজনীয় নয় যা সর্বদা iframeএকটি দৃশ্যমান শিরোনাম হবে না ), কিন্তু তারা সিদ্ধান্ত নিয়েছে যে এবার আর এটিকে পরিবর্তন করা হবে না।
— ব্রায়ান ক্যাম্পবেল
@ ব্রায়ান - এই দুর্দান্ত ব্যাখ্যার জন্য ব্রায়ানকে ধন্যবাদ জানাই। তাই কখনও আমাকে হতাশ করেন না। এই সাইটে মাস্টারমাইন্ড রয়েছে। এবং আরও একটি বিষয় আপনি প্রশ্নটি খুব ভালভাবে বুঝতে পারেন তবে আপনি উত্তরটি খুব ভাল দিন। মহান কাজ.
— জিতেন্দ্র ব্যাস
4
@ জিতেন্দ্র হা হা! আমি আপনার সাম্প্রতিক প্রশ্নের একগুচ্ছ উত্তর দিয়েছি, আমি না? আমি নতুন বছরের পার্টি থেকে কিছুটা মাতাল তবে আমি চেষ্টা করতে পারি ... যদিও আমি উত্তর দিচ্ছি না যে আমার উত্তরটি শেষ দম্পতির মতোই ভাল হবে।
— ব্রায়ান ক্যাম্পবেল
4
আধুনিক পদ্ধতির মধ্যে <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
এক্স-ইউএ-সামঞ্জস্যপূর্ণ অবশ্যই প্রথম ট্যাগে থাকা উচিত স্ট্যাকওভারফ্লো.com
— ডেনিস
@ ডেনিস আপনি কি জানেন কি <html class="default"> মানে?
— শাইজুট
4
@ স্টম আপনার মানে কি এখানে শ্রেণীর বৈশিষ্ট্য রয়েছে? একবার পৃষ্ঠা লোড হওয়ার পরে এই শ্রেণিটি সরাতে অতিরিক্ত জাভাস্ক্রিপ্ট কোড প্রয়োজন। এটি করা - আপনি জানতে পারবেন ব্রাউজারে জাভাস্ক্রিপ্ট সক্ষম করা আছে। যদি এই বৈশিষ্ট্যটি এখনও বিদ্যমান থাকে - এর অর্থ জাভাস্ক্রিপ্ট অক্ষম করা হয়েছে যাতে আপনি প্রয়োজনে সিএসএস ব্যবহার করে কিছু বার্তা প্রদর্শন করতে পারেন
— ডেনিস
@ ডেনিস জাভাস্ক্রিপ্ট সক্ষম করার জন্য চেক করতে <নোগ্রিপ্ট> </noscript> ব্যবহার করুন
— TheCrazyProfender
4
এই আদেশের জন্য আপনার যুক্তি সম্পর্কে আপনি কি মন্তব্য করতে পারেন?
— 2540625
7

ব্রায়ানের উত্তরে কয়েকটি কার্য সম্পাদনের পরামর্শ যুক্ত করা, সর্বোচ্চ অগ্রাধিকার হ'ল যুক্তিযুক্তভাবে এমন জিনিসগুলি হওয়া উচিত যা ডাউনলোড করা দরকার, যাতে ব্রাউজার সেগুলি এএসপ ডাউনলোড শুরু করতে পারে এবং পৃষ্ঠাটি কীভাবে উপস্থাপিত হয় তা প্রভাবিত করবে এমন জিনিসগুলি। সুতরাং আমি পরামর্শ দেব:

  • চারসেটের মতো প্রভাবগুলি প্রভাবিত করে মেটাস (যেমন স্পেস দ্বারা খুব তাড়াতাড়ি প্রয়োজনীয়), ভিউপোর্ট, অ্যাপল-মোবাইল-ওয়েব-অ্যাপ্লিকেশন সক্ষম
  • শীর্ষের কাছে শিরোনাম যাতে ব্রাউজারটি এটিকে তত্পরতায় উপস্থাপন করতে পারে এবং ব্যবহারকারীর বোধ হয় কিছু ঘটছে
  • ফ্যাভিকন এবং স্পর্শ আইকন
  • সিএসএস (কমপক্ষে সিএসএসের উপরের ভাঁজগুলির জন্য; অন্যান্য অভিনব সিএসএস আপনি অভিনবতা পেতে চাইলে ফুটারে লোড হতে পারে)। এই পদক্ষেপটি সাধারণত সমস্ত কিছু এগিয়ে যাওয়া থেকে বাধা দেয়, এই কারণেই আমি পূর্বের আইটেমগুলিকে তার উপরে রাখি, কারণ তারা সিএসএস বিলম্বের সময় কিছু প্রতিক্রিয়া সরবরাহ করে।
  • সমালোচক স্ক্রিপ্টগুলি (যেমন ব্যবহারকারী-এজেন্ট স্নিফিং যা লেআউটটিকে প্রভাবিত করতে পারে) যা ফুটারে লোড করা যায় না
  • অন্য সব কিছুই (যেমন লিঙ্ক এবং মেটা ট্যাগ আকারে প্রয়োজনীয় মেটাডেটা)

আপনি সিএসএস এবং জেএস যাই হোক না কেন মাথায় বোঝা যা কিছু অন্তর্নিহিত বিবেচনা করতে পারেন, বিশেষত যদি এর ছোট এবং বাহ্যিক স্ক্রিপ্ট / পত্রকটি আপনার সাধারণ দর্শকের প্রোফাইল অনুসারে ক্যাশে হওয়ার সম্ভাবনা না থাকে। এবং আপনি যদি এটিকে ইনলাইন করেন, আপনি আদর্শভাবে এটি সংকোচ করতে চাইবেন।

শেষ কথা: ব্যবহারকারীকে মাথা পেতে অপেক্ষা করতে হবে - এবং এটি যে কোনও ব্লকিংয়ের সংস্থানগুলি লোড করে - তাই দেহ বা পাদলেখকে যতটা সম্ভব সম্ভব রাখাই ভাল।

— মাহেমফ
সূত্র
7

ডাব্লু 3 অনুসারে হওয়া উচিত:

  • মেটা চরসেট
  • শিরোনাম
  • মেটা নাম = "বিবরণ"
  • মেটা নাম = "কীওয়ার্ড"
  • স্টাইলশিট
  • জাভাস্ক্রিপ্ট ফাইল
— আন্দ্রে ব্রাভো ফেরেরিরা
সূত্র
লিঙ্কযুক্ত নিবন্ধটি পুনঃনির্দেশ করছে এবং এটি অর্ডার সম্পর্কে কিছু বলেছে বলে মনে হয় না।
— 2540625
স্টাইলশিটগুলি রেন্ডার-ব্লক করা হয়, বরং CSS এর আগে জেএস অ্যাসিঙ্ক লোড করে।
— নুল
6

আপনি কীভাবে আপনার উপাদানগুলি অর্ডার করেন তা বেশিরভাগ ব্রাউজারগুলিতে আপত্তি নেই, তবে আপনার সর্বদা charsetপ্রথমে নির্দিষ্ট করা উচিত ।

আই 7 + এর জন্য সর্বোত্তম অনুশীলনের জন্যcharset , এর মধ্যে যে কোনও কিছুর আগে X-UA-Compatible, এবং baseঘোষণাগুলি হওয়া দরকার head, অন্যথায় ব্রাউজারটি আবার শুরু হয়ে যায় এবং যা ঘটেছিল তা পুনরায় পার্স করে।

— জাইরবিনসন
সূত্র
5

আপনি প্রথমে আপনার কন্টেন্ট-টাইপটি চান যেমন এটি অক্ষর এনকোডিংকে বোঝায়, অন্যথায় যদি এটি পরে আসে তবে কিছু ব্রাউজার এনকোডিং অনুমান করার চেষ্টা করে। (আমি নির্দিষ্টকরণগুলি মনে করতে পারি না, তবে আমি মনে করি আইই অনুমান করবে যদি এটি নথির প্রথম 75 টি অক্ষরে কোনও এনকোডিং খুঁজে না পায়?)

বেশিরভাগ ওয়েবসাররা এইচটিটিপি শিরোনামগুলিতে এনকোডিং প্রেরণ করে তবে কোনও ব্যবহারকারী যদি আপনার পৃষ্ঠাটি সংরক্ষণ করেন তবে শিরোনামগুলি এটি দিয়ে সংরক্ষণ করা হয় না।

আমি সিএসএসের রেফারেন্সগুলিকে দ্বিতীয় করতাম তাই ব্রাউজারটি যত তাড়াতাড়ি সম্ভব সেগুলি ডাউনলোড করে।

জাভাস্ক্রিপ্ট আমি মাথায় রাখব না, এটি পৃষ্ঠাগুলি রেন্ডারিংগুলিকে ডাউনলোড করার সাথে সাথে আপনার পৃষ্ঠাগুলির নীচে যেতে হবে at

— রায়ান দোহার্টি
সূত্র
0

আইআইআরসি, কিছু ব্রাউজার একটি content-typeউপাদানের মুখোমুখি হওয়ার পরে দস্তাবেজটি পুনরায় লোড করবে । সুতরাং যে উপাদানটি সম্ভবত headনথির উপাদানটির মধ্যে প্রথম হওয়া উচিত ।

— ডেভিড আর ট্রিবল
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.