Headers are a group of HTML tags that are used to group an HTML document into sections like in an outline. There are six levels of headers, each with their own element numbered h1-h6. While the sizes of each heading can be overridden with Cascading Style Sheets, by default, the most significant and largest header is h1 while the least significant and smallest is h6.

See also: h1, h2, h3, h4, h5, h6, b, big, font, small, strong

Attributes

The heading tags do not have any required HTML attributes. However, they do have a long list of optional attributes:

• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
     
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the heading
     
• HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released

Usage

To use any of the header tags, simply place opening and closing HTML tags around the header text. For example:

<h1>Header Level 1</h1>
<h2>Header Level 2</h2>
<h3>Header Level 3</h3>
<h4>Header Level 4</h4>
<h5>Header Level 5</h5>
<h6>Header Level 6</h6>

On browsers that support this tag, this will typically cause the words "Header Level 1" to be very large, with each line getting smaller until the smallest header is reached at "Header Level 6".

The purpose of the tags are to structure your document for easier viewing and parsing. Therefore, the header tags should not be used to replace any tags for making text larger (big, font), smaller (small, font), or bolder (b, strong). In fact, as can be seen in the example below, the header tags are block elements, and will automatically cause a padded area above and below the header text similar to the p (paragraph) tag, so cannot be easily used as inline elements.¹

Everything2 Support?

E2 does provide limited support for the all of the header tags. It does not allow the use of any of its HTML attributes. Below is how your browser displays the example above here on Everything2. You may notice that the sizes are not displayed as expected (especially in the ekw theme) due to the format of the style sheets used on E2.

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5

Header Level 6

If you would like to use this tag with any of its attributes, you can do so in your Notelet Nodelet.

Common Browser Implementations²

Most web browsers support these tags, as they have been around since at least HTML 2. Most browsers implement the tag as described above by rendering the header text in different sizes. It is the font and any style sheets used for the heading that will determine precisely how large it will be in the document.

Previous HTML Tag: frameset (previous E2 supported HTML tag: em)
Next HTML Tag: head (next E2 supported HTML tag: hr)
See Also: HTML tags and HTML attributes

¹ You can work around the padding issue by using stylesheets, but you should be careful not to lose site of using this tag as a structural element.

² Please feel free to send me information about how other browsers implement these tags.

While in polite company, one would normally start their heading tags with h1 and works downwards through h6.

However, on E2 the name of the node is contained within h1 tags in the markup, so using an h1 tag within a writeup would place that heading as the same importance as the node title, which generally would not make much sense. (If the title is of the same importance as the node name, shouldn't the title be in a node of that name?)

It would therefore make more sense here (and be more semantically correct) for any use of heading tags within a writeup to begin with h2 and move downwards, since each item in a node should logically fit under the name of the node, which is of heading importance h1.