-
HTML Headings can be defined as a title or a subtitle which you want to display on the webpage. You can place the text within the heading tags. <h1> defines the most important heading and <h6> defines the least important heading.
Headings
-
Headings are defined in six levels in HTML. Headings elements are h1, h2, h3, h4, h5, and h6.
Example:
< !DOCTYPE html>
<html lang="en">
<head>
<title>The lang attribute</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
<html lang="en">
<head>
<title>The lang attribute</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Note: Browser automatically add some white space before and after headings.
Significance of headings
- Search engine use headings to index the structure and content of your web pages.
- <h1> heading is used for main headings, followed by <h2> heading, and then less important <h3> heading and so on.
Note: Don't use headings to make text BIG or Bold.
Bigger Headings
-
HTML headings has a default size. You can specify the size for any heading with the style attribute inside the start tag of the heading element. By using CSS font-size property.
Example:
< !DOCTYPE html>
<html lang="en">
<head>
<title>The style attribute</title>
</head>
<body>
<h1 style="font-size:70px;">Heading 1<h1>
<p>the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>
<html lang="en">
<head>
<title>The style attribute</title>
</head>
<body>
<h1 style="font-size:70px;">Heading 1<h1>
<p>the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>
Next Topic: HTML Paragraphs