HTMLs Tutorial

HTML Tutorial HTML Tags HTML Basic Tags HTML Attributes HTML Elements HTML Formatting HTML Text Format HTML <body> tag HTML <samp> tag HTML <script> Tag HTML <section> tag HTML <select> tag HTML <source> tag HTML <span> tag HTML <strike> tag HTML <strong> tag HTML <style> tag HTML <sub> tag HTML <summary> tag HTML <sup> Tag HTML <svg> tag HTML <table> tag HTML <u> tag HTML Headings HTML Paragraphs HTML <wbr> tag HTML Anchor HTML Image HTML Lists HTML Ordered List HTML Unordered List HTML Form HTML Form input HTML with CSS HTML Layouts HTML References HTML Frames HTML Links

HTML5 Advance

HTML5 Tutorial HTML5 Tags HTML<Button>Tag HTML <canvas> Tag HTML<caption> Tag HTML City tag HTML <Data> Tag HTML5 SVG HTML Event Attribute HTML5 Audio HTML5 Youtube HTML5 Button Tag HTML5 Tags

Misc

How to add JavaScript to HTML How to change font in HTML How to change text color in HTML HTML Date HTML Hide Element HTML Nested Table HTML Reset Button What does HTML stand for? HTML Background Image HTML <address> Tag Div Tag in HTML How to insert Image in HTML How to create a link with no underline in HTML How to insert spaces/tabs in text using HTML/CSS HTML <br> tag HTML Code HTML <video> Tag HTML Canvas Design a tribute page using HTML and CSS What is a Container tag Font tag in HTML Difference between HTML and DHTML Empty Tag in HTML HTML Button Link Html Line Break Img src HTML Nested List in HTML Placeholder in HTML TD in HTML HTML Space Code HTML Target Attribute

HTML Headings
2022-03-06 13:08:57

HTML Headings

The titles and subtitles of our webpages are known as HTML headings. Let’s not talk about webpages but giving heading to almost everything like normal paragraphs, articles or let it be anything, emphasizes them. A heading is something which is a one-word summary for our whole topic or we can say webpage in html’s case.

In html, we define headings with the <h1> to <h6> tags. Here <h1> defines the most important heading whereas <h6> defines the least important heading among them all. Therefore, h1 being the biggest heading of them all and h6 being the smallest.

While using html, our browsers automatically add some white space or we can say margin to the left and right side of our heading, to distinguish it from the other content. Below is the example that shows the size of headings from <h1> to <h6>, and their white spaces as well.

For example:

<body>
<h1>This is my first heading</h1>
<h2>This is my second heading</h2>
<h3>This is my third heading</h3>
<h4>This is my fourth heading</h4>
<h5>This is my fifth heading</h5>
<h6>This is my sixth heading</h6>
</body>
</html> 

Output:

HTML Headings

Importance of headings

Search engines take the help of headings to index the structure and content of our webpage. Users sometimes judge the webpages by their headings only. It is very important to use heading to show the documented structure of our webpage as mentioned before. <h1> heading should always be used for main heading which shows the summary of the written content or we can say it should determine the purpose of webpage followed by <h2> heading and <h3> and then carry on like this to <h6>. Personal advice from our side, that use html headings for headings only do not use them to make your text big or bold.

Bigger headings

Each and every html heading has a different and default size. However, we can change or we can modify their sizes by using style attribute, or by using the CSS font-size property. Below is the example that shows how we can give bigger headings with the help of CSS properties.

For example:

<html>
<body>
<h1 style=”font-size: 60px;”>Heading 1</h1>
<p>This is an example which shows how we can change the size of a heading with the style attribute, using the font size property.</p>
</body>
</html> 

Output:

HTML Headings