HTML headings


HTML Headings

Headings are defined with the <h1> to <h6> tags.

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



                  <h1>Heading 1</h1>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h5>Heading 5</h5>
                  <h6>Heading 6</h6>
  
              

Live preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Note: 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 skim your pages 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.

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


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:



                      <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>
  
                  

Live preview

This is heading 1

This is some 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:



                  <!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>
                  
  
                

Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.