Tags for this article: css, format, headings, html, style sheet, tutorial
HTML differentiates between 6 levels of headings, in order to create hierarchical relationships in the document.
An Example
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Headlines</title>
</head>
<body>
<h1> 1. order heading</h1>
<h2> 2. order heading</h2>
<h3> 3. order heading</h3>
<h4> 4. order heading</h4>
<h5> 5. order heading</h5>
<h6> 6. order heading</h6>
</body>
</html>
Explanation:
<h(1-6)> introduces a heading. The number stands for the heading level. 1 is the highest level, 6 is the lowest. Afterwards the text in the heading follows.
</h(1-6> ends the heading and should be at the end of the heading text.
Take Note:
The numbers for the beginning and closing tags must be the same.
Every heading is its own paragraph, which means no paragraph spacing is necessary before and after headings. The rules regarding the character set, special characters, and HTML specific characters all apply for the heading text.
Aligning Headings
Headings are aligned on the left, if not instructed to do otherwise. You can also align a heading centrally or on the right. Justifying is possible too.
An Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Headings</title>
</head>
<body>
<h1 align=”center”>centred 1. order heading </h1>
<h2 align=”center”>centred 2. order heading </h2>
<h3 align=”center”>centred 3. order heading </h3>
<h1 align=”right”>right aligned 1. order heading</h1>
<h2 align=”right”>right aligned 2. order heading</h2>
<h3 align=”left”>left aligned 3. order heading</h3>
<h1 align=”justify”>Very long justified 1. order heading, which is only visible after there are multiple lines of text <h1>
</body>
</html>
Explanation:
Through the align=“center” element in the introductory heading tag, you make it so that the heading is centrally aligned. The align=“right” element aligns the heading on the right. While the align=“justify” justifies the heading, and the align= “left” element aligns the heading in its normal place on the left.
Take Note:
Not all browsers can interpret justified text. Justifying together with headings is not always practical, because justified text is only noticeable with multiple lines of text.
align has been classified as deprecated in the HTML 4 standard. Instead we recommend using style sheets, for example: <h1 style= “text-align:center”>…</h1>.
Formatting Headings with CSS
HTML has no influence on how a heading will be presented by a browser. The browsers use default formatting in order to display headings. However, you can format headings in any way you please with style sheets. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.
An Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Headings with CSS</title>
</head>
<body>
<h1 style= “font-size:300%; color:red”> 1. order heading</h1>
</body>
</html>
Explanation:
The 1. order heading is defined with a 300% font size and red colour in the above example.