HTML এর <hr> ট্যাগটি একটি “Horizontal Rule” বা Straight Line তৈরি করে। এটি সাধারণত একটি প্যারাগ্রাফের শেষে একটি Straight Line দেখায়, যা কনটেন্টের এক অংশকে অন্য অংশ থেকে আলাদা করে।আজকের এই পোস্টে আমরা HTML এর hr ট্যাগ সম্পর্কে আরো বিস্তারিত জানবো।
Table of Contents
hr ট্যাগ কী ?
HTML এর <hr> ট্যাগটি একটি “Horizontal Rule” বা Straight Line তৈরি করে। এটি সাধারণত দুটি বিভাগের মধ্যে বিভাজন হিসেবে ব্যবহৃত হয়। যখনই <hr> ট্যাগটি ব্যবহার করা হয়, তখন একটি অনুভূমিক রেখা ওয়েবপেজে প্রদর্শিত হয়, যা কনটেন্টের এক অংশকে অন্য অংশ থেকে আলাদা করে।
hr ট্যাগের Syntax
<hr> ট্যাগের Syntax খুবই সহজ। এবং এটি একটি সেলফ-ক্লোজিং ট্যাগ, যার জন্য আলাদা কোনো ক্লোজিং ট্যাগ (</hr>) দরকার হয় না। নিচে এর সিনট্যাক্সটি দেওয়া হলো:
Syntax
<hr>Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<p>This is the first line. <hr> This is the second line.</p>
</body>
</html>Output
This is the first line.
This is the second line.উপরের উদাহরণে, <hr> ট্যাগটি ব্যবহারের ফলে একটি Straight Line তৈরি হবে, যা কনটেন্টের মধ্যে বিভাজন হিসেবে কাজ করবে।
hr ট্যাগের ব্যবহার
কনটেন্টের বিভাজন
ওয়েবপেজে বিভিন্ন অংশ বা বিভাগের মধ্যে বিভাজন তৈরি করতে <hr> ট্যাগটি ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি ব্লগ পোস্টে বিভিন্ন বিষয়ের মধ্যে স্পেসিং তৈরি করতে এটি ব্যবহার করা যেতে পারে।
Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
<hr>
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</body>
</html>Output
Section 1
This is the content of section 1.
Section 2
This is the content of section 2.
উপরের উদাহরণে, <hr> ট্যাগটি Section 1 এবং Section 2 এর মধ্যে বিভাজন হিসেবে ব্যবহৃত হয়েছে।
ভিজ্যুয়াল প্রভাব তৈরি করা
<hr> ট্যাগটি ওয়েবপেজে ভিজ্যুয়াল প্রভাব তৈরি করতে ব্যবহৃত হয়। এটি কনটেন্টের মধ্যে একটি পরিষ্কার এবং সুগঠিত লুক প্রদান করে।
Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<h2>Welcome to My Website</h2>
<p>Here you will find various tutorials and articles.</p>
<hr>
<p>Thank you for visiting!</p>
</body>
</html>Output
Welcome to My Website
Here you will find various tutorials and articles.
Thank you for visiting!
এখানে, <hr> ট্যাগটি “Welcome to My Website” এবং “Thank you for visiting!” এর মধ্যে একটি ভিজ্যুয়াল বিভাজক হিসেবে কাজ করছে।
কনটেন্টের থিম্যাটিক পরিবর্তন করা
<hr> ট্যাগটি একটি বিষয় বা ধারণা থেকে অন্য একটি ভিন্ন বিষয় বা ধারণায় স্থানান্তরের সময় ব্যবহৃত হতে পারে। এটি পাঠককে কনটেন্টের প্রবাহ বুঝতে সাহায্য করে।
Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<h2>About Us</h2>
<p>We are a team of passionate developers.</p>
<hr>
<h2>Our Services</h2>
<p>We offer a wide range of web development services.</p>
</body>
</html>Output
About Us
We are a team of passionate developers.
Our Services
We offer a wide range of web development services.
এই উদাহরণে, “About Us” এবং “Our Services” এর মধ্যে থিম্যাটিক পরিবর্তন নির্দেশ করতে <hr> ট্যাগটি ব্যবহৃত হয়েছে।
hr ট্যাগের কাস্টমাইজেশন
Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<hr style="border: 1px solid black;">
<hr style="width: 50%; margin-left: auto; margin-right: auto;">
<hr style="height: 5px; background-color: gray;">
</body>
</html>Output
- border: লাইনটির edge এর স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
- width: Horizontal line এর প্রস্থ নির্ধারণ করে।
- margin: লাইনটিকে নির্দিষ্ট অবস্থানে রাখার জন্য ব্যবহৃত হয়।
- height: লাইনটির উচ্চতা নির্ধারণ করতে ব্যবহার করা হয়।
- background-color: লাইনটির রঙ পরিবর্তন করতে ব্যবহার করা হয়।
উপসংহার
HTML এর <hr> ট্যাগটি একটি সাধারণ কিন্তু প্রয়োজনীয় ট্যাগ, যা ওয়েবপেজের কনটেন্টকে সংগঠিত এবং ভিজ্যুয়ালি আকর্ষণীয় করতে ব্যবহৃত হয়। এটি পাঠককে কনটেন্টের বিভিন্ন অংশ বুঝতে সাহায্য করে এবং একটি ভিজ্যুয়াল বিভাজন প্রদান করে। CSS এর মাধ্যমে আপনি এটি আরও কাস্টমাইজ করতে পারেন এবং আপনার ওয়েবপেজের থিমের সাথে মানানসই করতে পারেন। আশা করি এই ব্লগটি ট্যাগের ব্যবহার সম্পর্কে আপনার ধারণা স্পষ্ট করেছে এবং আপনি এটি সঠিকভাবে ব্যবহার করতে পারবেন।
HTML Playlist : HTML5 Tutorial in Bengali
F.A.Q
<hr> ট্যাগের Full form কী ?
<hr> ট্যাগের Full form হল Horizontal Rule.
<hr> ট্যাগের প্রয়োজনীয়তা কী ?
HTML এর <hr> ট্যাগ একটি Straight Line তৈরি করে, যা সাধারণত কনটেন্টের বিভিন্ন অংশের মধ্যে বিভাজন হিসেবে ব্যবহৃত হয়।
<hr> ট্যাগ কীভাবে কাজ করে ?
<hr> ট্যাগটি ব্যবহার করলে একটি Straight Line ওয়েবপেজে প্রদর্শিত হয়, যা কনটেন্টের মধ্যে স্পেস বা বিভাজক হিসেবে কাজ করে।
<hr> ট্যাগ কি Self Closing ট্যাগ ?
হ্যাঁ, <hr> একটি Self Closing ট্যাগ, যার জন্য আলাদা কোনো Closing ট্যাগের প্রয়োজন হয় না।
আমি কীভাবে <hr> ট্যাগের স্টাইল পরিবর্তন করতে পারি ?
আপনি CSS এর মাধ্যমে <hr> ট্যাগের স্টাইল পরিবর্তন করতে পারেন, যেমন width, height, margin and color পরিবর্তন করতে পারেন।
<hr> ট্যাগের Default স্টাইল কী ?
Default ভাবে, <hr> ট্যাগটি একটি Straight Line তৈরি করে, যা পৃষ্ঠা জুড়ে প্রসারিত হয় এবং পাতলা কালো বা ধূসর রঙের হয়।
<hr> ট্যাগ কি শুধুমাত্র ভিজ্যুয়াল উদ্দেশ্যে ব্যবহৃত হয় ?
<hr> ট্যাগ সাধারণত দুটি বিভাগের মধ্যে বিভাজন করতে, থিম্যাটিক পরিবর্তন নির্দেশ করতে, বা কনটেন্টের মধ্যে স্পেস তৈরি করতে ব্যবহৃত হয়।
কীভাবে <hr> ট্যাগের width কমানো যায় ?
<hr> ট্যাগের width CSS এর মাধ্যমে পরিবর্তন করা যায়, উদাহরণস্বরূপ: width: 50%; ব্যবহার করলে এটি পৃষ্ঠার ৫০% প্রস্থ জুড়ে প্রসারিত হবে।
HTML5 এ <hr> ট্যাগের কোনো পরিবর্তন হয়েছে কি ?
না, HTML5 এ <hr> ট্যাগের কার্যকারিতা অপরিবর্তিত রয়েছে এবং এটি আগের মতোই কাজ করে।
