এইচটিএমএল <h1> থেকে <h6> ট্যাগ
- পূর্ববর্তী পৃষ্ঠা <frameset>
- পরবর্তী পৃষ্ঠা <head>
নির্দিষ্ট ও ব্যবহার
<h1>
থেকে <h6>
ট্যাগগুলি এইচটিএমএল শিরোনামকে নির্দিষ্ট করে
<h1>
নিয়ামক শিরোনামকে নির্দিষ্ট করুন。<h6>
সবচেয়ে কম প্রাধান্যপূর্ণ শিরোনামকে নির্দিষ্ট করুন。
দৃষ্টান্ত
প্রত্যেক পৃষ্ঠাতে কেবল একটি <h1>
- এটি সমগ্র পৃষ্ঠার মূল শিরোনাম/বিষয়কে প্রতিনিধিত্ব করবে। এছাড়া, শিরোনাম স্তরকে ছেড়ে যাবেন না - <h1>
শুরু করুন,তারপর ব্যবহার করুন}} <h2>
এবং এমনকি。
এইচ এলইমেন্টটি সুনির্দিষ্ট সার্জিক্সকপ্ট হয়ে থাকার কারণে, আপনাকে ডকুমেন্টের রাস্তা গঠনের জন্য যথাযথ তলা স্তর বাছাই করতে হবে। তাই, একই লাইনের ফন্ট সাইজ পরিবর্তনের জন্য শিরোনাম ট্যাগ ব্যবহার করবেন না। বরং, সুন্দর দেখার জন্য ক্রমাগত স্টাইলশিপ ডিফাইনিশন ব্যবহার করুন。
আপনি এইচটিএমএল ট্যাগের বাছাই এবং ব্যবহার সম্পর্কে আরও জানতে চান, তাহলে পড়ুন: 《ওয়েব কিউয়ালিটি》。
আরও দেখুন:
এইচটিএমএল টিউটোরিয়াল:HTML শিরোনাম
এইচটিএমএল ডম রেফারেন্স ম্যানুয়েল:হেডিং অবজেক্ট
প্রকল্প
উদাহরণ 1
ছয়টি ভিন্ন এইচটিএমএল শিরোনাম:
<h1>এটি শিরোনাম 1</h1> <h2>এটি শিরোনাম 2</h2> <h3>এটি শিরোনাম 3</h3> <h4>এটি শিরোনাম 4</h4> <h5>এটি শিরোনাম 5</h5> <h6>এটি শিরোনাম 6</h6>
উদাহরণ 2
শিরোনামের পটভূমির রঙ এবং লেখার রঙ নির্ধারণ করুন (CSS-এর মাধ্যমে):
<h1 style="background-color:DodgerBlue;">Hello World</h1> <h2 style="color:Tomato;">Hello World</h2>
উদাহরণ 3
শিরোনামের অবস্থান নির্ধারণ করুন (CSS-এর মাধ্যমে):
<h1 style="text-align:center">এটি শিরোনাম 1</h1> <h2 style="text-align:left">এটি শিরোনাম 2</h2> <h3 style="text-align:right">এটি শিরোনাম 3</h3> <h4 style="text-align:justify">এটি শিরোনাম 4</h4>
গ্লোবাল অ্যাট্রিবিউট
<h1>
- <h6>
ট্যাগটি একটি ইভেন্ট অ্যাট্রিবিউটও সমর্থন করে এইচটিএমএল-এর গ্লোবাল অ্যাট্রিবিউট。
ইভেন্ট অ্যাট্রিবিউট
<h1>
- <h6>
ট্যাগটি একটি ইভেন্ট অ্যাট্রিবিউটও সমর্থন করে এইচটিএমএল-এর ইভেন্ট অ্যাট্রিবিউট。
ডিফল্ট সিএসএস সেটিং
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h1>
উপাদান:
উদাহরণ 1
h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; }
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h2>
উপাদান:
উদাহরণ 2
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; }
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h3>
উপাদান:
উদাহরণ 3
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; }
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h4>
উপাদান:
উদাহরণ 4
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; }
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h5>
উপাদান:
উদাহরণ 5
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; }
বেশিরভাগ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <h6>
উপাদান:
উদাহরণ 6
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; }
ব্রাউজার সমর্থন
চ্রোম | এডজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
---|---|---|---|---|
চ্রোম | এডজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
সমর্থন | সমর্থন | সমর্থন | সমর্থন | সমর্থন |
- পূর্ববর্তী পৃষ্ঠা <frameset>
- পরবর্তী পৃষ্ঠা <head>