Definitivt!
Frågan#1
Jag har en tabell med länknamn och kommentarer typ: tr th-länk td-kommentar.
Skulle en definition list vara mer semantiskt korrekt?
Är definitionlist semantiskt rätt för länklista?
5 svar · 472 visningar · startad av joser
Tack för synpunkten. Jag har ägnat alldeles för mycket tid igår och idag för att hitta ett definitivt svar utan att lyckas. ;)
En länk som länk som går igenom semantiken: Definition: a definition and an analysis, och en som sammanfattar vad jag hittat under dagen och som jag hoppas är ett bra svar:
Tables vs. Definition Lists
"So from a semantic (and quite strict) point of view, definition lists should be used for data that have a key-value relationship, while the tables would be more suitable for data in which the keys and values also have meaning as a list."
Jag har h2-rubriker för olika länkgrupper. Om ingen har nåt bättre svar så behåller jag länktabellerna. :)
Jag hävdar fortfarande, må vara med en dåres envishet, att en def-lista är mer semantisk än en tabell...
OlleBoop skrev:
Jag hävdar fortfarande, må vara med en dåres envishet, att en def-lista är mer semantisk än en tabell...
Varför? Vilken semantik har en <dl> som <table> saknar i det här fallet?
Jag betstämde mig för att lägga länkarna i en DL iaf. Anledningen är antalet kodrader som gick ned från 825 till 450. :)
Om en talmaskin läser länklistan så lägger den in "equals" mellan DT och DD och det är väl inte 100% rätt egentligen men heller inte fel eftersom länkkommentarerna beskriver sidorna.
Lägger ut koden om det nån som behöver en centrerad def-lista:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Center Formatted Link Listing using Definition List</title>
<style type="text/css">
<!--
h1, h2 {
text-align: center;
}
dl {
width: 90%;/* not to confuse with item width =100% of dl width */
margin: 0 auto;/* for centering the set width is a must */
list-style: none;
line-height: 1.2em;/* gives room for textdecoration in IE */
}
dt {
clear: left;
width: 34%;/* leaves 1% for col space to dd margin-left 35% */
margin: 0 0 0.5em 0;/* bottom 0.4em for item row space */
text-align: right;
}
dd {
clear: right;
float: right;
width: 65%;
margin: -1.7em 0 0 35%;/* top -1.7em for same base level*/
}
-->
</style>
</head>
<body>
<h2>Link Group</h2>
<dl>
<dt><a href="***">1link 1link 1link</a></dt>
<dd>1note 1note 1note</dd>
<dt><a href="***">2link 2link 2link</a></dt>
<dd>2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note</dd>
<dt><a href="***">3link 3link 3link 3link 3link 3link 3link 3link 3link</a></dt>
<dd>3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note</dd>
<dt><a href="***">4link 4link 4link 4link 4link 4link 4link 4link 4link</a></dt>
<dd>4note 4note 4note</dd>
<dt><a href="***">5link 5link 5link</a></dt>
<dd>5note 5note 5note</dd>
</dl>
</body>
</html>
Och den motsvarande tabellen: :r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Center Formatted Link Listing using Table</title>
<style type="text/css">
<!--
h1, h2 {
text-align: center;
}
table{
width: 90%;
margin: 0 auto;
line-height: 1.2em;
}
th {
padding: 0 0 0.3em 0;
vertical-align: top;
text-align: right;
font-weight: normal;
}
td {
padding: 0 0 0.3em 0.5em;
vertical-align: bottom;
text-align: left;
}
-->
</style>
</head>
<body>
<table summary="">
<tr>
<th colspan="2"><h2>Link Group</h2></th>
</tr>
<tr>
<th><a href="***">1link 1link 1link</a></th>
<td>1note 1note 1note</td>
</tr>
<tr>
<th><a href="***">2link 2link 2link</a></th>
<td>2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note 2note</td>
</tr>
<tr>
<th><a href="***">3link 3link 3link 3link 3link 3link 3link 3link 3link</a></th>
<td>3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note 3note</td>
</tr>
<tr>
<th><a href="***">4link 4link 4link 4link 4link 4link 4link 4link 4link</a></th>
<td>4note 4note 4note</td>
</tr>
<tr>
<th><a href="***">5link 5link 5link</a></th>
<td>5note 5note 5note</td>
</tr>
</table>
</body>
</html>