টেক্সট-সম্পর্কিত ট্যাগগুলি

এই প্রবন্ধটি টেক্সট-সম্পর্কিত ট্যাগগুলির ব্যাখ্যা দেয়।

বর্ণনাটি অর্থবোধক এবং অঅর্থবোধক ট্যাগগুলিতে ভাগ করা হয়েছে।

YouTube Video

প্রিভিউ এর জন্য সিএসএস তৈরি করা

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

মৌলিক টেক্সট-সম্পর্কিত ট্যাগগুলি

<div> ট্যাগ

1<div>This is a division of content.</div>

• <div> ট্যাগ একটি ব্লক-লেভেল এলিমেন্ট যা এইচটিএমএল এর ভিতরে বিভাগ তৈরির জন্য ব্যবহার করা হয়।

• <div> ট্যাগ একটি অ-অর্থবোধক ট্যাগ।

  যখন সামান্যিক এইচটিএমএল-এ মনোনিবেশ করা হয়, তখন অর্থবহ ট্যাগগুলি (যেমন <section>, <article>) ব্যবহার করা যেতে পারে। এর ফলে সার্চ ইঞ্জিন এবং স্ক্রীন রিডার পৃষ্ঠার বিষয়বস্তু আরও ভালভাবে বুঝতে পারে।

• সিএসএস এবং জাভাস্ক্রিপ্টের সাথে এটি মিলিয়ে, আপনি পৃষ্ঠার চেহারা এবং আচরণ নিয়ন্ত্রণ করতে পারেন।

  <div> ট্যাগটি একটি পৃষ্ঠায় বিষয়বস্তু ব্লক-স্তরের উপাদান হিসাবে গঠিত করতে ব্যবহৃত হয়। এটি প্রধানত সিএসএস এবং জাভাস্ক্রিপ্টের সাথে মিলিত হয়ে পৃষ্ঠা বিন্যাস, শৈলী এবং উপাদানগুলি নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

<p> ট্যাগ

1<p>This is a paragraph of text.</p>

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

<a> ট্যাগ

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a> ট্যাগটি লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

  <a> ট্যাগটি অন্যান্য পৃষ্ঠায়, বাহ্যিক সাইট বা ফাইলের লিঙ্ক তৈরি করতে ব্যবহৃত হয়। href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য নির্ধারণ করতে ব্যবহৃত হয়।

• এটি টেক্সট বা চিত্র লিঙ্কের জন্য ব্যবহার করা যেতে পারে, এবং target="_blank" ব্যবহার করলে লিঙ্কটি একটি নতুন ট্যাবে খোলা হবে।

• target অ্যাট্রিবিউটটি কোন লিঙ্ক করা লক্ষ্য স্থান কীভাবে প্রদর্শিত হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।

  • _self (ডিফল্ট): বর্তমান উইন্ডো বা ট্যাবে লিঙ্কটি খুলবে।
  • _blank: নতুন উইন্ডো বা ট্যাবে লিঙ্কটি খুলবে।
  • _parent: প্যারেন্ট ফ্রেমে লিঙ্কটি খুলবে।
  • _top: পূর্ণ উইন্ডোতে লিঙ্কটি খুলবে, কোনো ফ্রেম উপেক্ষা করে।

• title অ্যাট্রিবিউটটি একটি লিঙ্কে টুলটিপ প্রদর্শন করতে ব্যবহৃত হয়। যখন একজন ব্যবহারকারী লিঙ্কের উপর মাউস করেন, তখন নির্দিষ্ট টাইটেলটি প্রদর্শিত হয়।

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a> ট্যাগটি একই পৃষ্ঠার নির্দিষ্ট স্থানে যাওয়ার জন্যও ব্যবহৃত হয়। এটি অর্জনের জন্য, আপনি লক্ষণীয় উপাদানে একটি id অ্যাট্রিবিউট নিয়ম করে এবং লিঙ্কের href অ্যাট্রিবিউটে এই id ব্যবহার করেন।

<span> ট্যাগ

1Here is some <span style="color: red;">highlighted text

• <span> ট্যাগটি একটি ইনলাইন উপাদান।

  <span> ট্যাগটি একটি ইনলাইন এলিমেন্ট, সুতরাং এটি টেক্সট, লিঙ্ক, ইমেজ বা অন্যান্য ইনলাইন এলিমেন্টের মধ্যে ব্যবহার করা হলে লাইন ভাঙে না। এটি পৃষ্ঠার প্রবাহে স্বাভাবিকভাবে মিলে যায়।

• আপনি নির্দিষ্ট স্টাইল আংশিকভাবে প্রয়োগ করতে পারেন।

  যখন আপনি কেবলমাত্র কোনো নথির একটি অংশে স্টাইল প্রয়োগ করতে চান, তখন আপনি <span> ট্যাগটি ব্যবহার করে একটি CSS ক্লাস বা ID অ্যাসাইন করতে পারেন এবং নির্দিষ্ট পরিসরে স্টাইল প্রয়োগ করতে পারেন।

• <span> ট্যাগটি একটি অ-সেমান্টিক উপাদান।

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

<br> ট্যাগ

1Here is some text with a <br> line break.

• <br> ট্যাগটি একটি ইনলাইন উপাদান।

  <br> ট্যাগটি একটি ইনলাইন এলিমেন্ট হওয়ায় এটি পুরো ব্লক দখল করে না, এবং এটি যেখানে স্থাপন করা হয় সেখানে টেক্সটে একটি লাইন ব্রেক তৈরি করে। <p> ট্যাগটি প্যারাগ্রাফের উপরে এবং নিচে মার্জিন যোগ করে আলাদা করে, <br> ট্যাগটি কোনো মার্জিন না যোগ করেই একটি লাইন ব্রেক তৈরি করে।

• এটি একটি স্ব-বন্ধকারী ট্যাগ, তাই বন্ধকারী ট্যাগ (</br>) প্রয়োজন হয় না।

• এটি অতিরিক্ত ব্যবহার এড়ানো উত্তম, এবং প্যারাগ্রাফ ব্রেক বা লেআউট সমন্বয়ের জন্য <p> ট্যাগ বা CSS ব্যবহার করা উচিত।

  যখন টেক্সটকে প্যারাগ্রাফে সংগঠিত করা হয়, তখন <p> ট্যাগ ব্যবহার করা আরও উপযুক্ত। লেআউট সামঞ্জস্যের জন্য CSS ব্যবহার করার পরামর্শ দেওয়া হয়। উদাহরণস্বরূপ, CSS-এ white-space প্রপার্টি ব্যবহার করে টেক্সটে প্রদর্শিত লাইন ব্রেক এবং স্পেসগুলি যেমন আছে তেমনই প্রদর্শন করা যেতে পারে।

<hr> ট্যাগ

1This is some text.<hr>This is another section of text.

• <hr> ট্যাগটি একটি ব্লক লেভেল এলিমেন্ট।

  <hr> ট্যাগটি একটি অনুভূমিক লাইন ঢোকানোর জন্য ব্যবহার করা হয় যা বিষয়বস্তুর বিভিন্ন অংশকে দৃশ্যত আলাদা করে। এটি একটি থিম্যাটিক বিরতি নির্দেশ করতে ব্যবহার করা যেতে পারে, যা প্রসঙ্গে ভিত্তিতে অর্থ প্রদান করে।

• এটি একটি স্ব-বন্ধ ট্যাগ, তাই একটি ক্লোজিং ট্যাগ (</hr>) প্রয়োজন হয় না।

• আপনি CSS ব্যবহার করে এর রং, দৈর্ঘ্য এবং পুরুত্ব কাস্টমাইজ করতে পারেন।

সেমান্টিক টেক্সট সম্পর্কিত ট্যাগ

<h1> ট্যাগ থেকে <h6> ট্যাগ

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• <h1> থেকে <h6> ট্যাগগুলি HTML-এ ব্যবহার করা হয় এর শিরোনাম ট্যাগ হিসাবে।

  <h1> ট্যাগটি সবচেয়ে গুরুত্বপূর্ণ শিরোনাম উপস্থাপন করে এবং সাধারণত সম্পূর্ণ পৃষ্ঠার প্রধান শিরোনাম হিসেবে ব্যবহৃত হয়। প্রতি HTML ডকুমেন্টে শুধুমাত্র একটি <h1> ট্যাগ ব্যবহার করা সাধারণ।

  <h2> ট্যাগটি <h1> এর পরের সবচেয়ে গুরুত্বপূর্ণ শিরোনাম এবং এটি পৃষ্ঠার মধ্যে বিভাগের বা অধ্যায়ের শিরোনামের জন্য ব্যবহৃত হয়।

  <h3> ট্যাগটি <h2> এর নিচে উপশিরোনাম বা ছোট ছোট অংশগুলি উপস্থাপন করে।

  <h4>, <h5>, এবং <h6> ট্যাগগুলি নিম্ন স্তরের শিরোনাম উপস্থাপন করে, যা আরও বিস্তারিত আইটেম বা বিভাগের শিরোনামের জন্য ব্যবহৃত হয়।

• শিরোনামের ট্যাগগুলি টেক্সটের গুরুত্ব নির্দেশ করে এবং একটি পৃষ্ঠার যৌক্তিক গঠন তৈরি করতে সাহায্য করে। সার্চ ইঞ্জিনগুলি পৃষ্ঠার বিষয়বস্তু বোঝার জন্য শিরোনামের ট্যাগ ব্যবহার করে।

<strong> ট্যাগ

1<strong>Important text</strong> to emphasize significance.

• <strong> ট্যাগ একটি HTML ট্যাগ যার মাধ্যমে টেক্সটের গুরুত্ব বা জোর নির্দেশ করা হয় এবং সাধারণত এটি গাঢ়ভাবে প্রদর্শিত হয়।

• <strong> ট্যাগ একটি সেমান্টিক ট্যাগ এবং এর প্রধান উদ্দেশ্য হল অর্থ যোগ করা।

  এটি নির্দেশ করতে পারে যে টেক্সটটি প্রসঙ্গত গুরুত্বপূর্ণ। উদাহরণস্বরূপ, এটি সার্চ ইঞ্জিনগুলির জন্য টেক্সটের গুরুত্ব দেখাতে পারে, যা SEO-এর জন্য উপকারী। এটি স্ক্রীন রিডার ব্যবহারকারী ব্যবহারকারীদের জন্য টেক্সটের গুরুত্বও প্রদর্শন করে। অন্যদিকে, <b> ট্যাগ, যা পরবর্তীতে প্রদর্শিত হবে, শুধুমাত্র টেক্সটকে গাঢ় করতে ব্যবহৃত হয় এবং এটি সেমান্টিক জোর প্রদান করে না।

<em> ট্যাগ

1<em>Emphasized text</em> for italics and emphasis.

• <em> ট্যাগ একটি HTML ট্যাগ যা টেক্সটের গুরুত্ব বা জোর নির্দেশ করতে ব্যবহৃত হয় এবং সাধারণত এটি ইটালিকসে প্রদর্শিত হয়।

• <em> ট্যাগ একটি সেমান্টিক ট্যাগ এবং এর মূল উদ্দেশ্য হল অর্থ প্রদান করা।

  <strong> ট্যাগের মতো, এটি নির্দেশ করতে পারে যে টেক্সটটি প্রসঙ্গত গুরুত্বপূর্ণ। <strong> ট্যাগ সাধারণত গাঢ়ভাবে প্রদর্শিত হয়, যেখানে <em> ট্যাগ সাধারণত ইটালিকসে প্রদর্শিত হয়। উভয়ই স্ক্রীন রিডার এবং সার্চ ইঞ্জিন দ্বারা সেমান্টিক জোর প্রদানের জন্য স্বীকৃত হয়, কিন্তু <strong> আরও শক্তিশালী গুরুত্ব নির্দেশ করে, যেখানে <em> আবেগগত জোর প্রদান করে। অতিরিক্তভাবে, <i> ট্যাগ, যা পরবর্তীতে প্রদর্শিত হবে, শুধুমাত্র টেক্সটকে ইটালিকসে প্রদর্শন করে এবং এটি সেমান্টিক জোর প্রদান করে না।

<mark> ট্যাগ

1<mark>Highlighted text</mark> for attention.

• <mark> ট্যাগ ব্যবহৃত হয় নির্দিষ্ট টেক্সট প্রসঙ্গত গুরুত্বপূর্ণ নির্দেশ করার জন্য। এটি সার্চ ফলাফল বা মূল বিষয়বস্তু হাইলাইট করতে উপকারী।
• পূর্বনির্ধারিতভাবে, <mark> ট্যাগে আবদ্ধ পাঠ্য একটি হলুদ পটভূমি সহ প্রদর্শিত হয়, যা এর গুরুত্ব চাক্ষুষভাবে উপলব্ধি করায়।

<del> ট্যাগ

1<del>Deleted text</del> shows removed content.

• <del> ট্যাগ ব্যবহৃত হয় টেক্সট মুছে ফেলা বা পরিবর্তিত হয়েছে নির্দেশ করার জন্য। এই ট্যাগটি টেক্সটের পরিবর্তন বা সংশোধনের ইতিহাস দেখাতে উপকারী।

• <del> ট্যাগের মধ্যে থাকা টেক্সট সাধারণত স্ট্রাইকথ্রু দিয়ে প্রদর্শিত হয়। এটি দৃশ্যত মুছে ফেলা বিষয়বস্তু নির্দেশ করে।

  <del> ট্যাগের মধ্যে থাকা টেক্সটও স্ক্রীন রিডার দ্বারা মুছে ফেলা হিসেবে স্বীকৃত। এটি এমন বিষয়বস্তুকে বোঝার সুযোগ দেয় যা দৃশ্যত স্পষ্ট নয়।

<ins> ট্যাগ

1<ins>Inserted text</ins> shows added content.

• <ins> ট্যাগটি কোনও নথিতে নতুন যুক্ত বা সংশোধিত পাঠ্য নির্দেশ করতে ব্যবহৃত হয়। এই ট্যাগটি পাঠ্য সংযোজন বা সংশোধনের ইতিহাস দেখানোর জন্য উপকারী।

• ব্রাউজারগুলোতে, <ins> ট্যাগের মধ্যে রাখা পাঠ্য সাধারণত আন্ডারলাইন দিয়ে প্রদর্শিত হয়। এটি দৃশ্যত যুক্ত বিষয়বস্তু নির্দেশ করে।

  <ins> ট্যাগের মধ্যে থাকা পাঠ্য স্ক্রিন পাঠকদ্বারা নতুন যুক্ত হিসেবে স্বীকৃত। এটি এমন বিষয়বস্তুকে বোঝার সুযোগ দেয় যা দৃশ্যত স্পষ্ট নয়।

<abbr> ট্যাগ

1<abbr title="World Health Organization">WHO</abbr>

• <abbr> ট্যাগ একটি ইনলাইন উপাদান যা সংক্ষিপ্ত শব্দ বা অ্যাক্রোনিম নির্দেশ করতে ব্যবহৃত হয়। এই ট্যাগ ব্যবহারে সংক্ষিপ্ত শব্দের পূর্ণ অর্থ প্রদান করা হয় এবং SEO এবং প্রবেশযোগ্যতা উন্নতিতে অবদান রাখে। এটি বিশেষত সংক্ষিপ্ত শব্দ সম্পর্কে অপরিচিত পাঠক এবং স্ক্রিন পাঠক ব্যবহারকারীদের তার বিষয়বস্তু আরও ভালভাবে বোঝাতে সহায়তা করে।

পাঠ্য অঙ্গসজ্জা সম্পর্কিত ট্যাগসমূহ

<b> ট্যাগ

1<b>Bold text</b> without semantic emphasis.

• <b> ট্যাগটি একটি ইনলাইন উপাদান যেটি পাঠ্যকে বোল্ড করতে ব্যবহৃত হয়। আমরা যে অন্যান্য ট্যাগগুলি পরিচয় করাব, তার মতো এটিও দৃশ্যগত জোর দেওয়ার জন্য ব্যবহৃত হয়, কিন্তু অর্থবোধক জোরের জন্য নয়।

<i> ট্যাগ

1<i>Italic text</i> for style.

• <i> ট্যাগটি একটি ইনলাইন উপাদান যেটি পাঠ্যকে ইটালিক করতে ব্যবহৃত হয়।

<u> ট্যাগ

1<u>Underlined text</u> for decoration.

• <u> ট্যাগটি একটি ইনলাইন উপাদান যেটি পাঠ্যকে আন্ডারলাইন করতে ব্যবহৃত হয়।

<small> ট্যাগ

1<small>This is small text.</small>

• <small> ট্যাগ একটি ইনলাইন উপাদান যা পাঠ্যকে ছোট আকারে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত প্রধান বিষয়বস্তুর তুলনায় গৌণ সম্পূরক তথ্য বা ব্যাখ্যা প্রতিনিধিত্ব করতে ব্যবহৃত হয়।

<s> ট্যাগ

1<s>Strikethrough text</s>

• <s> ট্যাগটি একটি ইনলাইন উপাদান যেটি পাঠ্যের ওপর স্ট্রাইকথ্রু লাইন আঙ্কতে ব্যবহৃত হয়।

<sub> ট্যাগ

1H<sub>2</sub>O

• <sub> ট্যাগ একটি ইনলাইন উপাদান যা সাবস্ক্রিপ্ট পাঠ্য প্রদর্শন করতে ব্যবহৃত হয়।

<sup> ট্যাগ

1E = mc<sup>2</sup>

• <sup> ট্যাগ একটি ইনলাইন উপাদান যা সুপারস্ক্রিপ্ট পাঠ্য প্রদর্শন করতে ব্যবহৃত হয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video