HTML Headings

HTML includes 6 headings. <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Heading elements are used to write headings on a webpage, whereas p tag is only for plain text. All Headings are bold and block level elements.

Font size of all heading gradually decreases. h1 is twice of p, h2 is 1.5% of p tag, h3 is 1.17% of p tag and h4 and p tags are of same font size. h5 and h6 are smaller than p tag.

  1. Heading 1 ( <h1>)
  2. Heading 2 ( <h2>)
  3. Heading 3 ( <h3>)
  4. Heading 4 ( <h4>)
  5. Heading 5 ( <h5>)
  6. Heading 6 ( <h6>)

Headings Code

Html headings example.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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

HTML h1 tag <h1>

H1 tag or <h1> is the main heading or level one heading of a webpage. Search engines like google, yahoo, bing etc gives maximum priority to the h1 element. As per search engine parameters, h1 tag should be used only once in a webpage. Default Font size of h1 element is 2em.

<h1> Heading 1 </h1>

HTML h2 tag <h2>

H2 tag or <h2> is the sub heading of h1 element. It is recommended to use headings in proper order for better search results.

<h2> Heading 1 </h2>

Use of heading in a webpage`

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>HTML Headings</title>
	<h1>Web Designing</h1>	
	<p>Description for web designing</p>
		<p>Description for HTML</p>
			<h3>HTML 4</h3>
			<p>Description for HTML4</p>
			<h3>HTML 5</h3>
			<p>Description for HTML5</p>
		<p>Description for CSSlt;/p>
			<h3>CSS 2</h3>
			<p>Description for css2</p>
			<h3>CSS 3</h3>
			<p>Description for css3</p>
		<p>Description for JavaScript</p>
			<p>Description for Javascript</p>
			<p>Description for Jquery</p>

As per Search Engine Rules, it is compulsory to define atleast h1 and h2 in a webpage.