Headings are defined with the <h1> to
<h6> tags. <h1> is the most
important heading, and <h6> is the least important.
Search engines use headings to index the structure and content of your web pages. Users often skim a page by its headings, so it's important to use headings to show the document structure.
H1 headings should be used for main headings, followed by H2 headings, then the less important H3, and so on.
HTML Headings Example
<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>Bigger Headings
Each heading has a default size. However, you can specify the size of any
heading with the style attribute, using the CSS
font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
<h2 style="font-size:40px;">Heading 2</h2>Horizontal Rule
The <hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule. It is used to separate
content or define a change in an HTML page.
<h1>This is heading 1</h1>
<p>This is some text under heading 1.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some text under heading 2.</p>The HTML <head> Element
The <head> element is a container for metadata (data
about data) and is placed between the <html> tag and
the <body> tag.
Metadata is data about the HTML document and is not displayed on the page. Metadata typically defines the document title, character set, styles, scripts, and other meta information.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
...
</body>
</html>The HTML <title> Element
The <title> element defines the title of the document,
and is required in all HTML documents. The
<title> element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search engine results
<!DOCTYPE html>
<html>
<head>
<title>LabsICT HTML Tutorial</title>
</head>
<body>
<h1>Welcome to LabsICT</h1>
<p>Learn HTML step by step.</p>
</body>
</html>Best Practices for Headings
✓ Do:
- Use headings for hierarchies and outlines
- Start with h1, use only one h1 per page
- Use headings in order (h1, h2, h3, h4, etc.)
- Make headings descriptive and brief
✗ Don't:
- Use headings just to make text big or bold
- Skip heading levels (h1 to h3)
- Use multiple h1 tags on one page
- Use headings for styling purposes only