h5
Definition
The elements h1
to h6
group the contents of a document into sections, and briefly describe the topic of each section. There are six levels of headings, h1
being the most important and h6
the least important.
Example
<h1>Product XYZ Documentation</h1>
<p>Text text text ...</p>
<h2>Getting Started</h2>
<p>Text text text ...</p>
Best practice
Document outline
Assistive technologies use headings to build a document outline (or table of contents). Therefore, headings should be organized in a tree-like structure that starts with the most important heading h1
, followed by less important headings h2
, h3
, etc. The example below shows content organized using such a heading structure:
<h1>Welcome to ABC Inc.</h1>
<h2>What's New</h2>
<h3>Local News</h3>
<p>Text text text ...</p>
<h3>International News</h3>
<p>Text text text ...</p>
<h2>Events</h2>
<p>Text text text ...</p>
In this example, the document outline would look like this:
- Welcome to ABC Inc.
- What's New
- Local News
- International News
- Events
Skipping heading levels is considered bad practice. For example, if the heading h1
is followed by the heading h3
, the heading h2
will have been skipped.
Images in headings
Images can be used as headings, instead of text, provided the images have properly written alt
text, such as that seen in the following example:
<h1>Welcome to ABC Inc.</h1>
<h2><img src="news.gif" alt="What's New" /></h2>
<p>Text text text ...</p>
<h2><img src="events.gif" alt="Events" /></h2>
<p>Text text text ...</p>
Anchors
Headings make great anchors for hyperlinks. For example:
<p><a href="#events">This month's public events</a></p>
- ...
- ...
- ...
<h2 id="events">January Events</h2>
Attributes
Common core attributes
class
- (NameTokens) This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or set of class names. Multiple class names must be separated by white space characters. Class names are typically used to apply CSS formatting rules to an element.
id
- (ID) This attribute assigns an ID to an element. This ID must be unique in a document. This ID can be used by client-side scripts (such as JavaScript) to select elements, apply CSS formatting rules, or to build relationships between elements.
title
- (Text) This attribute offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element.
Common internationalization attributes
xml:lang
- (NameToken) This attribute specifies the base language of an element's attribute values and text content.
dir
This attribute specifies the base direction of text. Possible values:
ltr
: Left-to-rightrtl
: Right-to-left
Common event attributes
onclick
- (Script) A client-side script event that occurs when a pointing device button is clicked over an element.
ondblclick
- (Script) A client-side script event that occurs when a pointing device button is double-clicked over an element.
onmousedown
- (Script) A client-side script event that occurs when a pointing device button is pressed down over an element.
onmouseup
- (Script) A client-side script event that occurs when a pointing device button is released over an element.
onmouseover
- (Script) A client-side script event that occurs when a pointing device is moved onto an element.
onmousemove
- (Script) A client-side script event that occurs when a pointing device is moved within an element.
onmouseout
- (Script) A client-side script event that occurs when a pointing device is moved away from an element.
onkeypress
- (Script) A client-side script event that occurs when a key is pressed down over an element then released.
onkeydown
- (Script) A client-side script event that occurs when a key is pressed down over an element.
onkeyup
- (Script) A client-side script event that occurs when a key is released over an element.
Common style attribute
style
- (Text) This attribute specifies formatting style information for the current element. The content of this attribute is called inline CSS. The
style
attribute is deprecated (considered outdated), because it fuses together content and formatting.
Contains