{"id":75,"date":"2005-02-08T02:24:42","date_gmt":"2005-02-08T00:24:42","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/02\/08\/the-problems-with-the-headings\/"},"modified":"2005-04-03T16:27:56","modified_gmt":"2005-04-03T14:27:56","slug":"the-problems-with-the-headings","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/02\/08\/the-problems-with-the-headings\/","title":{"rendered":"The Problems with the Headings"},"content":{"rendered":"

The project i\u2019m currently working on, requires me to re-think\/redo structure of the headings in a way somewhat different than i did it before. Searching through my usual resources (W3C<\/acronym><\/a> and some usual standardista\u2019s blogs) left me with no answer, but with question or two more.<\/p>\n

I\u2019ve found that there is at least 4 major philosophies when applying headings:<\/p>\n

    \n
  1. headings for structure<\/li>\n
  2. headings for content<\/li>\n
  3. headings for Google<\/li>\n
  4. hybrid headings<\/li>\n<\/ol>\n

    Each of these have some cons and pros, which i\u2019ll try to summarize. For easier following, let\u2019s say we are dealing with an online version of some daily newspaper. This newspaper has its\u2019 name for example \u201dDaily Sports\u201d, and has some categories about football, basketball and skiing. The home page contains hot stuff, and in general gives a quick overview about what\u2019s going on inside the web site. The category page gives an overview of articles within it. The article page contains headlines, images and text, but every article is in some way connected to a few others, so at every article page, there\u2019s a list of related stories. So, we have 3 types of layouts, with the same common elements like navigation, logotype and the usual stuff.<\/p>\n

    Headings Layout A<\/h3>\n

    In these layouts, headlines are supposed to be styled with CSS to pull user\u2019s attention when viewed in graphical user agent. This means that the article page\u2019s <h3><\/code> can be the biggest of all on that particular page.<\/p>\n

    Home Page<\/h4>\n
    <body>\r\n   <h1>Daily Sports<\/h1><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Hot News Overview<\/h2><\/strong>\r\n         <div>\r\n            <h3>Hot News One<\/h3><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Category Page<\/h4>\n
    <body>\r\n   <h1>Daily Sports<\/h1><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Category Title<\/h2><\/strong>\r\n         <div>\r\n            <h3>Category News One<\/h3><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Article Page<\/h4>\n
    <body>\r\n   <h1>Daily Sports<\/h1><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Category Title<\/h2><\/strong>\r\n         <div>\r\n            <h3>Article Title<\/h3><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Headings Layout B<\/h3>\n
    Headings are related to importance of the content headings. Here the <h1><\/code> wraps the main title at the current page.<\/p>\n
    Home Page<\/h4>\n
    <body>\r\n   <h1>Daily Sports<\/h1><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Hot News Overview<\/h2><\/strong>\r\n         <div>\r\n            <h3>Hot News One<\/h3><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Category Page<\/h4>\n
    <body>\r\n   <div>Daily Sports<\/div><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h1>Category Title<\/h1><\/strong>\r\n         <div>\r\n            <h2>Category News One<\/h2><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Article Page<\/h4>\n
    <body>\r\n   <div>Daily Sports<\/div><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <div>Category Title<\/div><\/strong>\r\n         <div>\r\n            <h1>Article Title<\/h1><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Headings Layout C<\/h3>\n
    Previous example is quite inaccessible, so mostly the two mentioned before are combined to satisfy some accessibility requirements (i.e. providing headings for the sections of the page) and to emphasize importance of particular content. However, these layouts are usually improperly outlined by markup validator.<\/p>\n
    Home Page<\/h4>\n
    <body>\r\n   <h1>Daily Sports<\/h1><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Hot News Overview<\/h2><\/strong>\r\n         <div>\r\n            <h3>Hot News One<\/h3><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Category Page<\/h4>\n
    <body>\r\n   <h3>Daily Sports<\/h3><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h1>Category Title<\/h1><\/strong>\r\n         <div>\r\n            <h2>Category News One<\/h2><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    Article Page<\/h4>\n
    <body>\r\n   <h3>Daily Sports<\/h3><\/strong>   \r\n   <p>some content<\/p>\r\n      <div>\r\n      <h2>Category Title<\/h2><\/strong>\r\n         <div>\r\n            <h1>Article Title<\/h1><\/strong>\r\n            <p>news text<\/p>\r\n         <\/div>\r\n         ...\r\n      <\/div>\r\n<\/body><\/pre>\n
    The <title><\/code>  Element<\/h3>\n
    The <title><\/code> element holds actual name and\/or description of the document. It describes what this particular sub-page is about. According to W3C: <\/p>\n
    \u201cAuthors should use the TITLE element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as \u201cIntroduction\u201d, which doesn’t provide much contextual background, authors should supply a title such as \u201cIntroduction to Medieval Bee-Keeping\u201d instead.\u201d<\/p><\/blockquote>\n
    The <title><\/code> element is usually containing something like \u201cWebsite\u2019s name > Category > Article Title > Article description\u201d.<\/p>\n
    The Google Aspect<\/h3>\n
    The algorithm by which Google indexes web pages is still quite a mystery. However, extensive usage of headings and <title><\/code> element seems to help in gaining higher page rank. Needless to say, applying too many words and phrases into <h1><\/code> and <title><\/code> may position a web site higher at Google, but is not contextually appropriate. Many authors believe that the real and constantly refreshed content can provide more than adequate feed for the Google , without obsolete SEO<\/acronym> (Search Engine Optimization) trickery.<\/p>\n
    Headings in a Book<\/h3>\n
    If you compare a book  and a web site, there is certain similarity\u2013at least as i see it: The <h1><\/code> of  a book is it\u2019s title, for example \u201cWeb Standards Book\u201d, <h2><\/code>s are titles of the chapters\u2013\u201cMarkup\u201d, \u201cStyling\u201d and \u201cScripting\u201d, <h3><\/code>s are titles of the particular stories\u2013\u201cHTML\u201d, \u201cXML\u201d and \u201cXHTML\u201d in the \u201cMarkup\u201d chapter; \u201cCSS\u201d and \u201cXSL\u201d in the \u201cStyling\u201d chapter; \u201cDOM\u201d and \u201cECMA\u201d in the \u201cScripting\u201d chapter… you got the point. The way i see it\u2013the <title><\/code> is that small text in the upper-left (or upper-right) corner telling you the title of a story, chapter or the of a book. Or am i wrong?<\/p>\n
    The Questions<\/h3>\n
      \n
    1. Which of the three simplified layouts is the most correct?<\/li>\n
    2. Is the separation of the presentation and structure also a separation of presentation and context (or context and structure)?<\/li>\n<\/ol>\n
      Related reading<\/h3>\n