HTML Heading - H1 to H6 Tags in HTML:
HTML heading is a basic need to make our web page attractive and systematic. In order to achieve this, HTML5 provides six basic headings tags (h1 to h6) that are displayed on the webpage as titles, subtitles or any other relevant details. Let us learn these heading in HTML in details now.
IMPORTANCE OF HTML HEADING:
2. Headings are useful for various such engines, such as Google, to index the layout and content of their web pages.
3. Headings offer an efficient and fast perusal of the web page for the users.
4. HTML headings can be nested with other elements and provide a better structure to the HTL document.
5. The purpose of the overall page can be depicted using these headings.
HTML HEADER TAGS:
There are six different HTML heading which are defined with the <h1> to <h6>, tags from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the structure of web page.
The heading tags can be styled using the style attribute and its properties. By default, the CSS styling used for headings by most of the browsers are:
H1 Tag in HTML:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right:0;
font-weight: bold;
}
H2 Tag in HTML:
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 Tag in HTML:
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom:1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
H4 Tag in HTML:
h4 {
display: bloke;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
H5 Tag in HTML:
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
H6 Tag in HTML:
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
These default CSS attributes can be overwritten using he the style attribute. following is the cade representing the six HTML headings:
Example:
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1> Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
</body>
</html>
Output:
HTML heading can also be used with nested elements. Following are different codes to display the way to use heading elements:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is a main heading of page.</h1>
<p>h1 is the most important heading which is used to display the keyword of page</p>
<h2> This is the first sub heading </h2>
<p>h2 describes the first sub heading of page</p>
<h3>This is second sub heading</h3>
<p>describes the second sub heading of page</p>
<p>We can use h1 to h6 tag to use the different sub heading with their paragraphs if required.
</p>
</body>
</html>
Output:
Excellent
ReplyDelete