What are HTML Headings?
Headings are defined with the <h1> to <h6> tags.
The higher the heading level number, the greater it's importance so <h1> defines the most important heading, whereas the <h6> defines the least important heading in the document.
Example :
<!DOCTYPE html>
<html>
<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>
Output
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Note: Browsers automatically add some white space (a margin) before and after a heading. Use CSS margin property to override browser's default style sheet.
Headings Are Important
By highlighting important topics and document structure, HTML headings provide valuable information. To make text BIG or bold, do not use headings. Use it only to highlight your document heading and display the structure of the document. As search engines use headings to index the structure and content of your web pages, use it very wisely on your web page.
Use <h1> headings as main headings, followed by <h2> headings, then the less important <h3> headings, and so on.
Note: For headings only, use HTML headings. Do not use headings to make BIG or bold text.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>
Output:
Heading 1
You can change the size of a heading with the style attribute, using the font-size property.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
Output
This is heading 1
This is some text.
This is heading 2
This is some other text.
This is heading 2
This is some other text.
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
Output
My First HTML
The HTML head element contains meta data.
Meta data is data about the HTML document.
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
Summery
| Tags | Description |
| <html> | Defines the root of an HTML document |
| <body> | Defines the document's body |
| <head> | A container for all the head elements (title, scripts, styles, meta information, and more) |
| <h1> to<h6> | Defines HTML headings |
| <hr> | Defines a thematic change in the content |