Hi Gang.

 

I'm a bit stumped on the best semantic approach for creating Key > Value pairs.

The data in question is hypothetically a list of results where each has common factors. For this exercise here is some ways I came up with based on lots of study into different approaches including ul, dl, b, class and other wacky ways.

 

<!-- Option 1 -->
<article>
<h1>Product One</h1>
<p>Description</p>
<ul>
<li><b>Colour</b> Red</li>
<li><b>Price</b> £19.99</li>
<li><b>Smell</b> Bad</li>
</ul>
</article>

<!-- Option 2 -->
<article>
<h1>Product One</h1>
<p>Description</p>
<dl>
<dt>Colour</dt> <dd>Red</dd>
<dt>Price</dt> <dd>£19.99</dd>
<dt>Smell</dt> <dd>Bad</dd>
</dl>
</article>

<!-- Option 3 -->
<article>
<h1>Product One</h1>
<p>Description</p>
<ul>
<li><dl><dt>Colour</dt> <dd>Red</dd></dl></li>
<li><dt>Price</dt> <dd>£19.99</dd></dl></li>
<li><dt>Smell</dt> <dd>Bad</dd></dl></li>
</ul>
</article>

<!-- Option 4 -->
<article>
<h1>Product One</h1>
<p>Description</p>
<ul>
<li><b class="key">Colour</b> <span class="value">Red</span></li>
<li><b class="key">Price</b> <span class="value">£19.99</span></li>
<li><b class="key">Smell</b> <span class="value">Bad</span></li>
</ul>
</article>

<!-- Option 5 -->
<article>
<h1>Product One</h1>
<p>Description</p>
<ul>
<li><b class="colour">Colour</b> <span class="value">Red</span></li>
<li><b class="price">Price</b> <span class="value">£19.99</span></li>
<li><b class="smell">Smell</b> <span class="value">Bad</span></li>
</ul>
</article>
 

 

Yes tables can be used and the power of th / td is known but there must be a good way for this to occur in normal page flow. Does anyone have any experience in these methods and how the data was interpreted by the crawlers?

 

Thanks as always

*bump* anyone?