HTML Heading- using Header Tags

HTML Header Tags or simply called ‘headings’ are used to enhance readability, presentation and content organization of a web page. Headings describe what the visitors are going to read or get under it. Web designers create headings to draw attention of users to a specific section of a page.

HTML header tags are predefined tags from H1 the biggest and boldest to H6 the smallest in a web page.

Features of Header Tags

  • Headings are paired tags denoted by H followed by number from 1 to 6
  • The text enclosed in header tags is always displayed as bold.
  • Header tags’ attributes can be used to change their default look and feel.
  • There is no specific sequence of using the header tags in a web page. In short it is NOT mandatory to use biggest to smallest header tags from top to bottom of a web page. You can use any header tag as and when required.

Attributes for HTML Header Tags

ALIGN

Align attributes is used to align the header text. The header can be aligned to left, center, right or justified. The values allowed in ALIGN attribute are LEFT, RIGHT, CENTER and JUSTIFY. The header text will appear LEFT aligned by default.

ID

This attribute is used to give identification to a header element. The value allowed is an alphanumeric string. The ID value should be unique for a web page. This ID can be used in a script to manipulate it.

CLASS

This attribute is used to associate a header with a class defined in a style sheet associated with the page or website. The style sheet element specifies the consistent style for multiple elements in a web page.

STYLE

If you want to add additional styling to a header you can do with this attribute. You can set styles in a string form with CSS element and value pairs separated by semicolons.

TITLE

Title attribute is used to set tooltip text for a header. When the user rests the mouse cursor on the header text, a value assigned to TITLE attribute appears in a small outlined box.

DIR

DIR means direction. This attribute is used set the direction of the non aligned header text. Possible values are LTR for left to right or RTL for right to left.

Example 

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<H1>Heading size H1</H1>
<H2>Heading size H2</H2>
<H3>Heading size H3</H3>
<H4>Heading size H4</H4>
<H5>Heading size H5</H5>
<H6>Heading size H6</H6>
<H1 ALIGN="RIGHT">Right aligned Heading </H1>
<H1 ALIGN="JUSTIFY">Justified Heading </H1>
<H2 ALIGN="CENTER">Center Aligned Heading</H2>
<H3 TITLE="H3 Headings manipulated with title Attribute">Heading with Title Attributes</H3>
<H4 DIR="LTR">Heading with direction LTR</H4>
<H5 DIR="RTL">Heading with direction RTL</H5>
<H6 STYLE="font-size:20px; color:green; ">H6 modified with STYLE attribute font size 20 and color green</H6>
</HTML>
Output
HTML Header Tags