HTML Lesson 2: Heading

1
24

HTML Headings

HTML Headings tags are used as headers or sub-headers and are defined with <h1> to <h6> values. When you place text inside of a heading tag, the text displays bold and the size of the text increases.

However it is important to note that you should use headings for headings only. Don’t use headings to make text big or bold. Headings are important for indexing the structure and content of your website on search engines.

Let’s give you demonstration of six heading tags and how they look like

Source Code Output

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

You can see that each heading tag demonstrate text in bold with increase font.

Important Notes

You might be thinking how to use these heading tags effectively in your HTML document. Here are few tips!

  • Use the <h1> tag once in your document- even Google recommends it! The best practice is to put it into the main heading of your web page with the logo, since search engines access the website title to find a website.
  • Try to use the heading tag in sequence, particularly in a content section e.g. don’t place the <h4> tag before the <h3>. You must follow the sequence!
  • Do not use different heading tags for different pages; try to have a one unique website title to cover every page of your website

HTML Horizontal Rules

To create a horizontal line in an HTML page, you can use the <hr/>element. This is our first example of a void element in action. Since the Horizontal Rule Element doesn’t have a closing tag, it’s strongly suggested to put a backslash ( / ) before the closing bracket <hr />. Note that the element will still work without the backslash (<hr>), but to conform to good web design practices as well as HTML standards, always use the backslash! You can use the <hr /> element can be used to separate content:
Output

Source Code Output

Section One


Section Two


Section Three

Summary

  • HTML Headings are tags which can be used as headers or sub-headers
  • Heading tags are numbered from 1 (being the biggest and thus the most important) through 6 (being the smallest)
  • Headings are important for indexing the structure and content of your website on search engines.

Next Lesson

Moving on, we will be discussing HTML Attributes and how they can modify HTML Elements!

1 COMMENT

  1. […] a foundation to build off of, let’s check out some basic HTML Elements in action during our Headings […]

Leave a Reply