zeo » cms http://zeo.unic.net.my Safirul Alredha on web, WordPress, K2, Apple, ... Thu, 02 Jun 2011 01:31:06 +0000 en hourly 1 http://wordpress.org/?v=3.3 Mind your headings http://zeo.unic.net.my/mind-your-headings/ http://zeo.unic.net.my/mind-your-headings/#comments Fri, 10 Nov 2006 17:21:03 +0000 zeo http://zeo.unic.net.my/notes/mind-your-headings/ Headings help you define the structure and the hierarchy of a document properly. There are six levels of headings in HTML which consists H1, H2, H3, H4, H5 and H6. Even so, the most widely used headings are H1, H2 and H3. Please keep in mind that H1 is the largest heading where H6 is the smallest. Don’t use headings because it’s bold and has larger font size because it will defeat its own purpose.

In a document that uses headings, always start with H1. Usually in blogs, H1 refers to blog title but not entry title. This is common for a normal blog design which many don’t agree.

Furthermore, H1 should only exist once in a document. But many website now days ignores the correct outline and levels arrangement. I noticed that skipping heading levels are quite popular even among well known designers. This mistake sometimes considered inevitable if you’re using CMS like WordPress.

An example of a correct use of headings:

<h1>This is H1</h1>
 <p>Some texts...</p>
<h2>This is H2</h2>
 <p>Some texts...</p>
<h3>This is H2</h3>
 <p>Some texts...</p>

Skipping headings level are considered as bad practice. For example below, the H2 is missing:

<h1>This is H1</h1>
 <p>Some texts...</p>
<h3>This is H3</h3>
 <p>Some texts...</p>
<h4>This is H4</h4>
 <p>Some texts...</p>

You can check whether your current website or blog headings are outlined correctly by using Web Developer Toolbar — an extension for Mozilla Firefox. From the Web Developer toolbar, go to Information → View Document Outline.

]]> http://zeo.unic.net.my/mind-your-headings/feed/ 2