semantic-markup

Should I wrap the products with unordered list <ul><li> ? How can I make products clickable without JavaScript, just using HTML? Can I wrap each product with: <a href="linkToProduct"> <article> <h3>Product 1</h3> <img src="images/product1.png" alt="product 1"> <p><data value="50">50</data>$</p> </article></a> Here is my code : <section id="my-products"> <h1>My Products</h1> <article> <h3>Product 1</h3> <img src="images/product1.png" alt="product 1"> <p><data value="50">50</data>$</p> </article> <article> <h3>Product 2</h3> <img src="images/product2.png" alt="product 2"> <p><data value="130"

Is it mandatory to use H2 after h1 if text is too small then can we use h4 after h1 . and is it accessible ? Toon Krijthe Technically you can use any combination of those. Semantically, it's wise to use the common order. And if the font size is too small, use CSS to change that. With the tags h1 - h6 you give a semantic meaning to a title. Where h1 is for the top level, h2 for a subdivision of h1 , h3 for a subdivision of h2 etc. You can change the appearance by setting CSS rules, which is great because now you can separate content from layout. You should always structure the document

Is it semantically correct to markup a ul in HTML with another embedded ul that has only one single list item? For example, I have a ul with several li s, and one of those li s has an embedded ul with a single li : <ul> <li>Example LI 1 <ul> <li>Example LI 1a</li> </ul> </li> <li>Example LI 2</li> <li>Example LI 3</li> </ul> Absolutely. A list is not defined by quantity. It's defined by semantics. So a list can consist of only one element if only one item applies to the list's purpose. For example, I have only crashed one computer today so that list would be only one element long. Yes, it is

I am using a Chrome outliner extension to check the semantics of my page. It seems to be a problem to have any structural element before the h1 in the document main header tag. I was thinking the order does not matter, but apparently it does: +Document Body +Header +nav +h1 Main Navigation +h1 MyPage -Section -Footer Does outline like this: Untitled Body Main Navigation MyPage etc... But when the h1 is the first element in my header: +Document Body +Header +h1 MyPage +nav +h1 Main Navigation -Section -Footer it does outline like this: MyPage Main Navigation etc... Why is that? Is the outliner

Say I have the given table: +------+------+------+ | Col1 | Col2 | Col3 | +------+------+------+------+ | Row1 | D1.1 | D1.2 | D1.3 | +------+------+------+------+ | Row2 | D2.1 | D2.2 | D2.3 | +------+------+------+------+ | Row3 | D3.1 | D3.2 | D3.3 | +------+------+------+------+ And I want to represent it in HTML5. The tricky thing is that tables like this must be semantically important, but the top-left cell is not semantically important, but instead a spacer to line up the more important column headers. What's the best way to do this? My first idea is to do it like this: <table> <thead>