টেক্সট বেসিক

আপনার টেক্সট এডিটর যেমন <h1> থেকে <h6> হেডিং এবং টেক্সটের বিভিন্ন অংশকে অর্থপূর্ণ ও দৃশ্যমান উপায়ে ফরম্যাট করার অজস্র পদ্ধতি প্রদান করে, ঠিক তেমনি HTML-ও গদ্যের অর্থ তৈরির জন্য এক সেট শব্দার্থিক ও অ-শব্দার্থিক উপাদান সরবরাহ করে।

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

শিরোনাম, পুনঃপর্যালোচনা

ছয়টি সেকশন হেডিং এলিমেন্ট রয়েছে: <h1> , <h2> , <h3> , <h4> , <h5> এবং <h6> , যেখানে <h1> সবচেয়ে গুরুত্বপূর্ণ এবং <h6> সবচেয়ে কম গুরুত্বপূর্ণ। বহু বছর ধরে ডেভেলপারদের বলা হতো যে, ব্রাউজারগুলো ডকুমেন্টের রূপরেখা তৈরি করতে হেডিং ব্যবহার করে। এটি মূলত একটি লক্ষ্য ছিল, কিন্তু ব্রাউজারগুলো কখনও ডকুমেন্ট আউটলাইনিং ফিচারগুলো বাস্তবায়ন করেনি এবং প্রস্তাবিত আউটলাইন অ্যালগরিদমটি আনুষ্ঠানিকভাবে HTML স্পেসিফিকেশন থেকে সরিয়ে দেওয়া হয়। তবে, স্ক্রিন রিডার ব্যবহারকারীরা একটি পৃষ্ঠার বিষয়বস্তু সম্পর্কে জানতে অনুসন্ধানের কৌশল হিসেবে হেডিংয়ের উপর ব্যাপকভাবে নির্ভর করে এবং h কী ব্যবহার করে হেডিংগুলোর মধ্যে নেভিগেট করে। হেডিং লেভেলগুলো যৌক্তিকভাবে—যেমনটা আপনি একটি ডকুমেন্টের রূপরেখা তৈরি করেন—বাস্তবায়ন করা আপনার কন্টেন্টকে অ্যাক্সেসিবল করে তোলে এবং এটি জোরালোভাবে সুপারিশ করা হয়।

ডিফল্টরূপে, ব্রাউজারগুলো <h1> কে সবচেয়ে বড়, <h2> তার চেয়ে সামান্য ছোট এবং এর পরবর্তী প্রতিটি হেডিং লেভেলকে ডিফল্টরূপে ছোট করে স্টাইল করে। ঐতিহাসিকভাবে, ইউজার এজেন্ট স্টাইলশিটগুলো <article> , <aside> , <nav> , বা <section> এর মতো সেকশনিং এলিমেন্টের ভেতরে থাকা <h1> এলিমেন্টের ফন্ট সাইজও কমিয়ে দিত।

কিছু ইউজার এজেন্ট স্টাইলশীটে নেস্টেড <h1> এলিমেন্টগুলোকে নিম্নতর হেডিং লেভেলের মতো স্টাইল করার জন্য নিম্নলিখিত সিলেক্টরগুলো (বা অনুরূপ) অন্তর্ভুক্ত ছিল:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

তবে, অ্যাক্সেসিবিলিটি অবজেক্ট মডেল (AOM) এবং স্ক্রিন রিডারগুলো কখনোই নেস্টিংয়ের ওপর ভিত্তি করে হেডিং লেভেল পরিবর্তন করত না; একটি নেস্টেড <h1> হেডিংকে সবসময় "হেডিং, লেভেল ১" হিসেবেই দেখানো হতো। এর ফলে একটি অসামঞ্জস্য তৈরি হতো, যেখানে নেস্টেড হেডিংগুলো দেখতে ছোট মনে হলেও সহায়ক প্রযুক্তিগুলোর কাছে সেগুলো টপ-লেভেল হেডিং হিসেবেই থেকে যেত।

যেহেতু HTML স্পেসিফিকেশন থেকে ডকুমেন্ট আউটলাইন অ্যালগরিদম বাদ দেওয়া হয়েছে, ব্রাউজারগুলো এই পুরোনো ইউজার এজেন্ট স্টাইলশিট নিয়মগুলো সরিয়ে দিয়েছে। ফলে, নেস্টেড <h1> এলিমেন্টগুলো স্বয়ংক্রিয়ভাবে ছোট না হয়ে তাদের স্ট্যান্ডার্ড <h1> ফন্ট সাইজ ধরে রাখে।

ভিজ্যুয়াল স্টাইলিং বা কাঠামোগত ক্রমবিন্যাসের জন্য সেকশনিং এলিমেন্টের ভিতরে <h1> এলিমেন্ট নেস্ট করার উপর নির্ভর করবেন না। সর্বদা ডকুমেন্টের কাঠামোর উপর ভিত্তি করে ক্রমানুসারে হেডিং এলিমেন্ট ( <h1> থেকে <h6> ) ব্যবহার করে আপনার কন্টেন্ট মার্ক আপ করুন। এটি নিশ্চিত করে যে আপনার কন্টেন্ট সার্চ ইঞ্জিন, স্ক্রিন রিডার এবং ভবিষ্যৎ রক্ষণাবেক্ষণকারীদের কাছে স্পষ্ট ও সহজবোধ্য থাকবে।

শিরোনাম ছাড়া, বেশিরভাগ কাঠামোগত লেখা একাধিক অনুচ্ছেদ দিয়ে গঠিত হয়। HTML-এ, অনুচ্ছেদগুলো <p> ট্যাগ দিয়ে চিহ্নিত করা হয়; বন্ধনী ট্যাগটি ঐচ্ছিক হলেও ব্যবহার করার পরামর্শ দেওয়া হয়।

#about সেকশনটিতে একটি শিরোনাম এবং কয়েকটি প্যারাগ্রাফ রয়েছে:

এই সেকশনটি একটি ল্যান্ডমার্ক নয়, কারণ এটির কোনো অ্যাক্সেসিবল নাম নেই। এটিকে একটি region (যা একটি ল্যান্ডমার্ক রোল) পরিণত করতে, আপনি aria-labelledby ব্যবহার করে অ্যাক্সেসিবল নামটি প্রদান করতে পারেন:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

শুধুমাত্র প্রয়োজন হলেই ল্যান্ডমার্ক তৈরি করুন। অতিরিক্ত ল্যান্ডমার্ক থাকলে তা স্ক্রিন রিডার ব্যবহারকারীদের জন্য দ্রুত বিভ্রান্তিকর হয়ে উঠতে পারে।

উদ্ধৃতি এবং তথ্যসূত্র

কোনো আর্টিকেল বা ব্লগ পোস্ট মার্ক আপ করার সময়, আপনি দৃশ্যমান সাইটেশন সহ বা ছাড়াই একটি উদ্ধৃতি বা পুল-কোট অন্তর্ভুক্ত করতে চাইতে পারেন। এই তিনটি উপাদানের জন্য এলিমেন্ট রয়েছে: দৃশ্যমান সাইটেশনের জন্য <blockquote> , <q> , এবং <cite> , অথবা সার্চের জন্য আরও তথ্য প্রদানের জন্য cite অ্যাট্রিবিউট।

#feedback সেকশনটিতে একটি হেডার এবং তিনটি রিভিউ রয়েছে; এই রিভিউগুলো হলো ব্লককোট, যার কয়েকটিতে উদ্ধৃতি রয়েছে এবং এরপরে উদ্ধৃতিটির সূত্র উল্লেখ করা একটি প্যারাগ্রাফ আছে। জায়গা বাঁচানোর জন্য তৃতীয় রিভিউটি বাদ দিলে, মার্কআপটি হবে নিম্নরূপ:

উদ্ধৃতির লেখকের তথ্য বা সাইটেশন, উদ্ধৃতির অংশ নয় এবং তাই <blockquote> এর মধ্যে থাকে না, বরং উদ্ধৃতির পরে আসে। যদিও সাধারণ অর্থে এগুলোকে সাইটেশন বলা হয়, কিন্তু এগুলো আসলে কোনো নির্দিষ্ট উৎসকে নির্দেশ করে না, তাই এগুলোকে একটি <p> প্যারাগ্রাফ এলিমেন্টের মধ্যে রাখা হয়।

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

যদিও আমরা প্রতিটি ব্লককোটের পরের অনুচ্ছেদে উদ্ধৃতির তথ্য দিয়েছি, আগে দেখানো উদ্ধৃতিগুলো এভাবে কোড করা হয়েছে কারণ সেগুলো কোনো বাহ্যিক উৎস থেকে নেওয়া হয়নি। যদি তা হতো, তাহলে উৎসটি উল্লেখ করা যেতে পারে (করা উচিত?)।

যদি রিভিউটি কোনো রিভিউ ওয়েবসাইট, বই বা অন্য কোনো কাজ থেকে নেওয়া হয়, তাহলে উৎসের শিরোনামের জন্য <cite> এলিমেন্টটি ব্যবহার করা যেতে পারে। <cite> এর ভেতরের বিষয়বস্তু হতে পারে কোনো বইয়ের শিরোনাম, কোনো ওয়েবসাইট বা টিভি অনুষ্ঠানের নাম, এমনকি কোনো কম্পিউটার প্রোগ্রামের নামও। উৎসটি প্রসঙ্গক্রমে উল্লেখ করা হোক বা উদ্ধৃত বা রেফারেন্স হিসেবে ব্যবহার করা হোক, উভয় ক্ষেত্রেই <cite> এনক্যাপসুলেশনটি ব্যবহার করা যায়। <cite> এর বিষয়বস্তু হলো কাজটি, লেখক নন।

যদি ব্লেন্ডান স্মুথের উদ্ধৃতিটি তার অফলাইন ম্যাগাজিন থেকে নেওয়া হতো, তাহলে আপনি ব্লককোটটি এভাবে লিখতেন:

<cite> সাইটেশন এলিমেন্টের কোনো অন্তর্নিহিত রোল নেই এবং এর অ্যাক্সেসিবল নামটি এর ভেতরের কন্টেন্ট থেকে নেওয়া উচিত; কোনো aria-label অন্তর্ভুক্ত করবেন না।

যখন আপনি কোনো কন্টেন্ট দৃশ্যমান করতে পারেন না, তখন যথাযথ কৃতিত্ব দেওয়ার জন্য cite অ্যাট্রিবিউটটি রয়েছে। এই অ্যাট্রিবিউটের ভ্যালু হিসেবে উদ্ধৃত তথ্যের উৎস ডকুমেন্ট বা মেসেজের URL-টি গ্রহণ করতে হয়। এই অ্যাট্রিবিউটটি <q> এবং <blockquote> উভয়ের ক্ষেত্রেই প্রযোজ্য। যদিও এটি একটি URL, এটি মেশিন দ্বারা পাঠযোগ্য কিন্তু পাঠকের কাছে দৃশ্যমান নয়।

যদিও </p> ক্লোজিং ট্যাগটি ঐচ্ছিক (এবং সর্বদা ব্যবহার করার পরামর্শ দেওয়া হয়), </blockquote> ক্লোজিং ট্যাগটি সর্বদা আবশ্যক।

বেশিরভাগ ব্রাউজার <blockquote> ইনলাইন উভয় দিকেই প্যাডিং যোগ করে এবং <cite> কন্টেন্টকে ইটালিক করে; এটি CSS দিয়ে নিয়ন্ত্রণ করা যায়। <blockquote> উদ্ধৃতি চিহ্ন যোগ করে না, কিন্তু CSS-জেনারেটেড কন্টেন্টের মাধ্যমে তা যোগ করা যায়। <q> এলিমেন্টটি ডিফল্টভাবেই ভাষা-উপযোগী উদ্ধৃতি চিহ্ন ব্যবহার করে উদ্ধৃতি চিহ্ন যোগ করে।

#teachers বিভাগে, হ্যালকে উদ্ধৃত করে বলা হয়েছে, "আমি দুঃখিত।" কিন্তু আমি দুঃখিত, আমি তা করতে পারব না।" ইংরেজি এবং ফরাসি ভাষায় এর কোডটি হলো:

ইনলাইন উদ্ধৃতি চিহ্ন উপাদান, <q> , ভাষা-উপযোগী উদ্ধৃতি চিহ্ন যোগ করে। ইউজার-এজেন্টের ডিফল্ট স্টাইলগুলোর মধ্যে ওপেন-কোট এবং ক্লোজ-কোট দ্বারা তৈরি কন্টেন্ট অন্তর্ভুক্ত থাকে:

q::before {content: open-quote;}
q::after {content: close-quote;}

` lang অ্যাট্রিবিউটটি ব্রাউজারকে এটা জানানোর জন্য অন্তর্ভুক্ত করা হয় যে, যদিও <html lang="en-US"> ওপেনিং ট্যাগে পেজটির মূল ভাষা ইংরেজি হিসেবে নির্ধারণ করা হয়েছিল, এই অনুচ্ছেদটি একটি ভিন্ন ভাষায় লেখা। এটি সিরি, অ্যালেক্সা এবং ভয়েসওভারের মতো ভয়েস কন্ট্রোলগুলোকে ফরাসি উচ্চারণ ব্যবহার করতে সাহায্য করে। এটি ব্রাউজারকে এটাও জানিয়ে দেয় যে কোন ধরনের উদ্ধৃতি চিহ্ন রেন্ডার করতে হবে।

<blockquote> এর মতো, <q> এলিমেন্টটিও cite অ্যাট্রিবিউট সমর্থন করে।

এইচটিএমএল সত্তা

আপনি হয়তো এস্কেপ সিকোয়েন্স বা ‘এনটিটি’ লক্ষ্য করেছেন। যেহেতু HTML-এ < ব্যবহৃত হয়, তাই এটিকে হয় < অথবা তুলনামূলকভাবে কম মনে রাখার মতো এনকোডিং < ব্যবহার করে এস্কেপ করতে হয়। HTML-এ চারটি সংরক্ষিত এনটিটি রয়েছে: < , > , & , এবং " । এদের ক্যারেক্টার রেফারেন্সগুলো হলো যথাক্রমে < , > , & এবং " ।

আরও কয়েকটি সত্তা যা আপনি প্রায়শই ব্যবহার করবেন তা হলো কপিরাইট (©)-এর জন্য © ট্রেডমার্ক (™)-এর জন্য ™ এবং নন-ব্রেকিং স্পেস-এর জন্য   যখন আপনি দুটি অক্ষর বা শব্দের মধ্যে একটি ফাঁকা স্থান রাখতে চান কিন্তু সেখানে লাইন ব্রেক হওয়া আটকাতে চান, তখন নন-ব্রেকিং স্পেস কাজে আসে। ২,০০০-এরও বেশি নামযুক্ত ক্যারেক্টার রেফারেন্স রয়েছে। কিন্তু, প্রয়োজনে, ইমোজি সহ প্রতিটি অক্ষরেরই একটি এনকোডেড সমতুল্য রয়েছে যা &# দিয়ে শুরু হয়।

আপনি যদি ToastyMcToastface-এর ওয়ার্কশপ রিভিউটি দেখেন (যা উপরের কোড স্যাম্পলে অন্তর্ভুক্ত নয়), তাহলে সেখানে কিছু অস্বাভাবিক টেক্সট ক্যারেক্টার দেখতে পাবেন:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

এই ব্লককোটের শেষ বাক্যটি এভাবেও লেখা যেতে পারে:

This has no&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

এই কোডের জটে কিছু আন-এসকেপড ক্যারেক্টার এবং কিছু নামযুক্ত ক্যারেক্টার রেফারেন্স রয়েছে। যেহেতু ক্যারেক্টার সেটটি UTF-8, তাই এই উদাহরণের মতো ব্লককোটের শেষের কয়েকটি ক্যারেক্টারকে আসলে এসকেপ করার প্রয়োজন নেই। শুধুমাত্র ক্যারেক্টার সেট দ্বারা সমর্থিত নয় এমন ক্যারেক্টারগুলোকেই এসকেপ করতে হবে। প্রয়োজনে, বিভিন্ন ক্যারেক্টার এসকেপ করার জন্য অনেক টুল রয়েছে, অথবা আপনি <head> ট্যাগে <meta charset="UTF-8"> অন্তর্ভুক্ত করা নিশ্চিত করতে পারেন।

এমনকি আপনি ক্যারেক্টার সেট হিসেবে UTF-8 নির্দিষ্ট করে দিলেও, স্ক্রিনে < অক্ষরটি প্রিন্ট করার জন্য আপনাকে অবশ্যই এটিকে এস্কেপ করতে হবে। সাধারণত, > , " , বা & জন্য নেমড ক্যারেক্টার রেফারেন্স অন্তর্ভুক্ত করার প্রয়োজন হয় না; কিন্তু আপনি যদি HTML এনটিটি নিয়ে কোনো টিউটোরিয়াল লিখতে চান, তাহলে কাউকে < কোড করা শেখানোর সময় আপনাকে অবশ্যই < লিখতে হবে। 😀

ওহ, আর ওই স্মাইলি ইমোজিটা হলো 😀 , কিন্তু এই ডকুমেন্টটি UTF-8 হিসেবে ঘোষিত, তাই এটিকে এস্কেপ করা হয়নি।