Heading গঠন

HTML heading, <h1> থেকে <h6>, একটি ডকুমেন্টের গঠন বর্ণনা করে — এর অংশগুলো কী আর সেগুলো কীভাবে nest করে। এগুলো টেক্সট বড় করার উপায় নয়। সঠিকভাবে ব্যবহার করলে সার্চ ইঞ্জিনকে আপনার পাতা বুঝতে সাহায্য করে, আর এটি SEO আর accessibility-র মধ্যে সবচেয়ে স্পষ্ট মিলগুলোর একটি।

Heading-কে একটি সূচিপত্রের মতো ভাবুন। একটি <h2> একটি প্রধান অংশ। এর ভেতরে একটি <h3> সেই অংশের একটি উপ-বিন্দু। <h2> থেকে সরাসরি <h4>-এ লাফ দেওয়া একটি স্তর অনুপস্থিত সূচিপত্রের সমতুল্য।

শুধু heading-গুলো পড়ে আপনার এখনো মোটামুটি বোঝা উচিত পাতাটি কী কভার করে। সেগুলো আলাদাভাবে অর্থপূর্ণ না হলে, গঠনটি ভুল।

<h1> হলো পাতার প্রধান heading — কন্টেন্টের দৃশ্যমান শিরোনাম। প্রথাগতভাবে প্রতি পাতায় একটি থাকে, পাতাটি আসলে যা নিয়ে তার সাথে মিলিয়ে।

এটি <title> ট্যাগের সাথে সম্পর্কিত কিন্তু আলাদা: title সার্চ ফলাফল আর ব্রাউজার ট্যাবে দেখা যায়, H1 পাতাটিতেই দেখা যায়। সেগুলো প্রায়ই একই রকম হয়, আর সেগুলোর হুবহু এক হওয়ার প্রয়োজন নেই। একটি title-এ ব্র‍্যান্ডের নাম থাকতে পারে আর একটি ক্লিক অর্জনের জন্য লেখা হতে পারে; একটি H1 সাধারণত একটি শিরোনাম হিসেবে বেশি স্বাভাবিকভাবে পড়া যায়।

ভুলটি হলো দেখতে কেমন লাগে তার কারণে একটি heading স্তর বাছা — <h2> খুব বড় দেখায় বলে একটি উপশিরোনামের জন্য <h4> ব্যবহার করা। আকার CSS-এর কাজ। আউটলাইনে অংশটির স্থান প্রতিফলিত করে এমন স্তর বাছুন, তারপর যেভাবে ইচ্ছা স্টাইল করুন।

• প্রতি পাতায় একটি <h1>, পুরো পাতা বর্ণনা করে।
• নিচে নামার সময় স্তর বাদ দেবেন না — <h2> তারপর <h3>, <h2> তারপর <h4> নয়।
• এমন heading লিখুন যা তাদের অংশ কাজের ভাবে বর্ণনা করে। "Storage" "Point 3"-এর চেয়ে ভালো।
• প্রাসঙ্গিক সার্চ বাক্যাংশ যেখানে স্বাভাবিকভাবে যায় সেখানে অন্তর্ভুক্ত করুন — heading সংকেত দেয় একটি অংশ কী কভার করে — কিন্তু আগে পাঠকের জন্য লিখুন।
• শুধু প্রকট বলে logo বা navigation heading-এ মুড়বেন না।