HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Headings

HTML Headings are defined with the <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements.

Each element represents a different level of content in the document.

<h1> represents the main (most important) heading, <h2> represents subheadings, <h3> represents sub-subheadings, and so on.

This is heading 1 (h1)

This is heading 2 (h2)

This is heading 3 (h3)

This is heading 4 (h4)

This is heading 5 (h5)

This is heading 6 (h6)

Run code

Each time you place a heading tag, web browser automatically create some empty space (margin) before and after each heading.


Headings Are Important

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

Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

<h1> heading should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

You should just use a single <h1> per page.

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

Do not use upper levels to increase heading font size: use the CSS font-size property instead.



Heading Sizes

You can specify the size for any heading with the style attribute, using the CSS font-size property.

Run code

Heading Colors

You can specify the color for any heading with the style attribute, using the CSS color property.

Run code

Colors in HTML most often specified by the following methods:

  • color name - like "lightgreen"
  • HEX value - like "#4285f4"
  • RGB value - like "rgb(19, 217, 19)"

Look at HTML Color Values for a complete list of possible color values.


Implementing structural hierarchy

As mentioned earlier you should avoid skipping heading levels: always start from <h1>, next use <h2> and so on:

As an example, in a book, <h1> would represent the title of the book, <h2> would represent the title of each chapter and <h3> would represent sub-sections of each chapter, and so on:

Run code

HTML Horizontal Rules

The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML.

This tag is an example of an empty element, where you do not need closing tag.

Run code