Home »
HTML
HTML Heading Tags
By IncludeHelp Last updated : October 13, 2024
Heading Tags
The headings are an important aspect in a document. The heading could be provided on the webpage through HTML.
Types of Heading Tags
There six types of heading given in HTML. Below are the six HTML heading tags used and their respective effects. <h1> defines the most important heading and it gives the largest heading while the <h6> is the smallest heading and thus defines the least important headings in HTML.
Example of Heading Tags
Consider the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Structure of a HTML5 Webpage</title>
</head>
<body>
<!--HEADING (there are total 6 Heading Elements in HTML5)-->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
<br>
<!--PARAGRAPH-->
<p>Paragraph One</p>
</body>
</html>
Output
Code Explanation
<!DOCTYPE html>
This is Document Type declaration made just before the starting of <html> tag, It helps the browser choose the version of HTML to be rendered, the declaration which we have used in the above example is specific for HTML5.
<html>
This is the starting tag of a HTML document, it is necessary to have a closing HTML tag.
<meta charset="UTF-8">
This meta information helps the browser to encode the text type properly, charset stands for Character Set. UTF stands for Unicode Transformation Format.
<head>
This is the heading element of the HTML document, it contains the title (<title> TITLE INFO. </title>) element of our webpage, the title is displayed in the browser’s tab, heading element also contains the meta information of the webpage.
<body>
Everything which we see in the browser’s windows comes under the body tag.
<!--COMMENT HERE-->
This tag is used to add comments in our HTML document, these are not to be rendered in the browser.
<h1>...<h6>
This is the heading tag which ranges from <h1> to <h6>, <h1> tag is used to render the biggest heading and gradually the size is reduced while we use <h2>, <h3>, <h4>,<h5> & <h6>.
<p>
This is paragraph tag used to write paragraphs in a HTML document.
For word wrapping in HTML, one can use the entity for the non-breaking space character, when you want to make sure that a line isn't broken. Alternatively, use the NOWRAP attribute to disable word wrapping and the <br/> element to force line breaks where desired.
Heading Tag with Horizontal Rule
The heading could be given with a horizontal rule. The <hr/> tag is used for specifying a horizontal rule in an HTML page. It is used to separate content.
<html>
<body>
<h1>HELLO! INCLUDE HELP</h1>
<hr/>
<!--non breaking ( ) Examples-->
<p>Include Help</p>
<p>
The heading could be given with a horizontal rule.
<br/> The "hr" tag is used for a horizontal rule in an HTML page.
<br/> It is basically used to separate content.
<br/>
</p>
</body>
</html>
The output of the following HTML code would be as follows,
Customize Headings with CSS
The CSS file also could be applied to the HTML code for the element heading. Inline CSS could be applied by using the style attribute.
<html>
<body>
<h1 style="font-size:60px;color: #0000ff;">
H1 heading with a new size.
</h1>
</body>
</html>
The output would be as,
