HTML Headers

HTML headers are used to set text as headers in various places on an HTML document. HTML headers are larger than most text on the page and are used to call attention to specific subjects. HTML headers come in several sizes and there are six HTML header elements. These elements are:

  • h1 - This header is normally only used once in an HTML document and is the largest header.
  • h2
  • h3
  • h4
  • h5
  • h6

Each lower header is a little smaller than the first with the "h1" element being the largest. However, cascading style sheet settings can be used to change default header element sizes and other characteristics. HTML Headings are always displayed as bold text (Unless modified using the STYLE attribute or style sheets). HTML Headings that are smaller than the <h3> tag such as <h4><h5> and <h6> are not commonly used since they are so small.

<p>
This is a sample HTML paragraph element. Any text in a paragraph goes here.
</p>


HTML Header Attributes

HTML header element attributes include:

  • align - (Depreciated) The align attribute is used to set the alignment of the paragraph with respect to the page size. Values are LEFT, RIGHT, and CENTER. Example: <p align="center">
  • class - The class attribute is used in conjunction with style sheets to associate an element with a class. The class attribute can set a class for specific element types or it can be independent of element types and work for all elements. The class attribute will provide the settings for specific style formatting. CSS properties are shown at the CSS Properties page.
  • ID - The ID attribute is used to apply style settings to specific individual HTML elements.
  • style - The style attribute is used to apply style settings for the specific element the style attribute is included with. An example is" <p style="font: 16pt courier"> - This sets the style or color of the text. This statement starts a paragraph with color, green: <p style="color: green">. The STYLE attribute is common to most HTML elements (See the CSS Properties page).
  • title - Used to give specific elements a title which may appear as a tooltip in some browsers when the mouse is held at or near the element.

HTML Header Contents

The HTML header elements can only contain inline elements which are listed at the HTML Inline Elements page.

HTML Header can be Inside

The HTML header elements can be contained inside the elements "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th".


HTML Header Examples

This is the HTML code for a header demonstrating use of the STYLE attribute.

<h2 style="text-align: 'center'; color: 'blue'">This Shows the Second Most Important HTML Header on a Page</h2>

This is how it looks:

This Shows the Second Most Important HTML Header on a Page.


Use of External Style sheet

External style sheet can be used to control these characteristics. The class attribute is commonly used with HTML elements to apply the style characteristics to the element. For example in my HTML header element, there is a line:

<link href="style.css" rel="stylesheet" type="text/css">

This line loads a style sheet file called "style.css". The style.css file contains the following lines:

h1, h2 { text-align: center }
h2.left { text-align: left }

The first line assigns attributes to the h1 and h2 HTML elements so they will be centered anytime they exist even if no class or special style characteristics are assigned to them. This first line applies to all h1 and h2 HTML heading elements. The second line creates a class that can be used with header 2 level elements to make them align on the left side of the page. It is used as follows:

<h2 class="left">A Header 2 Example</h2>

This header will be lined up on the left side of the page.