Quick Reach
HTML Headings
There are a few ways to present the headings in the HTML documents. One of the ways is to use HTML <h1>, <h2> to <h6> tags to use headings in your web page. You can also customize headings by using CSS style in the <p>, <span> or div tags, however, the “headings” should be presented by using <h1> to <h6> tags of HTML.
This is also recommended for SEO (Search Engine Optimization) purpose to use heading tags in your web pages. The reason is, search engines take this as an important piece of content in the web page that contributes in the keyword rankings.
Generally, you should use one or two <h1>, and a few <h2> headings in your web pages. If you got quite a big page, say around 2000+ words web page then you may think to use more <h3> to <h6> headings.
Note that, the most important heading should be used in the <h1> tag and least should be in the <h6> tag.
The example shows how to use <h1> to <h6> tags of HTML. By default, the headings are bold as shown in the example below.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>HTML h1…h6 example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
|
h1 with CSS example
You can also apply CSS to heading tags e.g. to make the text bigger or smaller, setting the color, font family, border, background etc.
The example below applies different CSS properties to h1 tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<title>HTML h1…h6 example</title>
<style>
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
border: solid 1px red;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
|
Also see HTML link | HTML table
Leave A Comment?