Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This kind of stuff is highly subjective, but here's a few comments. </p> <ul> <li><p>If your goal is semantic html, you would do best to forget about styling altogether. Styling happens at a completely different layer, and therefore only serves to confuse the picture. In particular, ids and classes are orthogonal to the element chosen. Choose the element for semantic purposes, then qualify it with id and class to provide the necessary hooks for scripting and styling, or to further <em>refine</em> the semantics with microformats.</p></li> <li><p>Option 1 has the entire article content in the header. I don't understand what you're trying to achieve there. However, using divs and spans should always be considered a last resort when no other element is available which expresses the semantics you wish to express.</p></li> <li><p>Whereas Option 1 has insufficient headings (h1-h6) elements, option 2 has too many. For example the headings inside price-details can only apply to (i.e. be a heading to) the main contents of price-details. But price-details doesn't have any main content.</p></li> <li><p>In option 2, you have offer-title as an h3. It's a matter of opinion whether this is really a heading or not, but if you think it is, but don't think is appropriate as a line in a table of contents, consider wrapping the restaurant name and offer-title in an hgroup element.</p></li> <li><p>You are also overusing the section element. The idea in HTML5 is that the contents of each sectioning element (including "body") has a header, then the main contents, then a footer. There's no <em>semantic</em> need to wrap the main contents in any element at all, but if for styling or maintenance reasons you want to do so, you should use a "div" element. You shouldn't use "section" in these cases because the "section" element would be expressing the <em>wrong</em> semantics, and in consequence, quite possibly confuse the way that the contents of the "section" are presented to accessibility APIs.</p></li> <li><p>In HTML5, h1-h6 are effectively "reset" inside each sectioning element, so there is no need to, say, have h1 at the body level mean the same as h1 inside each article. Indeed, they are, by definition different. However, I would suggest that it is good practice that the meanings are consistent for all articles at the same level within a section (or body). </p></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload