Build a Better Process
Build a Better Process
/ factorpad.com / tech / html5 / reference / html-h1-tag.html
An ad-free and cookie-free website.
Beginner
The six heading tags,
<h1> to
<h6>, add a text
heading between paragraphs or sections in an HTML document.
Specifications for font, line thickness, color and pattern are set in CSS. So headings themselves do not have their own attributes.
Since the only difference between the six heading tags is the number in the tag, all six will be covered in this reference.
The <h1> to
<h6> tags only occurs in the
<body>, so the visible section
of the document.
From there, headings are normally inserted into larger blocks, like
within <div> elements, often
forming breaks between <p>
paragraph elements.
As a block-level element, headings take up the whole horizontal space of the surrounding container or parent element by default. So HTML code that comes after the heading tag will start on a new line.
So the <h1> to
<h6> tags are as much about
document structure as they are about text itself.
Each of the six heading elements require opening
<h1> and closing
</h1> tags. The text within the
tags is displayed.
Unlike other most other elements, headings have no attributes in HTML5. Of course global attributes apply, as they do with all elements.
Because headings form outlines for screen readers and maintain document structure, using them in order is advised.
Also, it is common to have only one
<h1> heading in a document.
This sometimes matches the
<title> element, but is not
required to.
HTML code input above will appear as shown below.
Heading 3A paragaph under heading 3 using the factorpad.com CSS. Heading 4First paragraph under heading 4. Heading 4Second paragraph under heading 4. Heading 5Think of headings as forming an outline and use them in order. So don't follow h3 with h5. Here is a heading 5 below heading 4. |
As with all tags, global attributes can always be set,
like with id="name".
As mentioned, the <h1> and other
heading elements don't have their own attributes, or they would be
detailed here.
Each browser (Chrome, Safari, Firefox) has its own settings for when
customized CSS settings are not provided. By default, the size of the
font and the margin above and below the element declines as you move
from <h1> to
<h6>. This visually shows the
rank order by size, from largest to smallest.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
styles the <h1> to
<h6> elements using the
following specifications. The default font is Times New Roman and em,
or default font size, is 16px.
Note that for the <h4> tag
font-size: is missing, which means
that the default of 1em holds.
The following HTML code will create a web page with
<title> element content that
closely resembles the content in the
<h1> element.
The following HTML code will create a web page with heading tags placed as though they created an outline of the document, with proper nesting.
So this document shell can be filled with text after the author sets up the structure with heading elements.
Learning takes practice. Type these lines into a text file, save it with an .html extension and open it in a browser.
After that, start taking notes and writing in HTML to gain experience.
The <h1> to
<h6> headings sit between
paragraph elements, and that sits in the body element.
See what else you can learn for free at our YouTube Channel. Also follow @factorpad on Twitter for content updates.
by <div>
tag, click Back.<head>
tag, hit Next./ factorpad.com / tech / html5 / reference / html-h1-tag.html
A newly-updated free resource. Connect and refer a friend today.