Results 1 to 10 of 10
Oct 28, 2011, 12:32 #1
- Join Date
- Dec 2004
- Bellevue, WA
- 1 Post(s)
- 0 Thread(s)
Suggestions/Help needed for semantic markup
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>
If anyone has any better suggestions and why I should do it that way I'd really love the help.