অন্যান্য ইনলাইন টেক্সট উপাদান

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

লিঙ্ক এবং <a> এলিমেন্ট নিয়ে একটি মডিউল রয়েছে। বাকি এলিমেন্টগুলো এখানে সংক্ষেপে আলোচনা করা হলো।

কোডের উদাহরণ এবং প্রযুক্তিগত লেখা

কোডের উদাহরণ নথিভুক্ত করার সময় <code> এলিমেন্ট ব্যবহার করুন। ডিফল্টরূপে, টেক্সট কন্টেন্টটি মনোস্পেস ফন্টে প্রদর্শিত হয়। একাধিক লাইনের কোড অন্তর্ভুক্ত করার সময়, <code> এলিমেন্টটিকে একটি <pre> এলিমেন্টের ভিতরে রাখুন, যা প্রি-ফরম্যাটেড টেক্সট বোঝায়।

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

<data> এলিমেন্ট কোনো একটি নির্দিষ্ট কন্টেন্টকে তার মেশিন-পঠ্য অনুবাদের সাথে সংযুক্ত করে। এলিমেন্টটির ' value ' অ্যাট্রিবিউটটি এর কন্টেন্টের মেশিন-পঠ্য অনুবাদ প্রদান করে। যদি <data> এলিমেন্টের কন্টেন্ট সময় বা তারিখ-সম্পর্কিত হয়, তবে এর পরিবর্তে অবশ্যই <time> এলিমেন্ট ব্যবহার করতে হবে, যা একটি নির্দিষ্ট সময়কালকে নির্দেশ করে।

<time> এলিমেন্টে datetime অ্যাট্রিবিউট অন্তর্ভুক্ত করে মেশিন-পঠনযোগ্য ফরম্যাটে মানুষের জন্য সহজবোধ্য সময় ও তারিখ প্রদান করা যায়। datetime অ্যাট্রিবিউটটি মেশিন-পঠনযোগ্য, যা ক্যালেন্ডার এবং সার্চ ইঞ্জিনের মতো অ্যাপ্লিকেশনগুলির জন্য প্রয়োজনীয় তথ্য সরবরাহ করে।

কোনো প্রোগ্রাম থেকে নমুনা আউটপুট দেওয়ার সময়, টেক্সটটিকে <samp> এলিমেন্টের মধ্যে রাখুন। ব্রাউজার সাধারণত এই নমুনা বা উদ্ধৃত আউটপুটটিকেও মনোস্পেসড ফন্টে রেন্ডার করে।

কিবোর্ডের মাধ্যমে নির্দেশনা দেওয়ার সময় <kbd> এলিমেন্টটি ব্যবহার করা যেতে পারে। এটি কিবোর্ড, ভয়েস ইনপুট বা অন্য যেকোনো টেক্সট এন্ট্রি ডিভাইসের মাধ্যমে দেওয়া টেক্সচুয়াল ইউজার ইনপুটকে বোঝায়।

<var> এলিমেন্টটি গাণিতিক রাশিমালা বা প্রোগ্রামিং ভেরিয়েবলের জন্য ব্যবহার করা যায়। বেশিরভাগ ব্রাউজার চারপাশের ফন্টের ইটালিক সংস্করণে টেক্সট কন্টেন্ট প্রদর্শন করে। যদি প্রচুর পরিমাণে গাণিতিক বিষয় লিখতে হয়, তবে গাণিতিক সংকেত বর্ণনার জন্য XML ভিত্তিক ম্যাথমেটিক্যাল মার্কআপ ল্যাঙ্গুয়েজ MathML ব্যবহার করার কথা বিবেচনা করতে পারেন।

পিথাগোরাসের উপপাদ্যে দুই-এর ঘাত বোঝাতে <sup> সুপারস্ক্রিপ্ট এলিমেন্টটি ব্যবহৃত হয়। এর অনুরূপ একটি <sub> সাবস্ক্রিপ্ট এলিমেন্ট রয়েছে, যা ইনলাইন টেক্সটকে নির্দেশ করে, যা শুধুমাত্র টাইপোগ্রাফিক কারণে সাবস্ক্রিপ্ট হিসেবে প্রদর্শিত হওয়া উচিত। সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট হলো সংখ্যা, অঙ্ক, প্রতীক বা অন্যান্য টীকা, যা সাধারণ টাইপ লাইনের চেয়ে ছোট হয় এবং যথাক্রমে লাইনের সামান্য উপরে বা নিচে স্থাপন করা হয়।

মুছে ফেলা বা "ডিলিট" করা টেক্সট বোঝাতে <del> ব্যবহার করুন। ঐচ্ছিকভাবে, পরিবর্তনটি ব্যাখ্যা করে এমন রিসোর্সের সাইট সেট এবং মেশিন-রিডেবল ডেট ও টাইম ফরম্যাটে তারিখ অথবা তারিখ ও সময় সহ cite অ্যাট্রিবিউট অন্তর্ভুক্ত করুন। কোনো কন্টেন্ট আর প্রাসঙ্গিক না থাকলেও ডকুমেন্ট থেকে প্রকৃতপক্ষে মুছে ফেলা হয়নি, তা বোঝাতে স্ট্রাইকথ্রু এলিমেন্ট, <s> , ব্যবহার করা যেতে পারে datetime

<ins> এলিমেন্টটি <del> এলিমেন্টের বিপরীত। এই এলিমেন্টটি নতুন যোগ করা বা "সন্নিবেশিত" টেক্সট বোঝাতে ব্যবহৃত হয়, যেখানে ঐচ্ছিকভাবে cite বা datetime অ্যাট্রিবিউট অন্তর্ভুক্ত থাকতে পারে।

সংজ্ঞা এবং ভাষা সহায়তা

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

এই নিয়মের ব্যতিক্রম হলো যদি পরিভাষাটি পাঠকের কাছে সুপরিচিত বলে ধরে নেওয়া হয়, যেমন এই সিরিজে HTML এবং CSS ।

যখন কোনো পরিভাষা সংজ্ঞায়িত করা হয় যা কোনো সংক্ষিপ্ত রূপ বা আদ্যক্ষর নয়, তখন তার পারিপার্শ্বিক বিষয়বস্তুর মধ্যে সংজ্ঞায়িত পরিভাষাটিকে চিহ্নিত করতে definition <dfn> এলিমেন্টটি ব্যবহার করুন।

সংজ্ঞায়িত করা পরিভাষাটি যদি তার চারপাশের লেখার ভাষার সাথে না মেলে, তাহলে ভাষাটি শনাক্ত করার জন্য অবশ্যই lang অ্যাট্রিবিউটটি যোগ করুন।

বিভিন্ন দিকনির্দেশক ভাষা লেখার সময়, HTML সম্ভাব্য দ্বিমুখী টেক্সটকে তার চারপাশের টেক্সট থেকে বিচ্ছিন্নভাবে দেখানোর জন্য <bdi> এলিমেন্ট প্রদান করে। এই আন্তর্জাতিকীকরণ এলিমেন্টটি বিশেষভাবে উপযোগী যখন অজানা দিকনির্দেশকতার কন্টেন্ট গতিশীলভাবে পৃষ্ঠায় যুক্ত করা হয়। <bdo> এলিমেন্ট টেক্সটের বর্তমান দিকনির্দেশকে অগ্রাহ্য করে টেক্সটকে একটি ভিন্ন দিকে রেন্ডার করে। W3C দ্বিমুখী অ্যালগরিদম সম্পর্কে একটি পরিচিতি প্রদান করে।

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

যেসব ব্রাউজার <ruby> প্রদর্শন সমর্থন করে না, তাদের জন্য শুরুর ও শেষের বন্ধনী ধারণ করতে স্পেসিফিকেশনে রুবি প্যারেন্থেসিস ( <rp> ) অন্তর্ভুক্ত করা হয়েছিল। যখন ব্রাউজারগুলো <ruby> সমর্থন করে, যা সব এভারগ্রিন ব্রাউজারই করে থাকে, তখন কোনো <rp> এলিমেন্টের বিষয়বস্তু প্রদর্শিত হয় না। রুবি টেক্সট এলিমেন্ট ( <rt> ) প্রকৃত অ্যানোটেশনগুলো ধারণ করে। এই দুটিই <ruby> এর ভেতরে নেস্টেড থাকে।

উল্লেখ্য যে, আপনার ব্রাউজার <ruby> সমর্থন করলে বন্ধনীগুলো দেখা যাবে না।

পাঠ্যের উপর জোর দিন

টেক্সটকে জোর দেওয়ার জন্য শব্দার্থগত কারণের উপর ভিত্তি করে বিভিন্ন উপাদান ব্যবহার করা যেতে পারে (উপস্থাপনাগত কারণে নয়, কারণ সেটি CSS-এর কাজ)।

• কোনো বিষয়বস্তুর অংশকে গুরুত্ব বা জোর দেওয়ার জন্য <em> এলিমেন্টটি ব্যবহার করুন। <em> এলিমেন্টটি নেস্টেড বা স্তরীভূত হতে পারে, এবং প্রতিটি নেস্টিং স্তর অধিকতর গুরুত্ব নির্দেশ করে। এই এলিমেন্টটির একটি অর্থগত তাৎপর্য রয়েছে এবং এটি স্ক্রিন রিডার, অ্যালেক্সা ও সিরির মতো শ্রবণ-ভিত্তিক ইউজার এজেন্টদের কোনো বিষয়ের ওপর জোর দেওয়ার জন্য নির্দেশ দিতে ব্যবহার করা যায়।
• কোনোভাবে প্রাসঙ্গিক টেক্সট শনাক্ত বা হাইলাইট করতে <mark> এলিমেন্টটি ব্যবহার করুন, যেমন সার্চ রেজাল্টে সার্চ টার্মের উপস্থিতি হাইলাইট (বা "মার্ক") করা। এর ফলে মার্ক করা কন্টেন্টকে কোনো বাড়তি গুরুত্ব বা জোর না দিয়েই দ্রুত শনাক্ত করা যায়।
• <strong> এলিমেন্টটি কোনো লেখাকে অত্যন্ত গুরুত্বপূর্ণ হিসেবে চিহ্নিত করে। ব্রাউজারগুলো সাধারণত এই লেখাটিকে অপেক্ষাকৃত ভারী ফন্ট ওয়েট দিয়ে প্রদর্শন করে।
• <cite> এলিমেন্ট, যা টেক্সট বেসিকস -এ আলোচনা করা হয়েছে, বই, প্রবন্ধ বা অন্যান্য সৃজনশীল কাজের শিরোনাম চিহ্নিত করতে অথবা এগুলোর জন্য সংক্ষিপ্ত রেফারেন্স বা সাইটেশন মেটাডেটা, যেমন বইয়ের ISBN নম্বর, উল্লেখ করতে ব্যবহৃত হয়।

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

<i>

<i> এলিমেন্টটি প্রযুক্তিগত পরিভাষা, বিদেশী শব্দ ( lang অ্যাট্রিবিউটের মাধ্যমে ভাষা চিহ্নিত করে), চিন্তাভাবনা বা জাহাজের নামের জন্য ব্যবহার করা যেতে পারে। এই এলিমেন্টটি নির্দিষ্ট কারণে, যেমন বাগধারা, প্রযুক্তিগত পরিভাষা এবং শ্রেণিবিন্যাসগত পদবি বোঝাতে, ইনলাইন কন্টেন্টকে চারপাশের টেক্সট থেকে আলাদা করতে ব্যবহৃত হয়।

টেক্সট ইটালিক করতে এই এলিমেন্টটি ব্যবহার করা উচিত নয়।

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

<i> এলিমেন্টের ডিফল্ট স্টাইল হলো এলিমেন্টটিকে ইটালিক ফন্টে রেন্ডার করা। এই উদাহরণে, আমরা font-style: normal সেট করেছি, কারণ ব্যবহৃত অক্ষরগুলো ইটালিক ফন্টে পাওয়া যায় না।

<u>

<u> এলিমেন্টটি এমন কন্টেন্টের জন্য ব্যবহৃত হয় যেখানে টেক্সট-বহির্ভূত টীকা থাকে। উদাহরণস্বরূপ, আপনি হয়তো জেনেবুঝে ভুল বানান করা শব্দে টীকা যোগ করতে চাইতে পারেন। ডিফল্টভাবে, কন্টেন্টের নিচে দাগ দেওয়া থাকে, কিন্তু এটি CSS দিয়ে নিয়ন্ত্রণ করা যায়; যেমন, ওয়ার্ড প্রসেসরের ব্যাকরণগত ভুলের নির্দেশকের অনুকরণে একটি লাল ঢেউখেলানো দাগ যোগ করা যেতে পারে।

<p>I always spell <u>licence</u> wrong</p>

<b>

অন্যথায় গুরুত্বপূর্ণ নয় এমন লেখার প্রতি দৃষ্টি আকর্ষণ করার জন্য <b> এলিমেন্ট ব্যবহার করা যেতে পারে। এই এলিমেন্টটি কোনো বিশেষ অর্থ প্রকাশ করে না এবং শুধুমাত্র তখনই ব্যবহার করা উচিত যখন এই অংশের অন্য কোনো এলিমেন্ট উদ্দেশ্য পূরণে উপযুক্ত নয়। কোনো উদাহরণ দেওয়া হয়নি কারণ আমি এর কোনো উপযুক্ত ব্যবহার খুঁজে পাইনি; এই এলিমেন্টটি এতটাই "শেষ অবলম্বন" হিসেবে ব্যবহৃত হয়।

ফাঁকা স্থান

যখন আপনি লাইন ব্রেক চান, যেমন কবিতা বা কোনো ঠিকানা লেখার সময়, তখন ক্যারেজ-রিটার্ন যোগ করার জন্য সেলফ-ক্লোজিং লাইন ব্রেক এলিমেন্ট, <br> , ব্যবহার করা হয়।

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

অপ্রাসঙ্গিক বিষয়বস্তুর বিভিন্ন অংশের মধ্যে, যেমন একটি বইয়ের অধ্যায়গুলোর মধ্যে অথবা ৫,০০০ শব্দের দীর্ঘ বক্তৃতা এবং আপনার ব্যবহারকারীরা আসলে যে রেসিপিটি খুঁজছেন তার মধ্যে, একটি বিভাজক বা বিষয়ভিত্তিক বিরতি তৈরি করতে একটি <hr> এলিমেন্ট অন্তর্ভুক্ত করুন। HR-এর পূর্ণরূপ হলো "হরাইজন্টাল রুল" বা "অনুভূমিক রেখা"। যদিও ব্রাউজারগুলো সাধারণত একটি অনুভূমিক রেখা প্রদর্শন করে, এই এলিমেন্টটির একটি অর্থগত তাৎপর্য রয়েছে। এর ডিফল্ট ভূমিকা হলো separator ।

HTML-এ এমন একটি এলিমেন্টও আছে যা দিয়ে শব্দ ভাঙা যায়। সেলফ-ক্লোজিং <wbr> এলিমেন্টটি ব্রাউজারকে এই ইঙ্গিত দেয় যে, যদি কোনো শব্দ তার কন্টেইনারের বাইরে চলে যাওয়ার সম্ভাবনা থাকে, তবে ব্রাউজার চাইলে সেই স্থানে লাইনটি ভাঙতে পারে। এটি সাধারণত দীর্ঘ URL-এর মধ্যে শব্দগুলোর মাঝে লাইন ভাঙতে ব্যবহৃত হয়। এটি কোনো হাইফেন যোগ করে না।

উদাহরণস্বরূপ, হালের জীবনীতে বাইট কোডে লেখা কিছু টেক্সট আছে, যেখানে প্রতিটি বাইট একটি স্পেস দিয়ে আলাদা করা। বাইট কোডে কোনো স্পেস থাকে না। যদি লাইন র‍্যাপ করার প্রয়োজন হয়, তবে বাইট কোডের একটি দীর্ঘ স্ট্রিংকে শুধুমাত্র বাইটের মাঝখানে ভাঙার জন্য, আমরা প্রতিটি ব্রেকের সুযোগে <wbr> এলিমেন্টটি অন্তর্ভুক্ত করি:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br> , <hr> , এবং <wbr> এলিমেন্টগুলো সবই ভয়েড এলিমেন্ট, অর্থাৎ এদের কোনো চাইল্ড নোড থাকতে পারে না – তা নেস্টেড এলিমেন্ট হোক বা টেক্সট। যেহেতু এগুলোর কোনোটিরই ভেতরে কন্টেন্ট সংরক্ষণের জন্য কোনো অংশ নেই, তাই এদের কোনো এন্ড ট্যাগও নেই।

আপনার বোধগম্যতা যাচাই করুন

ইনলাইন টেক্সট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।