Home »
HTML
HTML Heading Tags
HTML Heading Tags: In this article we will learn some basic and most used tags (Heading Tags) and elements of HTML5.
Submitted by Jhanvi Tripathi, on July 28, 2019
The headings are an important aspect in a document. The heading could be provided on the webpage through HTML.
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.
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
Tags and Elements in the above Example:
<!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.
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,
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,
