h1-h6

h1, h2, h3, …, h6 are block-level elements. H1 is used for the most important headings and h6 is used for the least important headings.

I use headings hierarchically. That is, I will not use an h4 tag, unless there is an h3 tag above it.

Here are the headings with no particular style applied except for those used by this WordPress theme.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML Syntax
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Here are the same headings with but with customized styles.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
HTML Syntax
<h1 class="override">Heading 1</h1>
<h2 class="override">Heading 2</h2>
<h3 class="override">Heading 3</h3>
<h4 class="override">Heading 4</h4>
<h5 class="override">Heading 5</h5>
<h6 class="override">Heading 6</h6>
CSS Syntax
#post-1292 h1.override,
#post-1292 h2.override,
#post-1292 h3.override,
#post-1292 h4.override,
#post-1292 h5.override,
#post-1292 h6.override {
	font-family: arial, sans-serif;
	font-weight: normal;
}

	#post-1292 h1.override,
	#post-1292 h3.override,
	#post-1292 h5.override { font-weight: bold; }

	#post-1292 h5.override,
	#post-1292 h6.override { text-transform: uppercase; }

	#post-1292 h1.override { font-size: 2.75em; }
	#post-1292 h2.override { font-size: 2.25em; }
	#post-1292 h3.override { font-size: 1.75em; }
	#post-1292 h4.override { font-size: 1.75em; }
	#post-1292 h5.override { font-size: 1.25em; }
	#post-1292 h6.override {
		font-size: 1.25em;
		letter-spacing: 0.063em;
	}	

Leave a Reply

Your email address will not be published. Required fields are marked *