SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(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.

    sections.jpg

    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  2. #2
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by capescafe View Post
    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.

  5. #5
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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 View Post
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  6. #6
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by capescafe View Post
    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 View Post
    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 View Post
    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.

  8. #8
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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 View Post
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by capescafe View Post
    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.

  10. #10
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •