HTML <h1-h6> tagsS2C Home   « HTML <h1-h6> tags

Definition

The <h1> to <h6> tags are used to define the six HTML headings.

Examples


<h1>h1 - The daddy of all headings, one per page.</h1>
<h2>h2 - Use this for section headings.</h2>
<h3>h3 - Use this for subsection headings.</h3>
<h4>h4 - These headings are generally the same size as normal text</h4>
<h5>h5 - These headings are smaller than normal text.</h5>
<h6>h6 - This is the smallest heading.</h6>

The daddy of all headings, one per page.

Use this for section headings.

Use this for subsection headings.

These headings are generally the same size as normal text

These headings are smaller than normal text.
This is the smallest heading.

Attributes

The following attributes can be used with the <h1> to <h6> tags.


<h1> to <h6> Specific Attributes
Attribute Value Description Example
There are no required or optional attributes specific to the <h1> to <h6> tags.
<h1> to <h6> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<h2 class="name">Heading Text</h2>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<h2 id="name">Heading Text</h2>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<h2 style="color:red;">Heading Text</h2>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<h2 title="Content info">Heading Text</h2>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<h2 accesskey="a">Heading Text</h2>
tabindexSpecifies a tab order for the element. 

<h2 tabindex="1">Heading Text</h2>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<h2 dir="ltr">Heading Text</h2>
<!-- The text will flow from right to left -->
<h2 dir="rtl">Heading Text</h2>
langSpecifies a language code for the content of the element. 

<h2 lang="en">Heading Text</h2>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<h2 spellcheck="true">Heading Text</h2>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<h2 translate="no">Heading Text</h2>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<h2 contenteditable="true">Heading Text</h2>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<h2 draggable="true">Heading Text</h2>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<h2 hidden>Heading Text</h2> 
<h2 hidden="hidden">Heading Text</h2>
<h1> to <h6> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<h2 oncopy="go()">Heading Text</h2>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<h2 oncut="go()">Heading Text</h2>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<h2 onpaste="go()">Heading Text</h2>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<h2 ondrag="go()">Heading Text</h2>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<h2 ondragend="go()">Heading Text</h2>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<h2 ondragenter="go()">Heading Text</h2>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<h2 ondragleave="go()">Heading Text</h2>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<h2 ondragover="go()">Heading Text</h2>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<h2 ondragstart="go()">Heading Text</h2>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<h2 ondrop="go()">Heading Text</h2>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<h2 onblur="go()">Heading Text</h2>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<h2 onchange="go()">Heading Text</h2>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<h2 oncontextmenu="go()">Heading Text</h2>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<h2 onfocus="go()">Heading Text</h2>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<h2 oninput="go()">Heading Text</h2>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<h2 oninvalid="go()">Heading Text</h2>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<h2 onreset="go()">Heading Text</h2>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<h2 onselect="go()">Heading Text</h2>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<h2 onsubmit="go()">Heading Text</h2>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<h2 onkeydown="go()">Heading Text</h2>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<h2 onkeypress="go()">Heading Text</h2>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<h2 onkeyup="go()">Heading Text</h2>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<h2 onabort="go()">Heading Text</h2>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<h2 oncanplay="go()">Heading Text</h2>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<h2 oncanplaythrough="go()">Heading Text</h2>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<h2 oncuechange="go()">Heading Text</h2>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<h2 ondurationchange="go()">Heading Text</h2>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<h2 onemptied="go()">Heading Text</h2>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<h2 onended="go()">Heading Text</h2>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<h2 onloadeddata="go()">Heading Text</h2>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<h2 onloadedmetadata="go()">Heading Text</h2>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<h2 onloadstart="go()">Heading Text</h2>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<h2 onpause="go()">Heading Text</h2>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<h2 onplay="go()">Heading Text</h2>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<h2 onplaying="go()">Heading Text</h2>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<h2 onprogress="go()">Heading Text</h2>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<h2 onratechange="go()">Heading Text</h2>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<h2 onseeked="go()">Heading Text</h2>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<h2 onseeking="go()">Heading Text</h2>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<h2 onstalled="go()">Heading Text</h2>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<h2 onsuspend="go()">Heading Text</h2>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<h2 ontimeupdate="go()">Heading Text</h2>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<h2 onvolumechange="go()">Heading Text</h2>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<h2 onwaiting="go()">Heading Text</h2>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<h2 onclick="go()">Heading Text</h2>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<h2 ondblclick="go()">Heading Text</h2>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<h2 onmousedown="go()">Heading Text</h2>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<h2 onmousemove="go()">Heading Text</h2>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<h2 onmouseout="go()">Heading Text</h2>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<h2 onmouseover="go()">Heading Text</h2>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<h2 onmouseup="go()">Heading Text</h2>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<h2 onwheel="go()">Heading Text</h2>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<h2 onscroll="go()">Heading Text</h2>
Window - NONE

Relevant HTML Tutorials

HTML Basics - Inline Semantics