Tiêu đề HTML đề cập đến 6 cấp từ
đến , h1 là cấp tiêu đề quan trọng nhất và h6 có tầm quan trọng thấp nhất. H1, H2, H3, H4, H5, H6 là sáu tiêu đề.
LƯU Ý - Tiêu đề được sử dụng bởi các công cụ tìm kiếm (như google) để lập chỉ mục nội dung của trang web.
Hãy xem một ví dụ cho Tiêu đề HTML -
Ví dụ
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
1) Trước khi nhấp vào ‘Xem trước’ nút trống trường văn bản -
2) Sau khi nhấp vào ‘Xem trước’ nút trống trường văn bản -
3) Sau khi nhấp vào ‘Xem trước’ nút có trường văn bản không trống và nút radio ‘h6’ được chọn -
4) Sau khi nhấp vào ‘Xem trước’ nút có trường văn bản không trống và nút radio ‘h1’ được chọn -
