mdonahue (20) [Avatar] Offline
#1
It would help readability if the comments were a few shades lighter grey so they don't interfere with reading the code.

I like the semantic class names. Do yo think roles are too advanced for this books target audience or is that in a later chapter?

For the social and nav links have you considered using an unordered list instead of just links? You are returning a list of links after all and it builds on the semantic work you're already laying down. This is also a fairly common practice for navigation markup popularized by Dan Cederholm in his Bulletproof books.

Why set a fixed width at the mobile level and why set it in pixels rather than a relative unit? There's little practical benefit at the smallest size, it just gives you one more rule to override.

Could also add in Bryan Reiger's quote on media queries "No media query is the first media query." so newbies don't wast their time writing a min-width 320px query. (I think I got that worded correctly, but that's the gist)

Same goes for the grid. Why not relative units for margins, padding and other sizing?

You used comments within you HTML code, have you considered using in the CSS portions? Including the math next to the declarations might offer additional clarity when viewed inline with the declaration.

Your last example in section 2.4 where you telling reader not to apply em's to block level elements you code doesn't back you reason. A span is an inline element so your first example would be inline with your reasoning.



Side note: What are your thoughts on the pros and cons of developing structure using em's. I'm seeing more sites, mainly blog type setting block element widths in em's and I haven't found many details on this technique yet.

Message was edited by:
mdonahue
mdonahue (20) [Avatar] Offline
#2
Re: Chapter 2
Looking over the Table of Contents I see you have a chapter on HTML5 and responsive yet the nav element is used in Chapter 2. Any concerns regarding HTML5 elements should probably precede their use in the code.
hollyc (2) [Avatar] Offline
#3
Re: Chapter 2
Page 24 discusses using the <figure> tag, but the use of the tag doesn't seem to meet the HTML5 specs for <figure> tags. The spec indicates that a figure should be self-contained and is typically referenced as a whole from the main flow of the document. HTML5 Doctor indicates that the figure tag should be used for items that could be viewed as content for an appendix or footnote and not for items like banner images. Using the tag to enclose advertisement images would not be semantic as I understand the spec. Maybe that should be verified as semantic use or not?
matthew.carver (23) [Avatar] Offline
#4
Re: Chapter 2
From the spec:

"The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning."

An image placed on the page with an tag should fit this description, so long as the image is not there for design purposes. In chapter 2 I refer to the <figure> tag being used for dom images, meaning they would be images that compliment the content but aren't inherently a requirement to the design.
hollyc (2) [Avatar] Offline
#5
Re: Chapter 2
I can see that being one interpretation of the spec. For my own mark-up I like the HTML5 Doctor's interpretation of it being consistent with an element that could be included in an appendix - possibly because that is closer to how figures are classically used in papers. While the figure can be moved away from the main flow without affecting meaning, it is still illustrative to the main content. An advertisement - as in your example - usually could not only be placed elsewhere in the main flow, it could be omitted without affecting the content meaning. To me that is a difference, but I fully admit I may be over-analyzing the spec and its relationship to academic writing.

Thanks for taking the time to expand on your thoughts on this.
mdonahue (20) [Avatar] Offline
#6
Re: Chapter 2
I tend to agree with Holly's position on the use of the figure tag. A div would be a more appropriate choice since the purpose of use here is strictly as a wrapper.

That said this book isn't dedicated to strict semantic usage and this specific usage is open to interpretation. Maybe a simple note about the reason for choosing figure for a wrapper instead of a div could help further the semantic understanding for the reader.
matthew.carver (23) [Avatar] Offline
#7
Re: Chapter 2
Figure is intended as a wrapper for images that accompany things like articles or blog posts. The use of HTML and CSS is so ubiquitous and there is such a huge range of applications that context is hugely important. I think it's completely semantic in the case of something like this:

< article>
< p>lorem...


< p>lorem...


< figure>
< img src="xxx.jpg">
< /figure>
< p>lorem...


< /article>

but it would be very out of place in a case like this:

< div id="sidebar">
< a href="#" id="ad">
< figure>
< img src="xxx.jpg">
< /figure>
< /a>
< /div>

In the case of a wrapper, I think using a div tag as the go-to wrapper tag leads to some pretty div heavy code. Any time you can use a tag for what it's for the better off you are, and figure is intended to be used to house an image and related content, such as a figure's caption (<figcaption>smilie. Therefore figure should be understand as a base image wrapper.

That being said, you're right. the only practical application in that example is as a wrapper element. I see both as being semantic. Point is, both are right and you should roll with whatever you're confortable with.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

Message was edited by:
matthew.carver
mdonahue (20) [Avatar] Offline
#8
Re: Chapter 2
Actually I could be convinced actually for both of the examples above. From the MOZ page you referenced "The HTML <figure> Element represents self-contained content, ..." Even the ads could be seen as self-contained content. That said, your second example is basically what you have in the book code.

From the book "The <figure> tag serves as a semantic wrapper for our responsive images." The uninformed could take this to mean that the figure element is always a proper semantic wrapper for an image, which isn't true. A little clarification could prevent a lot of misuse of the tag. The figure tag only adds semantic relevance if the image inside builds upon the rest of the content of the page. A masthead that simply "dresses up" the page visually really isn;t a candidate for a figure element. One that contains some content supporting imagery is.

While we're on this section of code (pages 24-25), you have the sections ordered header, aside and then article. I'd assume the article is the primary content for the page and, if so, should precede the aside section in the source order.

Also, why not use a section instead of div to hold the ads? A section if for "...a thematic grouping of content..." which these would be.

Message was edited by: Mike D
mdonahue
matthew.carver (23) [Avatar] Offline
#9
Re: Chapter 2
All excellent suggestions. I'm in the middle of editing chapters 1 and 2 now. I'll look back through today and see if I can't make some adjustments.

Thanks again for the feedback. It's really helpful.