Heading Tag in HTML Basics

HTML Headings:

These are the predefined font sizes within HTML. There are 6 headings in HTML:

  • <h1> My First Heading H1 </h1>
  • <h2> My First Heading H2 </h2>
  • <h3> My First Heading H3</h3>
  • <h4> My First Heading H4</h4>
  • <h5> My First Heading H5</h5>
  • <h6> My First Heading H6</h6>

The output of the above would reflect different sizes of font as predefined in HTML documentation:

HTML Heading Tags

HTML Heading Tags

You may well see the difference and understand for yourself that h1 is the heading with largest font considered reasonable for a webpage main heading while h2 should be used for sub heading. H3 and h4 are ought to be used relatively important points within the h1 and h2 headings. The last two headings may be referred to for lesser important data than is considered for headings h1 to h4.

HTML Heading Colour Scheme: 

We can see the headings above are in black colour. But the time and requirement may vary and demand a different colour scheme for headings. Therefore, it is important to note that we can assign different colours as per our wish e.g. <h1 style=”color:orange”> My First Heading H1 </h1>

Styling HTML Header

Styling HTML Header

The above example illustrates that <a href= “ “> <style= “”> or inline CSS(Cascading Style Sheets)</a> can be used within html angled brackets to style the colour, size and font attributes of any HTML elements.

Let us again try the same and give different colouring to each heading:

<h1 style=”color:orange”> My First Heading H1 </h1>

<h2 style=”color:green”> My First Heading H2 </h2>

<h3 style=”color:pink”> My First Heading H3</h3>

<h4 style=”color:blue”> My First Heading H4</h4>

<h5 style=”color:red”> My First Heading H5</h5>

<h6 style=”color:white”> My First Heading H6</h6>

 

The outcome is shown below:

HTML Heading styles

HTML Heading styles

 

Heading Tag in HTML Basics: Isn’t this fun? This really is. Try practising it in your browser and drop us a question in the comment form below in case you need any support or guidance. It would be fun find out why H6 heading is not being displayed though it is very much there.

Leave a Reply