এইচটিএমএল 5-তে, প্রধান নেভিগেশন <হেডার> উপাদানটির ভিতরে বা বাইরে থাকা উচিত?


167

এইচটিএমএল 5 এ, আমি জানি যে <nav>পৃষ্ঠার মাস্টহেড <header>উপাদানটির ভিতরে বা বাইরে ব্যবহার করা যেতে পারে । মাধ্যমিক এবং প্রধান উভয় নেভিগেশন থাকা ওয়েবসাইটগুলির জন্য, <nav>মাস্টহেড উপাদানটির বাইরে <header>একটি <nav>উপাদান হিসাবে প্রধান নেভিগেশন সহ ম্যাসহেড উপাদানটির অভ্যন্তরে গৌণ নেভিগেশন অন্তর্ভুক্ত করা সাধারণ বলে মনে হয় <header>। যাইহোক, যদি ওয়েবসাইটটিতে মাধ্যমিক নেভিগেশন অভাব থাকে, তবে <nav>মাস্টহেড <header>উপাদানটির মধ্যে কোনও উপাদানটিতে প্রধান নেভিগেশন অন্তর্ভুক্ত করা সাধারণ বলে মনে হয় ।

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

<header>গৌণ নেভিগেশন অন্তর্ভুক্তি বা বর্জনের উপর ভিত্তি করে প্রধান নেভিগেশনটি ভিতরে থেকে মাস্টহেড উপাদানটির বাইরের দিকে সরিয়ে নিচ্ছি এমন আরও ভাল উপায় কি আছে ?

প্রধান এবং মাধ্যমিক নেভিগেশন উদাহরণ

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

অনলাইনডিজারস.আরগোল একটি উদাহরণ সাইট যা উপরের প্যাটার্নটি অনুসরণ করে।

এখানে চিত্র বর্ণনা লিখুন

প্রধান কেবল নেভিগেশন উদাহরণ

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

কীজো.কম.উইক একটি উদাহরণ সাইট যা উপরের প্যাটার্নটি অনুসরণ করে।

এখানে চিত্র বর্ণনা লিখুন

থেকে উদ্ধৃতাংশ পেশ করা হচ্ছে HTML5 এর - উপর 02 ফেব্রুয়ারি, 11, 7:38 পূর্বাহ্ণ যোগ করা হয়েছে

ব্রুস লসন এবং রেমি শার্পের এইচটিএমএল 5 উপস্থাপনের বিষয়টি সম্পর্কে এই কথাটি বলা আছে:

শিরোনামে নেভিগেশনও থাকতে পারে। সাইট-প্রশস্ত নেভিগেশনের জন্য এটি খুব কার্যকর হতে পারে, বিশেষত টেম্পলেট-চালিত সাইটগুলিতে যেখানে পুরো <header>উপাদানটি কোনও টেম্পলেট ফাইল থেকে আসতে পারে।

অবশ্যই, এটা প্রয়োজন হয় না যে <nav>হতে <header>

আপনি যদি বিশ্বাস করেন যে সাইট-প্রশস্ত নেভিগেশনটি সাইট-প্রশস্ত শিরোনামের অন্তর্ভুক্ত এবং স্টাইলিংয়ের স্বাচ্ছন্দ্যের বিষয়ে ব্যবহারিক বিবেচনার উপরও যদি নির্ভর করে তবে।

এই শেষ বাক্যটির উপর ভিত্তি করে, এটি উপস্থিত রয়েছে যে ব্রোস লসন-এই অধ্যায়টির লেখক অধ্যায়টির লেখক — স্বীকার করেছেন যে "স্টাইলিংয়ের স্বাচ্ছন্দ্যের বিষয়ে বাস্তববাদী বিবেচনাগুলি" বিষয়বস্তু এবং শৈলীর মধ্যে মিলন ঘটায়।


1
এটি সম্পূর্ণরূপে আপনার ওয়েবসাইটের ডিজাইনের উপর নির্ভর করে। টুইটারের উদাহরণস্বরূপ দেখুন, তাদের হোমপৃষ্ঠা (আপনি যে পৃষ্ঠাটি লগ ইন করেছেন তার আগে আপনি দেখতে পাচ্ছেন), কোনও শীর্ষস্থানীয় নেভিগেশন নেই। তাদের সমস্ত "প্রধান মেনু" স্টাফ পৃষ্ঠার নীচে রয়েছে। এখন, আমি আপনার সম্পর্কে জানি না - তবে আমি সেই শিরোনাম বলে যাব না ...
uSeRnAmEhAhAhAhAhAhA

উত্তর:


84

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

এগুলি নেভিগেশন প্রায়শই যায় বলে কেবল এ কারণেই তারা একটি শিরোনামে বসতে ঝোঁক stone

আপনি এটি সম্পর্কে HTML5 ডক্টরে আরও পড়তে পারেন ।


5
আপনি কেন বলেছেন যে "যতক্ষণ না এগুলির মধ্যে উপাদানগুলি কেবলমাত্র অভ্যন্তরীণ নেভিগেশন উপাদানগুলি থাকে (যেমন কোনও টুইটার বা ফেসবুক অ্যাকাউন্টের মতো বাহ্যিক সাইটের সাথে লিঙ্ক করবেন না) তবে ঠিক আছে?"
ম্যাথু র্যাঙ্কিন 13

7
@ ম্যাথেজ, কারণ এনএভি এলিমেন্ট কেবল সেই সাইটের চারপাশে নেভিগেশনের জন্য। আমি শুধু পরিষ্কার ছিল সব হয়।
ইয়ান ডিভলিন 16

@ ম্যাথের্যাঙ্কিন কোনও <nav>উপাদানটির অভ্যন্তরের অ্যাঙ্করটিতে ক্লিক করা কী ধাক্কা লাগবে , কেবল সম্পূর্ণ ভিন্ন নেভিগেশন সহ একটি নতুন পৃষ্ঠায় প্রেরণ করা। আপনার নিজের সাথে সত্যিকারের সম্পর্ক নেই এমন বাহ্যিক সাইটগুলিতে অ্যাঙ্করগুলির rel="nofollow"জন্য, লিঙ্কগুলির বৈশিষ্ট্যটিও মনে রাখবেন ।
অ্যান্টনি রুটলেজ

আমি জানি এটি পুরানো ... সাবডোমেনগুলির লিঙ্কগুলির কী হবে? উদাহরণস্বরূপ একটি ওয়েবসাইটের বিভিন্ন সাইট রয়েছে (উপস্থাপনা সাইট, পরিষেবা সাইট, লেখক সাইট, ইত্যাদি ...), সেগুলির আলাদা আলাদা কাঠামো রয়েছে। আমি যা করছি তা সেই লিঙ্কটি <nav>উপাদানটির ভিতরে রাখছে তবে উপাদানটির ভিতরে নয় <ul>, এটিকে এমনভাবে স্টাইলিং করুন যা মূল নেভিগেশন তালিকার অংশ নয়। মোবাইল সংস্করণ ব্যতীত, লিঙ্কটি একই তালিকায় উপস্থিত থাকতে হবে ... যাইহোক আপনি অন্য কোথাও যাচ্ছেন তা জানার জন্য বোতামটি যথেষ্ট বর্ণনামূলক ...
চাজি চাজ

5

আপনি মতামত চাইছেন কিনা তা এটি কিছুটা অস্পষ্ট eg "এটি এক্সএক্সএক্সএক্স করা সাধারণ" বা একটি আসল নিয়ম, তাই আমি নিয়মের দিকে ঝুঁকতে যাচ্ছি।

উদাহরণ আপনি cite মধ্যে উদাহরণ উপর ভিত্তি করে মনে এনএভি উপাদানের জন্য বৈশিষ্ট । মনে রাখবেন যে অনুমানটি টুইট হতে চলেছে এবং নিয়মগুলি কখনও কখনও সংশ্লেষিত হয়, তাই আমি অনেক লোককে চাইব যে ব্যাখ্যা দেওয়ার চেয়ে কেবল যা দেওয়া হয়েছে তা করার প্রবণতা রয়েছে। আপনি বিভিন্ন আচরণের সাথে দুটি পৃথক উদাহরণ দেখিয়ে চলেছেন, সুতরাং এটির মধ্যে কেবলমাত্র আপনি পড়তে পারেন। এই সাইটগুলির যে কোনওটিরও বিরোধী উপ / নাভির পরিস্থিতি রয়েছে এবং যদি তা হয় তবে তারা কীভাবে এটি পরিচালনা করবে?

সর্বাধিক গুরুত্বপূর্ণ, যদিও, অনুমানের কিছুই নেই এটি করার উপায় saying এইচটিএমএল 5 এর সাথে একটি লক্ষ্য ছিল শব্দার্থকতা, প্রয়োজনীয়তা ইত্যাদি সম্পর্কে [এটি তুলনা করার জন্য] খুব স্পষ্ট হওয়া তাই এই বাদটি লক্ষ্য করার মতো। যতদূর আমি দেখতে পাচ্ছি, উদাহরণগুলি একে অপরের থেকে স্বতন্ত্র এবং লেআউট প্রয়োজনীয়তার নিজস্ব প্রসঙ্গে ইত্যাদির মধ্যে সমানভাবে বৈধ etc.

নেভের উত্সের অবস্থানটি শর্তসাপেক্ষ হওয়া এক ধরনের মূর্খতা (অন্য একটি লাল পতাকা)। কেবল একটি পদ্ধতি বেছে নিন এবং এটির সাথে যান।


4

আমি নির্বাণ পছন্দ না এনএভি মধ্যে হেডার । আমার যুক্তিটি হ'ল:

যুক্তিবিদ্যা

হেডার ডকুমেন্ট সম্পর্কে পরিচায়ক তথ্য উপস্থিত রয়েছে। এনএভি একটি মেনু আছে যা অন্য নথি লিঙ্ক আছে। আমার মনে মনে এর অর্থ হ'ল নাভের সামগ্রীটি নথির পরিবর্তে সাইটের অন্তর্ভুক্ত। একটি ব্যতিক্রম হবে যদি এনএভি ফরোয়ার্ড লিঙ্কগুলি ধরে রাখে।

অভিগম্যতা

আমি সূচনা কোডের পরিবর্তে উত্স কোডের শেষে মেনুগুলি রাখতে চাই। আমি এটি কম্পিউটারের স্ক্রিনের শীর্ষে প্রেরণে বা টেক্সট-স্পিচ ব্রাউজার এবং ছোট পর্দার জন্য শেষে রেখে দিতে ব্যবহার করি। এটি এড়িয়ে চলা লিঙ্কগুলির প্রয়োজনীয়তা এড়ায়।


2
মনে রাখবেন যে স্কিপ লিঙ্কগুলি মেনুটি এড়িয়ে যাওয়ার বিকল্প দেয়, যখন শেষের দিকে রেখে এড়ানো না যাওয়া (যেমন নেভিগেট করা) বিকল্প দেয় না - সুতরাং আপনাকে শেষ পর্যন্ত সঠিকভাবে নেভিগেট করতে সক্ষম হওয়া পর্যন্ত অপেক্ষা করতে বাধ্য করা হবে ঠিক আছে?
জুলিক্স

2
@ জুলিক্সের বক্তব্যটি অবিরত রাখতে, শেষে এনএভি স্থাপন করা, তবে শুরুতে এটি সরবরাহ করা দস্তাবেজটির মাধ্যমে দৃষ্টিশক্তি ব্যবহারকারীদের ট্যাব করার জন্য বিশ্রী করে তুলবে।
জেসন টি ফেদারিংহাম

3

@ ইয়ানড্যাভলিন সঠিক। এমডিএন এর বিধিগুলি নিম্নলিখিত বলে :

"এইচটিএমএল শিরোনাম উপাদান" "একটি পৃষ্ঠার শিরোনামকে সংজ্ঞায়িত করে - সাধারণত সাইটের লোগো এবং নাম এবং সম্ভবত একটি অনুভূমিক মেনু থাকে ..."

"সম্ভবত" শব্দটির কী আছে। এটি আরও এগিয়ে যায় যে হেডারের অগত্যা কোনও সাইট শিরোনাম হওয়ার দরকার নেই। উদাহরণস্বরূপ আপনি পপ-আপ মডেলটিতে বা নথির অন্যান্য মডিউলারের অংশগুলিতে যেখানে একটি শিরোলেখ রয়েছে সেখানে একটি "শিরোলেখ" অন্তর্ভুক্ত করতে পারেন এবং এটি কোনও স্ক্রিন পাঠকের পক্ষে এটি জানতে সহায়ক হবে know

এটি এনএভি-র অন্তর্নিহিত ব্যবহারের শর্তাবলী আপনি এটি যে কোনও জায়গায় দলবদ্ধ সাইট নেভিগেশন ব্যবহার করতে পারেন, যদিও এটি সাধারণত মিনি-এনএভিএস / গুরুত্বপূর্ণ সাইটের লিঙ্কগুলির জন্য "পাদলেখ" বিভাগ থেকে বাদ দেওয়া হয়।

সত্যিই এটি ব্যক্তিগত / দলের পছন্দ নেমে আসে। আপনি এবং আপনার দলটি কী বেশি শব্দার্থক এবং আরও গুরুত্বপূর্ণ এবং স্থির থাকার চেষ্টা করবেন তা স্থির করুন। আমার জন্য, যদি এনএভি লোগো এবং মূল সাইটের "এইচ 1" এর সাথে ইনলাইন থাকে তবে এটি "শিরোনাম" এ রাখাই বুদ্ধিমান বোধ করে তবে আপনার যদি অন্য ডিজাইনের পছন্দ থাকে তবে কেস ভিত্তিতে কেস সিদ্ধান্ত নিন।

সর্বাধিক গুরুত্বপূর্ণভাবে ডক্সটি পরীক্ষা করে দেখুন এবং নিশ্চিত হন যে আপনি বাদ দিতে বা অন্তর্ভুক্ত করা বেছে নিয়েছেন কিনা আপনি কেন সেই নির্দিষ্ট সিদ্ধান্ত নিচ্ছেন তা বুঝতে।


2

এমডিএন লার্নিং এরিয়ায়, "এইচটিএমএল পরিচিতি" বিভাগের অধীনে, ডকুমেন্ট এবং ওয়েবসাইট কাঠামোর উপ-বিভাগটি বলেছেন (সাহসী / জোর দেওয়া আমার দ্বারা):

শিরোলেখ

সাধারণত শীর্ষে জুড়ে একটি বড় স্ট্রিপ থাকে একটি বড় শিরোনাম এবং / অথবা লোগো। এখানেই একটি ওয়েবসাইট সম্পর্কিত প্রধান সাধারণ তথ্য সাধারণত একটি ওয়েবপৃষ্ঠা থেকে অন্য ওয়েবপৃষ্ঠায় থাকে।

ন্যাভিগেশন বার

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


1
আমি একমত হতে চাই <nav>যে একটি পৃষ্ঠায় অগভীর কাঠামোযুক্ত <nav>যা গভীর নীচে নীচের থেকে আরও অ্যাক্সেসযোগ্য হতে পারে । তবে, সেই ভিত্তিতে কী রায় দেওয়া হচ্ছে? স্ক্রিন পাঠকরা ঘরে বসে যাবেন <nav>এবং <a>ট্যাগগুলি, যাইহোক। গুরুত্বপূর্ণ বিষয় হ'ল এইচটিএমএলের কাঠামোগত ক্রম। পরবর্তী, প্রতিক্রিয়া। প্রাথমিক <nav>(বা যে কোনও <nav>) একটি সরাসরি শিশুকে <body>কী সহজে চালিত করা সহজ করে তোলে? এটি কি বৈধ এইচটিএমএল? একজন <nav>হয় বিষয়বস্তু সেকশন , এবং এইভাবে একটি প্রাকৃতিক হইয়া একটি অনুযায়ী জীবনযাপন করতে হয় সেকশন রুট মতো <body>। ডাব্লু 3 সি এইচটিএমএল 5 দেখুন
অ্যান্টনি রটলেজ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.