Header level concern with the stair of header element and importance level on DOM (Document Object Module). As we all know that, xhtml is the presentation of web document. Now, web site are becoming more accessible , So, that website are defined as data rather than information. Data should be transportable, accessible for multi device and technology plus philosophy for future technology . So, that website’s DOM should structure in such a way that it could carry more subjective and informative instead for visual appearance.

Role

Header Element is also one of the important element on web document. Namely header element consist with header of document’s content . So, it is more semantic if we give header element for content header .

For example

<h2>{header  Content}</h2>
  <p>
  {content of header}
  </p>

Symantic

It would be more better , if you define Header element in objective wise on DOM . So, that we could identify which is header content, and comparatively how much important among other header element on document.

Let’s practice how to identify header element on document.

H1 : Company Logo, Page name, section name , category name, top parent name
H2 :, Article’s Title, User Module Title
H3 : Sub Article’s Title,
H4,H5,H6 : These are sub title of H3 content

Sequence

Sequence of Header element is also one of the essential part of presenting web document. Sequence of header is the way to place header element in sequential way according to the level of header. Such as h1 is in top and h6 is in bottom respectively. Let’s take one example .

  <h1>Company  </h1>
   {Navigation }
  <h2>Article  title </h2>
   <h3>Sub Header Text</h3>
  <p> content  of article </p>
  This is the good way to  present h1 element . Here h1 is in top and h3 is in last. Last take bad  sequence of header element
  <h2>Company  </h2>
   {Navigation }
  <h1>Article  title </h1>
   <h3>Sub Header Text</h3>
  <p> content of article </p>

Here h2 is in top and h1 is under h2 element , This is bad practice to structure web document.

XHTML 2

In XHTML 2 , we do not need to specify number sequence for header . DTD automatically identify the sequence of header element.

  <h>Page  Title</h>
  <h>Content Title</h>

Here header page title is more important because it is in top and content title is after page title header element.

Sample

In web designing process some designs are presented disorderly of header element. Let’s take one example of my experience (BGL) . In my experience BGL project more semantic . As you can see h3 is in top and h2 is under h3 element.
HTML CODE

  <div  id=”leftCol”>
  <h2 class="h2title"><span> </span>TEST UW KENNIS EN  WIN!</h2>
  <img height="126" width="216" class="image"  title="Game" alt="Gane"  src="images/game.jpg"/>

  <h3>SPEEL NÚ DE TOP 4000 POPQUIZ</h3>
  <div class="leftColContent">
  <p> content matter </p>
  <a class="link" href="#"> Speel gratis mee en  win!</a>
  </div>
  </div>

Although in appearance h3 is in top , we need to set h2 in top and h3 should be under h2 header element. Through css we can give visual presentation .

Attribute

Altogether there are 18 attribute of header element and categorized in information, formatting and event handler attribute. For symentic header element we will just follow information attribute lang,id,class and title attribute because formatting attribute can be done through class by id class attribute. All the attribute of event handler attribute can be done through javascript with id attribute. So, it would be more better not to specify event handler attribute in header element.

Information Event Handler
lang

id

class

title

onclick

ondblclick

onkeydown

onkeypress

onkeydown

okeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

Formating
align

dir

style

Correct method

<h1 class=”logo” id=”logo” title=”World Wide Web”>WWW</h1>

Wrong Method

<h1 ALIGN=”LEFT” class=”logo” style=”font-size:11px” title=”World Wide Web”>WWW</h1>

Here, css align and style’s behavior can be done through css with class attribute . It is bad habit to specify formatting attribute and event handler attribute in header element.

HGroup

This HGroup consiste of group of header elements group. <hgroup> html is used to detone header group.

For Example

<hgroup>
<h1> Main Header </h2>
<h2> Sub Header of main Header </h2>
</hgroup>

Note : You may need to post main header after least header . Such as h1 comes after h4. For this problem you can manage content in section and you can set hight header element <h1>. For section you can put <section>.

Conclusion

  1. Header element consist with header of document’s content
  2. Header element should present in objective wise. Such as h1 for main title of the site or page and h2 for content heading and so on.
  3. Sequence of header is the way to place header element in sequential way according to the level of header
  4. Only lang, id, class, title attributes should use in header element as per needed and rest attribute should control through JavaScript and CSS
Advertisements