এইচটিএমএল শিরোনামটি
থেকে পর্যন্ত 6টি স্তরকে নির্দেশ করে, h1 সবচেয়ে গুরুত্বপূর্ণ শিরোনাম স্তর এবং সবচেয়ে কম গুরুত্বের h6। H1, H2, H3, H4, H5, H6 হল ছয়টি শিরোনাম৷৷
দ্রষ্টব্য − শিরোনামগুলি সার্চ ইঞ্জিন (যেমন google) দ্বারা ওয়েবপৃষ্ঠার বিষয়বস্তু সূচীকরণের জন্য ব্যবহার করা হয়৷
চলুন HTML শিরোনাম-এর একটি উদাহরণ দেখি −
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var headingPreview = document.getElementById("headingPreview");
function changeHeading() {
if(textSelect.value === '')
headingPreview.innerHTML = 'Write a Heading';
else{
for(var i=0; i<6; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true && textSelect.value !== '')
headingPreview.innerHTML ='<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
}
}
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে1)'প্রিভিউ' ক্লিক করার আগে টেক্সট ফিল্ড খালি −
সহ বোতাম
2) 'প্রিভিউ' ক্লিক করার পরে৷ টেক্সট ফিল্ড খালি −
সহ বোতাম
3) 'প্রিভিউ' ক্লিক করার পরে৷ টেক্সট ফিল্ড সহ বোতাম খালি নেই এবং 'h6' রেডিও বোতাম চেক করা হয়েছে −
4) 'প্রিভিউ' ক্লিক করার পর টেক্সট ফিল্ড সহ বোতাম খালি নেই এবং 'h1' রেডিও বোতাম চেক করা হয়েছে −
