Suggestions/Help needed for semantic markup

HTML & CSS
1

Hi all,

I’m currently working on my very first Responsive Web Design and I want to be really careful to use correct semantics when coding the content first. So I did a generic mock-up in Illustrator of the different modules or sections of the site I’m working on. Here’s a .jpg image of the section in question that I’m not quite sure of the best way to mark it up semantically.

I’ve been searching through different sites to see how it has been done. I’ve seen unordered lists with the title just being between strong tags and the image tag before the a tag. I also saw one place where the image was placed inside the i tag and then the heading was tagged with an h2 tag.

My thoughts were to just do something like:


<div id="current-issue">
     <img src="images/current-cover.jpg" alt="Current Issue">
     <h1>Issue Heading Here</h1>
     <h2>Vol. XI No. 2<br>Fall 2011</h2>
     <a href="#" id="subscribe">Subscribe</a>
</div>

<div id="recent-issues">
     <h1><a href="#">More Recent Issues...</a></h1>
          <div class="past-issue">
          <img src="images/past-cover1.jpg" alt="Issue title">
          <h2>Another Issue Heading</h2>
          <h3>Vol. XI No. 1<br>Spring 2011</h3>
          </div>

          <div class="past-issue">
          <img src="images/past-cover2.jpg" alt="Issue title">
          <h2>Another Issue Heading</h2>
          <h3>Vol. X No. 2<br>Fall 2010</h3>
          </div>
</div>

I’m not sure if maybe for the More Recent Issues section I should use an unordered list? And the cover images should be part of the markup correct? Since they have meaning for the content, they’re not decorative?

If anyone has any better suggestions and why I should do it that way I’d really love the help.

2

Did anyone have any suggestions as to the semantics of my markup. Is it fine the way it is? Or would there be a better way to mark it up that would be more semantic?

3

I fancy myself as a simple seo coder. Meaning I take my effort and googles into account. That is pretty much exactly as I would code it up. Those dont look like list to me. Divs stand for division. So your using them exactly as should be.

4

I would probably have used a definition list, particularly for your past issues. You seem to have headings with no content following them, which just seems an odd arrangement to me. I would normally expect a paragraph or two of text under a heading. Maybe I’m just taking your example too literally… :slight_smile:

One point I would make is about your images and alt text. I agree that the cover images have meaning for the content. Somebody looking at them will see the main headlines or theme of the issue, giving them a better idea of whether or not they would be interested in that issue. Think about giving users without access to the pictures a similar hint. “Current issue” doesn’t tell me very much and anyway, you already have text describing which issue it is. How about “Garden bonfire safety and how to store your pumpkin crop” or “Top Tips for cleaning your motorbike” or whatever it is that the picture conveys.

5

Yeah, I agree…I just wasn’t sure how else to do it. But would a definition list be better than having the issue titles be heading tags? Do you mean something like this:


<dl>
     <dt>Another Issue Heading</dt>
     <dd>Vol. XI No. 1</dd>
     <dd>Spring 2011</dd>
</dl>

Very good point. I was going to add the actual title of the issue in the real page for the alt tag, but you think I need even more description, more than just the title of the issue?

6

So you think it’s ok to not have content after the headings? Or could I put the Vol. number and year in a p tag after the heading tags? What’s your opinion on the definition list?

7

Yes.

As I said before, think about what your image conveys, and try to put that in the alt text. For example, I did a site for a B&B, and they were very keen to have a photo of their dining room on the site. Why? Not to prove the obvious, that they have a dining room, but because it showed a glorious sea-view through the the window. So using “dining room” for the alt text, while strictly accurate, didn’t convey the same information as the picture. “Brigadoon Harbour from the dining room window” adds the same extra detail as the photo does. Does that help?

One of my reservations about using <h*> tags for everything is the effect on assistive technology, such as screen readers. I understand that these allow users to scan through the headings on a page, much as a sighted user does, to find the most relevant content. If every line is a heading, you’ve removed this tool and forced them to read through the entire content.

8

Yes that does help. Thanks.

I see you make a good point. Perhaps I need a heading at the top section “Current Issue” and then a heading for the second section, “More Recent Issues…” then the each section with the definition lists?

9

That seems to me to make sense.

Another approach would be to leave your “issue header” as a heading, and follow it with a brief paragraph describing the main features in that issue. If you did that, you could apply the cover images as background images and not need to worry about alt text.

10

Oh yeah ok…that’s a good idea too. Hmmm back to the drawing board. I need to see what will work best. Thanks for the suggestions.