1

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 have 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

5
  • in HTML5 h2, h3, h4, … are rearly used. There is a new outline algorithm. See the spec for more info.
    – knut
    Aug 31, 2011 at 21:02
  • 1
    your logo doesn't belong in an h1 element. That's not what h1 is meant for.
    – zzzzBov
    Aug 31, 2011 at 21:05
  • @zzzzBov: It does. Otherwise the outline would be wrong.
    – unor
    Sep 9, 2012 at 15:15
  • @unor, your logo definitely does not belong in an h1 element, with the very explicit exception of when the textual representation of your logo ([alt] attribute essentially) makes sense as the primary heading for the entire page. On Stack Overflow, the question title is the h1, or in the case of queries, the title of the query is the h1. I do not know of any page on stack overflow where the content of the page is adequately described by the heading "StackOverflow".
    – zzzzBov
    Sep 9, 2012 at 16:17
  • @zzzzBov: When a page has global a navigation/menu, this navigation needs to be in a (implicit or explicit) section and therefor it has an implicit or explicit heading. This heading ("Navigation" or "Menu" or implicit) has to be in scope of the whole web page, not in the scope of the article/content. Therefor, the outline of Stackoverflow is wrong: check the outline of this question – the main navigation is missing in it (needs to be in nav or get its own h).
    – unor
    Sep 9, 2012 at 17:22

5 Answers 5

1

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.

3
  • Yeah am using HTML5, forgot to state that. If i use the hgroup element, all my H1 elements will be the same type size. SO i would have to have selectors like "header h1 { }" and "section h1 {}" am guessing this is standard practise so the H1 styling can be differentiated.
    – Renai
    Aug 31, 2011 at 22:02
  • You are correct. All your <h1>s would be of the same size until you differentiated them using further selectors, such as those you listed as examples.
    – Matt
    Aug 31, 2011 at 22:18
  • am abit of a minimalist, i like to use as few elements and css declarations as possible, but semantics is high on my priority list rather than for the sake of styling. Although very rarely i need to use an additional element, very rarely. thanks
    – Renai
    Sep 1, 2011 at 0:21
1

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
}
3
  • shit, am stuck between following your concept or the above guys who talks about using Hgroup. Am using html5 and i am currently looking only at the code. As i began to style i noticed incorrect use of tags. I am currently using DIV's with a class which i shall replace with SECTIONS. Technically each heading, RATINGS, Services are sub headings for a shop, but part of a new section hence the heading. So i believe H1 for each section is semantically correct, all but one section will have 1 heading element only. Should i use the Hgroup for the part where i have multiple H elements ?
    – Renai
    Sep 1, 2011 at 19:18
  • <hgroup> is used when you have a title which itself is splitted between 'more important part' and 'less important part' - like a title and a subtitle. I guess you do not need hgroup and mere h1 will suffice, but in reality this does not matter - you may place a h1 in one section, and in another one you may place a hgroup if the title of that section has a subtitle. See the specification of hgroup element.
    – Arsen7
    Sep 2, 2011 at 8:10
  • To be more specific: I think you do not need multiple H elements. You should just split these places, where you was using <h4> into different sections, and each of these sections will have its own <h1>.
    – Arsen7
    Sep 2, 2011 at 8:18
0

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!)

1
  • The question is should repeat H tags for similiar headings of the same styling, is it semantically correct to have H5 smaller than H6 ? I thought the typesize is meant to descent. Should "Open Close" headings/title be a heading or within a span element, as it does head the open and close hours.
    – Renai
    Aug 31, 2011 at 20:47
0

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

-1

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*/
}
1
  • 3
    -1 for non-semantic classes .large, .larger and .huge. They describe the style not the content.
    – zzzzBov
    Aug 31, 2011 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.