Suggestions/Help needed for semantic markup

Printable View

Oct 28, 2011, 13:32
capescafe

1 Attachment(s)

Suggestions/Help needed for semantic markup

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.

Attachment 57916

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:

Code:

<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.
Oct 29, 2011, 19:01
capescafe

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?
Oct 30, 2011, 08:48
PicnicTutorials

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.
Oct 30, 2011, 10:22
TechnoBear

Quote:

Originally Posted by capescafe

My thoughts were to just do something like:

Code:

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

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... :)

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.
Oct 30, 2011, 17:58
capescafe

Quote:

Originally Posted by TechnoBear

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... :)

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:

Code:

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

Quote:

Originally Posted by TechnoBear

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.

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?
Oct 30, 2011, 19:11
capescafe

Quote:

Originally Posted by EricWatson

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.

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?
Oct 31, 2011, 05:50
TechnoBear

Quote:

Originally Posted by capescafe

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:

Code:

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

Yes.

Quote:

Originally Posted by capescafe

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?

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?

Quote:

Originally Posted by capescafe

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?

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.
Nov 1, 2011, 11:31
capescafe

Quote:

Originally Posted by TechnoBear

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?

Yes that does help. Thanks.

Quote:

Originally Posted by TechnoBear

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.

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?
Nov 1, 2011, 11:50
TechnoBear

Quote:

Originally Posted by capescafe

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?

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.
Nov 2, 2011, 14:52
capescafe

Quote:

Originally Posted by TechnoBear

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.

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.