এক্সএক্সএইচএমএল স্ট্রাকচারাইজেশন দ্বিতীয়ম: ক্যাসেস স্টাডি: W3school এর স্ট্রাকচারাইজেশন ট্যাগ

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

এই ধাপে, আপনি যথাযথ, কোনও সীমাবদ্ধতা না থাকা ট্যাগ লিখতে শিখবেন, যাতে আপনি ব্যান্ডওয়াইড ট্র্যাফিককে ৫০% এরও কম করতে পারেন, সার্ভারের ভার এবং চাপ হ্রাস করার সাথে সাথে, ওয়েবসাইটের লোডিং সময়কেও কমাতে পারেন। এই লক্ষ্য পূরণ করতে, আমরা সেইসব প্রদর্শনীমূলক উপাদানগুলি সরিয়ে দিতে এবং কোনও সুবিধা না থাকা খারাপ অভ্যাসগুলি পরিবর্তন করতে পারি।

এই খারাপ অভ্যাসগুলি নেটওয়ার্কের অনেক সাইটকে নিরাপদ করেছে, বিশেষ করে এমন সাইটগুলিকে যারা CSS কোডকে প্রধানত টেবিল ভিত্তিক লেআউটের সাথে মিশ্রিত করে।এই পদ্ধতি বেশ খারাপ এবং অর্থহীন, এমনকি অন্য ক্ষেত্রে অভিজ্ঞ ডিজাইনারদের কাছেও।এই সমস্যাটির হার সমান, নতুন কোড লিখা সাইটগুলিতেও, এবং দেখা যায় যে Dreamweaver এবং GoLive-এর মতো দৃশ্যমান সম্পাদকদ্বারা সৃষ্ট সাইটগুলিতেও।

এই সেকশনে আমি এই সাধারণ ভুলগুলিকে উল্লেখ করব, যাতে আপনি তাদের পরিচিত করতে পারেন এবং তাদের প্রতিরোধ করতে পারেন, এবং কিভাবে তাদের সংশোধন করতে শিখতে পারেন।আমি একমাত্র প্রতিযোগিতা প্রতিযোগিতা (id) - এর বিষয়ে বিস্তারিতভাবে ব্যাখ্যা করব, এবং কিভাবে তা আপনাকে অতি কমিউটিংকর্মক্ষম XHTML লিখতে সক্ষম করে, নির্মাণ করা হোক কিংবা শুধুমাত্র CSS ব্যবহার করা হোক

প্রত্যেক এলিমেন্টকে কি স্ট্রাকচারাৎ করা উচিত?

যেমন আগের সেখানে আমরা বলেছিলাম যে, প্রত্যেক এলিমেন্টকে স্ট্রাকচারাৎ করা উচিত, CSS-এর মাধ্যমে একটি ক্রমিক বা অক্রমিক তালিকা একটি সম্পূর্ণ নেভিগেশন বার হিসাবে প্রদর্শিত হতে পারে, যাতে একটি পরিক্রিয়ামূলক বাটন থাকে।ডকুমেন্টের কনটেন্টকে সাধারণ এলিমেন্টদ্বারা মার্ক করা যেতে পারে, এই এলিমেন্টগুলি স্পেসিফিক স্ট্রাকচারাৎ প্রতিযোগিতা দ্বারা নির্দেশ করা হয়, যাতে তারা সাইট ডিজাইনে নিজেদের সেম্যান্টিক ভূমিকা নির্দেশ করতে পারে。

আমরা ২০০৬ সালে CodeW3C.com-এর প্রথম চীনা পরীক্ষামূলক সংস্করণ তৈরি করেছিলাম, আমরা সবসময় CSS-এর মাধ্যমে লেআউট করেছিলাম, এবং XHTML-এর মাধ্যমে ডকুমেন্টকে স্ট্রাকচারাৎ করেছিলাম।এসব সকল এলিমেন্টই স্ট্রাকচারাৎ, শুধুমাত্র শীর্ষক থেকে তালিকা পর্যন্ত, এবং পরাগ্রহ পর্যন্ত।আপনি CodeW3C-এর প্রত্যেক পাতায় প্রতিক্রিয়ামূলক হোম বাটন এবং দ্বিতীয় স্তরের মেনু বাটন দেখতে পারবেন।এই দুটি উপাদানের XHTML কোডটি নিম্নরূপ:

<div id="header"><h1><a href="/">codew3c অনলাইন শিক্ষানুষ্ঠান</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML শিক্ষা">HTML শিক্ষা</a></li>
<li id="x"><a href="/x.asp" title="XML শিক্ষা">XML শিক্ষা</a></li>
<li id="b"><a href="/b.asp" title="ব্রাউজার স্ক্রিপ্ট">ব্রাউজার স্ক্রিপ্ট</a></li>
<li id="s"><a href="/s.asp" title="সার্ভার স্ক্রিপ্ট">সার্ভার স্ক্রিপ্ট</a></li>
<li id="d"><a href="/d.asp" title="dot net টিউটোরিয়াল">dot net টিউটোরিয়াল</a></li>
<li id="m"><a href="/m.asp" title="মাল্টিমিডিয়া টিউটোরিয়াল">মাল্টিমিডিয়া টিউটোরিয়াল</a></li>
<li id="w"><a href="/w.asp" title="ওয়েবসাইট হান্ডবুক">ওয়েবসাইট হান্ডবুক</a></li>
</ul>
</div>

div, id এবং অন্যান্য সহযোগী

যদি সঠিকভাবে ব্যবহৃত হয়, div হতে স্ট্রাকচার মার্কাপিং-এর একটি ভালো সহযোগী হতে পারে, এবং id একটি অবিস্মরণীয় ছোট টুল হয়, যা আপনাকে অতি কমিউটিংকর্মক্ষম XHTML লিখতে সক্ষম করে, এবং CSS-এর সুবিধায় উপযুক্তভাবে ব্যবহার করতে সহায়তা করে, এবং ক্ষুদ্র ডকুমেন্ট ওবজেক্ট মডেল (DOM) দ্বারা সাইটে জটিল ও সুবিধাজনক আচরণ যোগ করতে সক্ষম করে。

W3C তার সর্বশেষ XHTML2 স্কিমের XHTML স্ট্রাকচার মডেলে এইভাবে div-কে বর্ণনা করেছে:

div এলিমেন্ট, id, class এবং role প্রতিযোগিতার মাধ্যমে, ডকুমেন্টে অতিরিক্ত স্ট্রাকচার যোগ করার জন্য একটি সাধারণ মেকানিজম প্রদান করে।এই এলিমেন্ট কনটেন্টের প্রদর্শন শৈলী নির্ধারণ করে না।তাই, নির্মাতা এই এলিমেন্টকে স্টাইলশীট, xml:lang, প্রতিযোগিতা ইত্যাদির সাথে মিলিয়ে ব্যবহার করতে পারে, যাতে XHTML তাদের নিজেদের প্রয়োজনীয়তা এবং পছন্দের অনুযায়ী হয়。

div-এর সংক্ষেপ হলো division।division হলো বিভাজন, এলাকা, গোষ্ঠী।যেমন, যখন আপনি একটি শৃঙ্খল লিঙ্কগুলি জুড়িয়ে দেন, তখন তা ডকুমেন্টের একটি division হয়ে ওঠে।

ঢাঁচা যোগানোর সাধারণ পদ্ধতি

সব হিংস্টার্লিংক (HTML) লিখা ব্যক্তিকে অন্তর্ভুক্ত বা শিরোনামের মতো সাধারণ ইলেমেন্টগুলি অত্যন্ত পরিচিত, কিন্তু কিছু লোক div-কে ততটা পরিচিত নয়। W3C-র বর্ণনায় আমরা div ইলেমেন্ট বোঝার কীভাবে পাইতে পারি, "একটি সাধারণ ঢাঁচা যোগানোর পদ্ধতি"।

এই সাইটের প্রধান পাতায়, আমরা শিক্ষাক্রম তালিকা তালিকা একটি div-এর মধ্যে বানিয়েছি, কারণ শিক্ষাক্রম তালিকা কোনো মূল বিষয়ের অংশ নয়। এখানে h2 ইলেমেন্ট প্রত্যেকটি শিক্ষাক্রমের শিরোনাম নির্দিষ্ট করে, এবং ul তালিকা ইলেমেন্ট প্রত্যেকটি শিক্ষাক্রমের বিস্তারিত তালিকা নির্দিষ্ট করে। কিন্তু একটি বড় এবং বিশেষভাবে, এই শিক্ষাক্রম তালিকা একটি স্ট্রাকচারাল (structured) ভূমিকা পালন করে, যেটা দ্বিতীয় নেভিগেশন কম্পোনেন্ট। এই ভূমিকা উপর গুরুত্ব দিতে, আমরা navsecond এই id-এর মাধ্যমে এই div-কে চিহ্নিত করি。

<div id="navsecond">
<h2>HTML শিক্ষাক্রম</h2>
<ul>
<li><a href="/html/index.asp" title="HTML শিক্ষাক্রম">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML শিক্ষাক্রম">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS শিক্ষাক্রম">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP শিক্ষাক্রম">TCP/IP</a></li>
</ul>
<h2>XML শিক্ষাক্রম</h2>
<ul>
<li><a href="/xml/index.asp" title="XML শিক্ষাক্রম">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL ভাষা">XSL</a></li>
... ...
... ...
</div>

আপনি যে নাম ব্যবহার করেন তা করতে পারেন।"Gladys" এবং "orangebox" একটি সঠিক XHTML নামকরণ নিয়েছে। কিন্তু সেম্যান্টিক (semantic) বা মেটা-স্ট্রাকচারাল (meta-structural) নামনির্দিষ্টকরণ সর্বোত্তম (যারা অংশগুলির কার্যকারিতা বোঝাতে পারে)।

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

তাই, id-কে "menu"、"content" বা "searchform" হিসাবে নামিয়ে দেওয়া করা আপনাকে স্মরণ করতে সাহায্য করবে। আরও বলে, লেবেলিং এবং ডিজাইনকে সমান বললে, গুড়ি পৃষ্ঠার ডিজাইনটি আপনার ইচ্ছানুসারে কোনো রূপেই ফরম্যাট করা যেতে পারে। এইভাবে করার ফলে, আপনি শুধুমাত্র CSS ব্লকের মধ্যেই থাকতে পারবেন বা হাইব্রিড ব্লকের মধ্যেও থাকতে পারবেন এবং প্রদর্শন মার্কাপকে ব্যবহার করে চিন্তা করা এবং লেখা করার অনুশীলন থেকে বিরত হবেন

id vs. class

id প্রয়োগ একসময় XHTML-এর জন্য নয়; class প্রয়োগ বা div ইলেকট্রনও নয়। এগুলোকেও একইভাবে HTML-এর সময় থেকেই পছন্দ করা হয়েছে। id প্রয়োগটি একটি ইলেকট্রনকে একটি অভিনব নাম দেয়। একটি নামকে একবারেই একটি পৃষ্ঠাতেই ব্যবহার করা হয়। (উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠায় id হল "content" এর মতো div থাকে, তবে আরও কোনো div বা অন্য ইলেকট্রনকে এই নাম ব্যবহার করা হবে না)। class প্রয়োগটি পৃষ্ঠাতে ব্যবহৃত হতে পারে (উদাহরণস্বরূপ, পৃষ্ঠার পাঁচটি অনুচ্ছেদকেও "small" বা "footnote"-র নাম দেওয়া যেতে পারে)। নিচের নিদর্শনটি আপনাকে id এবং class-এর মধ্যে পার্থক্য সম্পর্কে বোঝাবে:

<div id="searchform">অনুসন্ধান ফর্ম এককগুলি এখানে থাকবে। এটি
পৃষ্ঠার একটি অংশ অতিরিক্ত
<div class="blogentry">
   <h2>আজকের ব্লগ পোস্ট</h2>
   <p>ব্লগ প্রবন্ধ এখানে থাকবে</p>
   <p>এখানে আরেকটি ব্লগ প্রবন্ধের অনুচ্ছেদ</p>
   <p>একইভাবে, একটি পৃষ্ঠায় একাধিক অনুচ্ছেদ থাকতে পারে, তাই পত্রপৃষ্ঠারও একটি অংশ বিশেষ
   একটি ব্লগে বহুতো প্রবন্ধ থাকতে পারে। একটি ব্লগ পৃষ্ঠা ব্যবহার করতে পারে
   ব্লগেন্ট্রির "blogentry" (বা অন্য কোনো) ক্লাসের একাধিক প্রমাণ
   class).</p>
</div>
<div class="blogentry">
   <h2>গতকালের ব্লগ পোস্ট</h2>
   <p>আমরা এখন আরেকটি class হিসেবে আবার একটি div-এর মধ্যে আছি,</p>
   "blogentry."</p>
   <p>তারা হাজার হাজারটা ফুলে উঠেছে。</p>
   <p>এই পেজে দশটি ব্লগ পোস্ট আছে, তবে
   এবং আরও দশটি div class="blogentry" আছে।</p>
</div>

এই উদাহরণে, searchform-এর নামের div-টি সার্চ ফর্ম ধারণকারী পেজ অঞ্চলকে বুকে রাখতে ব্যবহৃত হয়, এবং div class="blogentry"-এর মাধ্যমে ব্লগের প্রত্যেক লেখা প্রবেশকে বুকে রাখা হয়। পেজে একটি সার্চ ফর্ম শুধুমাত্র একটি উপাদান, তাই আমরা একমাত্র id-কে চিহ্নিত করেছি। কিন্তু ব্লগটি অনেক বেশি (লেখা) প্রবেশ ধারণ করে, তাই class অবজ্যেটকে এই ক্ষেত্রে ব্যবহার করা হয়। একইভাবে, সংবাদ সাইটগুলির মধ্যেও বেশিরভাগ div-এর class-টি "newsitem" বা অন্য কোন নাম দেওয়া হয়।

তবে, সমস্ত সাইটই div-এর প্রয়োজন না। ব্লগ সাইটগুলি শুধুমাত্র h1, H2, এবং h2 শিরোনাম এবং <p> সম্বোধনীকেই ব্যবহার করতে পারে, সমস্ত সংবাদ সাইটও এইভাবে। আমরা class হিসেবে blogentry-এর div-এর উপরে দেখাচ্ছি, এটা আপনাকে সাইটে div-এর সংখ্যা বৃদ্ধি করার পরিবর্তে, এই সিদ্ধান্তকে দেখানোর জন্য যেমন, একই HTML ডকুমেন্টের মধ্যে কতবারও class ব্যবহার করা যায়, কিন্তু id-এর প্রয়োজন কেবল একবার।

স্টিকি টিকিট তত্ত্ব

id অবজ্যেটকে স্টিকি টিকিট হিসেবে ভাবেনোর সাহায্য করবে। আমি ফ্রিজারের উপর একটি টিকিট দিয়ে মিল্ক কেনার জন্য স্মরণ করব, ফোনের উপরও একটি টিকিট দিয়ে একজন বিলম্বিত গ্রাহককে ফোন করার জন্য স্মরণ করব, এবং একটি বুককেপের উপরও একটি টিকিট দিয়ে এই মাসের ১৫ তারিখের আগে প্রবেশের জন্য স্মরণ করব।

id তথ্যকেও ডকুমেন্টের বিশেষ অঞ্চলকে চিহ্নিত করতে ব্যবহার করা হয়, যাতে আপনাকে এই কোন অঞ্চলটির বিশেষ প্রক্রিয়া করা প্রয়োজন হয়েছের পরিচয় দেয়। এই ক্ষেত্রে, id অবজ্যেট এবং স্টিকি টিকিটগুলির মতোই। বিশেষ প্রক্রিয়া করার জন্য, আপনাকে এই বিশেষ id-এর সাহায্যে স্টাইল সূচীতে কিছু নিয়ম লিখতে হবে বা JavaScript ফাইলে কিছু কোড যোগ করতে হবে। যেমন, আপনার CSS ফাইলের মধ্যে কিছু নিয়ম আছে, যেগুলি শুধুমাত্র id-টি searchform-এর div-এর অন্তর্ভুক্ত উপাদানগুলির উপর লাগু হয়।

যখন একটি id অ্যাট্রিবিউট একটি বিশেষ স্পেক্ট্রামের কোনো কোনো CSS নিয়ম হিসাবে ব্যবহৃত হয়, তখন তা একটি CSS সিলেক্টর হিসাবে বলা হয়।বেশ কিছু সিলেক্টর রয়েছে]}সিলেক্টর তৈরিপদ্ধতি, কিন্তু id ব্যবহার করা ভালো এবং বেশ কিছু পদ্ধতি

id-এর শক্তি

id অ্যাট্রিবিউট অসাধারণভাবে শক্তিশালী।এটা নিম্নলিখিত ক্ষমতা প্রদান করে:

  • স্টাইল সফটওয়্যার পস্তুতকারক, আমরা কমপ্যাক্ট এবং সরলীকৃত XHTML তৈরি করতে পারি
  • প্রাচীন নাম মান্যতা হিসাবে ব্যবহৃত
  • ডমেইন ব্যবস্থার সাথে ব্যবহৃত একটি পদ্ধতি হিসাবে
  • একটি অবজেক্ট ইউনিটের নাম হিসাবে
  • একটি ব্যাপকভাবে ব্যবহৃত (জেনারেল পাপ্স) টুল (W3C-এর উদাহরণে, "ডাটা হলমেইল পেজ থেকে ডাটা প্রস্তুত করা, বা HTML ডকুমেন্টকে অন্য ফরম্যাটে রূপান্তর করা এমন ক্ষেত্রে, এটা একটি ডোমেইন পরিচিতা টুল হিসাবে ব্যবহৃত হয়。）

id-এর নিয়ম

id মান অবশ্যই অক্ষর বা হাইফেন দিয়ে শুরু করতে হবে; সংখ্যা দিয়ে শুরু করা চায় না।দুঃখের বিষয়, W3C পরীক্ষণ এই ত্রুটিকে ধরতে পারবে না, কিন্তু XML পার্সার এটা ধরতে পারবে।আরও, আপনি ফর্মের মধ্যে JavaScript-এর সাথে id-কে ব্যবহার করছেন তবে, id নাম এবং মানটি বৈধ JavaScript ভাবাবে হতে হবে।সমস্ত স্পেস এবং হাইফেন, বিশেষ করে হাইফেন, অনুমদিত নয়।এছাড়াও, class বা id নামের জন্য হাইফেন ব্যবহার একটি ভালো পদ্ধতি নয়, কারণ এটা CSS2.0 (এবং কিছু ব্রাউজার) এর পুরো পরিমাণে সীমাবদ্ধ।

সেম্যান্টিক ট্যাগ এবং ব্যবহারিকতা

এখন, আমরা ব্যাপকভাবে ব্যবহৃত XHTML তত্ত্বগুলির (বিশেষ করে div এবং id) নিয়ে আলোচনা করেছি, এখন আমরা এই সাইটের হোম পেজের উদাহরণ দেখতে চাই।প্রথমে এই সম্মুখদিকের মেনুটি পর্যালোচনা করাই,

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML শিক্ষা">HTML শিক্ষা</a></li>
<li id="x"><a href="/x.asp" title="XML শিক্ষা">XML শিক্ষা</a></li>
<li id="b"><a href="/b.asp" title="ব্রাউজার স্ক্রিপ্ট">ব্রাউজার স্ক্রিপ্ট</a></li>
<li id="s"><a href="/s.asp" title="সার্ভার স্ক্রিপ্ট">সার্ভার স্ক্রিপ্ট</a></li>
<li id="d"><a href="/d.asp" title="dot net টিউটোরিয়াল">dot net টিউটোরিয়াল</a></li>
<li id="m"><a href="/m.asp" title="মাল্টিমিডিয়া টিউটোরিয়াল">মাল্টিমিডিয়া টিউটোরিয়াল</a></li>
<li id="w"><a href="/w.asp" title="ওয়েবসাইট হান্ডবুক">ওয়েবসাইট হান্ডবুক</a></li>
</ul>
</div>

আমরা সাতটি লিঙ্ক আছি, যার প্রত্যেকটির জন্য একটি id একত্রিত করা হয়, যাতে যুক্ত কনটেন্টকে চিহ্নিত করা যায়: যেমন, h id-টি এইচটিএমএল টিউটোরিয়ালকে চিহ্নিত করে, আরও তারপর এইসব লিঙ্কগুলি menu নামক লিস্ট এলিমেন্টের মধ্যে আবৃত হয়, menu id-টি এই লিস্টটির কাজের দায়িত্বকে চিহ্নিত করে - একটি মেনু লিস্ট, এবং আরও বড় মাঝের div-টি, navfirst নামক, পৃষ্ঠার এই সেকশনটিকে চিহ্নিত করে, এটা মূল কনটেন্ট (maincontent), সাইডবার (sidebar) ও ফুটার (footer) প্রভৃতি এলিমেন্টগুলির থেকে পৃথক করে。

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

পরীক্ষা করুন, এইসব মার্কাপটি img ট্যাগটি নিহিত করে না, তাই width, height, background বা border প্রভৃতি প্রতিযোগী প্রতিশব্দ নেই। এটা সম্প্রতি ট্যাবেল সেলগুলির ব্যবহার করে না, যার ফলে, সংশ্লিষ্ট প্রতিযোগী প্রতিশব্দগুলির সমস্ত সমস্ত প্রতিশব্দগুলির ব্যবহার নেই। এটা অত্যন্ত সাফা ও ছোট এবং এটা তা বুঝাতে পারে, যার জন্য প্রয়োজন বোঝা যায়。

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

দৃষ্টিশক্তিময় পাঠকদের কাছে প্রকৃতপক্ষে, a মেম্বারে যা নিহিত টেক্সটটি ব্রাউজার দ্বারা প্রদর্শিত হয়নি, এটা কারণসমূহ কারণে এটা সুলভ হয়, এবং আমরা কিছু সুসংগঠিত CSS নিয়ে একটি ট্রিগারিং মেকানিজম নির্ধারণ করতে পারি, যখন ব্যবহারকারী গ্রাফিক্স ব্রাউজার ব্যবহার করেন, তারা সুন্দর নেভিগেশন বাটনগুলি দেখতে পাবেন, এবং যখন ব্যবহারকারী সংক্ষিপ্ত টেক্সট রিডার ব্যবহার করেন, তারা পূর্ণ টেক্সটটি পাবেন, এইভাবে, সব ব্যবহারকারীর কাছে নিজস্ব অনুভূতি একইভাবে থাকবে。

并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。