The Developer Brains

HTML Headings

Web Designing | Web Development

SEE MORE

Download the App from Play Store

</HTML Headings>

Do you know ?

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details proper usage of these tags.
Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all the global attributes.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6

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

HTML_Syntax First_Web_Page Html_Elements Headings Video_Tag Html_Attributes Audio_Tag Style Formatting Images Table Lists Iframe Symbols HTML_Quiz

</Using Headings >

Correct structure matters

The HTML Headings

In general, an article should have one h1 element for the main title followed by h2 subtitles – going down a layer if necessary. If there are h1 elements on a higher level they shoudn't be used to describe any lower level content.

Example

Here is a simple example of a Headings.

				
				
				<h1>element content</h1>

Note: Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents, so using the correct structure for headings is important

Note: Don't use headings to make text BIG or bold. heading is just to represent heading . to make text bold or increase size use css font-weight and font-size .
Learn more about css here

HTML Horizontal Rules (Hr)

The <hr> tag known as 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:

Info: By default heading have some white space (a margin) before and after a heading.

				
					
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
    
   <!-- some text -->
   <p>This is some text.</p>
   
<!--   Horizontal Rules example -->
    <hr>
    
   <h2>This is heading 2</h2>
   
    <hr>
   
</body>
</html>

Try it Yourself