HTML5 এ Line Break (<br>) এবং Horizontal Rule (<hr>) হলো দুটি এলিমেন্ট যা ওয়েব পেজের টেক্সট কন্টেন্ট এবং লেআউট গঠন করতে ব্যবহৃত হয়। এগুলো সাধারণত লেআউট এবং কন্টেন্টকে পরিষ্কারভাবে প্রদর্শন করার জন্য ব্যবহৃত হয়। নিচে <br> এবং <hr> সম্পর্কে বিস্তারিত আলোচনা করা হলো:
১. Line Break (<br>)
বর্ণনা
<br>ট্যাগ লাইন ব্রেক তৈরি করে, যা একটি নতুন লাইন শুরু করতে ব্যবহৃত হয়। এটি Inline এলিমেন্ট এবং টেক্সটের মধ্যে ব্যবহৃত হয়, যখন আমরা প্যারাগ্রাফের মতো ব্লক এলিমেন্ট ছাড়াই একটি নতুন লাইন শুরু করতে চাই।- এটি একটি self-closing tag, অর্থাৎ এটি আলাদাভাবে ক্লোজ করার প্রয়োজন নেই (যেমন,
<br>বা XHTML এ<br />লিখতে পারেন)।
ব্যবহার
- একাধিক লাইনের ঠিকানা, কবিতা, অথবা এমন কোনো টেক্সট যেখানে নতুন প্যারাগ্রাফ তৈরি না করে নতুন লাইন শুরু করা প্রয়োজন, সেখানে
<br>ব্যবহার করা হয়।
উদাহরণ
<p>This is the first line.<br>This is the second line after a line break.</p>
উপরের উদাহরণে, <br> ট্যাগ ব্যবহার করে এক লাইনে একটি ব্রেক তৈরি করা হয়েছে, যার ফলে টেক্সটটি দুটি আলাদা লাইনে প্রদর্শিত হবে।
<br> ট্যাগের ব্যবহারিক ক্ষেত্র
- ঠিকানা লিখতে:
<address>
123 Main Street<br>
Suite 500<br>
New York, NY 10001
</address>
- কবিতা বা ছন্দ: যেখানে প্রতিটি লাইন আলাদা হয়।
<p>
Roses are red,<br>
Violets are blue,<br>
Sugar is sweet,<br>
And so are you.
</p>
গুরুত্বপূর্ণ পরামর্শ
<br>ট্যাগ অপ্রয়োজনীয়ভাবে ব্যবহার না করাই ভালো। যদি বড় টেক্সট ব্লক বা প্যারাগ্রাফ তৈরি করতে হয়, তাহলে<p>ট্যাগ ব্যবহার করা উচিত।<br>ট্যাগের সঠিক ব্যবহার টেক্সটের ফরম্যাটিং এবং কন্টেন্টের ক্লারিটি বাড়ায়।
২. Horizontal Rule (<hr>)
বর্ণনা
<hr>ট্যাগ একটি অনুভূমিক লাইন বা বিভাজক তৈরি করে, যা কন্টেন্টের দুটি অংশকে আলাদা করতে বা ভিজ্যুয়াল ব্রেক তৈরি করতে ব্যবহৃত হয়।- এটি একটি self-closing tag, তাই এর কোনো ক্লোজিং ট্যাগ নেই (যেমন,
<hr>বা XHTML এ<hr />লিখতে পারেন)। <hr>এলিমেন্ট পেজে একটি শীর্ষ থেকে নিচ পর্যন্ত প্রস্থের লাইন তৈরি করে, এবং এটি সাধারণত কন্টেন্টের মধ্যে ভিজ্যুয়াল সেগমেন্টেশন তৈরি করতে ব্যবহৃত হয়।
ব্যবহার
- কন্টেন্ট বা সেকশন বিভক্ত করতে
<hr>ব্যবহার করা হয়, যেমন দুটি প্যারাগ্রাফ বা সেকশনের মধ্যে একটি ভিজ্যুয়াল ব্রেক। - এটি সেকশনের পরিবর্তন বা নতুন বিষয়বস্তুর সূচনা নির্দেশ করতে সাহায্য করে।
উদাহরণ
<p>This is the first section of content.</p>
<hr>
<p>This is the second section of content, separated by a horizontal rule.</p>
উপরের উদাহরণে, দুটি প্যারাগ্রাফের মধ্যে <hr> ট্যাগ ব্যবহার করা হয়েছে, যা একটি অনুভূমিক লাইন তৈরি করে এবং দুটি অংশকে আলাদা করে।
CSS এর মাধ্যমে <hr> কাস্টমাইজ করা
CSS ব্যবহার করে <hr> এর স্টাইলিং কাস্টমাইজ করা যায়। নিচে একটি উদাহরণ দেয়া হলো:
<style>
hr {
border: 0;
height: 2px;
background-color: #333;
margin: 20px 0;
}
</style>
<p>First section of content.</p>
<hr>
<p>Second section of content.</p>
ব্যাখ্যা
- এখানে,
<hr>এর ডিফল্ট বর্ডার সরিয়ে, এটি ২ পিক্সেল উচ্চতার এবং একটি নির্দিষ্ট রঙের ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে। এছাড়া, মার্জিন যোগ করা হয়েছে, যা লাইনটির উপরে এবং নিচে কিছু স্পেস প্রদান করে।
সারসংক্ষেপ
| ট্যাগ | বর্ণনা | ব্যবহার |
|---|---|---|
<br> | লাইন ব্রেক তৈরি করতে ব্যবহৃত হয় | কবিতা, ঠিকানা, অথবা কোনো টেক্সটে নতুন লাইন শুরু করতে |
<hr> | একটি অনুভূমিক লাইন বা বিভাজক তৈরি করতে ব্যবহৃত হয় | কন্টেন্ট বা সেকশন আলাদা করতে বা ভিজ্যুয়াল ব্রেক তৈরি করতে |
Line Break এবং Horizontal Rule এলিমেন্ট দুটি HTML5 এ কন্টেন্টের গঠন এবং ভিজ্যুয়াল ডিভাইডার তৈরি করতে ব্যবহৃত হয়, যা পেজের রিডেবিলিটি এবং লেআউটকে উন্নত করে।
