html semantics / css

ran into a slight problem when styling so I have stopped to think about my semantic markup. This is my current state.

H1 - site logo 
H2 - page title - eg: contact page
H3 - title of each shop
H4 - Description title

Now comes the part am unsure of: H4 - repeated and used for,

1) "Open Close" title
2) "Services" title
3) "Location" title
4) "Ratings" title 
5) "Comments" title 

1 to 5 are all headers for information, as you can see I currently ha开发者_如何学Gove 6 H4 elements per shop, 2 3 4 and 5 have the same styling, 1 has a different styling and H4 for description title also has a different styling.

One way is using upto H6 but the H5 for "Open Close" is smaller in font-size which means H5 would be smaller than H6. Rather than simply just style around the current code, I would rather edit the elements to improve the semantics of my code. Thanks

If you are willing to move into HTML5 territory, you could drop things into <hgroup> like so:

<header>
<hgroup>
    <h1>Site Title</h1>
    <h2>Sub Heading</h2>
  </hgroup>
</header>

<section>
  <hgroup class="shop">
    <h1>Shop Name/Title</h1>
    <h2>Description</h2>
    <h3>Open/Close</h3>
    <h3>Services</h3>
    <h3>Etc.</h3>
  </hgroup>
</section>

Using <hgroup> will allow you to reuse your <h> elements semantically.

I suppose that while you consider semantic, you still think too much about presentation.

You should split the design process into two phases. In the first, you think about semantics ONLY - you may event try to NOT watch the pages in the browser. Look at the raw HTML code, and think whether the code looks good.

In HTML5 you have <section> and <article> tags. Use them to group your contents into sections, and in each section place a <h1> tag. This will be semantically good.

In case you use HTML4, you might use <div class="..."> to mark sections, and use <h1>..<h6> as the headers, but still do not think about the font size yet!

After you have done that, you may start thinking about presentation. Assign a class to each section, and define the headers according to the section the header is in. An example:

<article>
  <h1><img src="logo" alt=""/>Page title</h1>
  <section class="shop">
    <h1>Shop 1</h1>
    <section class="items">
      <h1>Open Close</h1>
      <!-- something -->
    </section>
    <section class="items">
      <h1>Services</h1>
      <!-- something -->
    </section>
    <!-- more sections... -->
  </section>
  <section class="shop important">
    <h1>Shop 2</h1>
    <!-- and so on... -->

And then you are free to style the headers as you wish, using the full power of CSS selectors where appropriate.

article > h1 { // Page header
  font-size: 200%;
}
section.shop  > h1 { // Shop title
  font-size: 150%;
}
section.shop + section.shop > h1 {  // All but the first..
  color: gray;
}
section.items > h1 { // item title
  font-size: 110%;
}
section.shop.important > section.items:first-child > h1 {
  color: red;
}

The class "items" should be probably named differently, but I am not sure what is the purpose of the sections of the "shop" section. It was given just as an example, because you can safely omit the class at all, and you still may style them using the proper selectors:

section.shop > section > h1 {
  // format of the "items" section
}

You can use CSS to style the various headers, so you can have something like

<h1>The sites title</h1>
<h2>This is the contacts page</h2>
<h3>Address</h3>
our address
<h3>Phone nunbers</h3>
phone numbers

etc.

Then in css you can have

h1
{
    font-size: 10pt;
}

h2
{
    font-size:15pt;
}

etc. (which makes the h2 tags of a larger size!)

If you care about SEO, H1 should be used for page title. Check H1 tags, SEO and semantics

You can create classes for the font sizes, say -

CSS

.large {
    font-size: 2em;
}

.larger {
    font-size: 22.5em;
}

.huge {
    font-size: 3em;
}

Similarly, you can make different wrappers with distinct ID's for your different pages. And then use there ID's to style the elements.

For the headers you can make a class .desc (or anything else that you like). Then you can have divs like

1. #services
2. $about-us
3. #contact

Now you can specifically style your h4 element by adding a class .desc to it.

HTML

<h4 class="desc">
</h4>

CSS

#services h4.desc {
    /*The styling comes here*/
}
#about-us h4.desc {
    /*The styling comes here*/
}
#contact h4.desc {
    /*The styling comes here*/
}