HTML TutorialLesson #7

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are titles or subtitles that you want to display on a webpage.


Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5 Heading 6


HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

Example Code

html
Try it Yourself
Live Output Preview:

Note: Browsers automatically add some white space (a margin) before and after a heading.


Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is 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.

For example:

  • <h1> - Page title
  • <h2> - Section titles
  • <h3> - Sub-sections

Example

Example Code

html
Try it Yourself
Live Output Preview:

Tip: Use only one <h1> per page - it represents the main topic or title.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.


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:

Example

Example Code

html
Try it Yourself
Live Output Preview:

HTML Tag Reference

EA Academy' tag reference contains additional information about these tags and their attributes.

TagDescription
<html>Defines the root of an HTML document
<body>Defines the document's body
<h1> to <h6>Defines HTML headings

For a complete list of all available HTML tags, visit our HTML Tag Reference.


Video: HTML Headings


Interactive Code Examples

HTML Example 2

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 3

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 4

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview: