<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Replacing DTs and DDs with Headings and Divs</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
background:#fff;
padding:0 20px 20px 20px;
}
h1 {font-size:1.15em;}
h2 {
font-size:1.05em;
border-bottom:1px dotted #555;
}
dt,h3 {
font-weight:bold;
font-size:1em;
}
h2 {margin-bottom:20px;}
p {margin:20px 0;}
blockquote {
margin:-10px 0 20px 20px;
font-style:italic;
}
blockquote p {margin:0;}
dd,div {margin:0 0 20px 20px;}
p#back a:link,
p#back a:visited {
color:#fff;
font-weight:bold;
}
p#back {
background:#333;
text-align:center;
height:2em;
line-height:2em;
margin:0 -20px 20px -20px;
padding:0;
}
</style>
<script type="text/javascript">
function TJK_fromDLtoHxAndDiv(Hx){// v1.0 Copyright (c) 2008 TJKDesign - Thierry Koblentz
if (!document.getElementsByTagName || !document.getElementsByTagName('dl')) return;
var zDL=document.getElementsByTagName('dl'),zHx,zDIV;
while(zDL.length){
var zDT=zDL[0].getElementsByTagName('dt');
var zDD=zDL[0].getElementsByTagName('dd');
if(zDT.length != zDD.length) return;
while(zDT.length){
zHx=document.createElement(Hx);
zDIV=document.createElement("div");
document.body.insertBefore(zHx,zDL[0]);
document.body.insertBefore(zDIV,zDL[0]);
while(zDT[0].childNodes.length)zHx.appendChild(zDT[0].childNodes[0]);
zDL[0].removeChild(zDT[0]);
while(zDD[0].childNodes.length)zDIV.appendChild(zDD[0].childNodes[0]);
zDL[0].removeChild(zDD[0]);
}
document.body.removeChild(zDL[0]);
}
}
window.onload=function(){
TJK_fromDLtoHxAndDiv("h3");
}
</script>
</head>
<body>
<p id="back"><a href="/articles/being_nice_to_screen-reader_users_by_replacing_definition_lists_with_headings_and_divs.asp">Back to the article</a></p>
<h1>Be nice to screen-reader users.</h1>
<p>Point 10.3 [Definition lists: the <code>DL</code>, <code>DT</code>, and <code>DD</code> elements], the W3C says:</p>
<blockquote cite="http://www.w3.org/TR/html401/struct/lists.html#h-10.3"> <p>Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the <code>DT</code> element and is restricted to inline content. The description is given with a <code>DD</code> element that contains block-level content.</p> </blockquote> <p>Below is a Definition List used to mark up an <acronym title="Frequently Asked Questions">FAQ</acronym>. In javascript enabled User-Agents, that List is replaced with a succession of headings and <code>DIV</code>s (<a href="source_code.asp">source code</a> versus <a href="generated_source_code.asp">generated source code</a>).</p>
<h2>Frames FAQ</h2>
<dl>
<dt>Frames incapable browsers</dt>
<dd>Browsers are "frames enabled" since NN2/MSIE3; it is, however, possible to turn frames "off" in some modern browsers.</dd>
<dt>Bookmarking</dt>
<dd>The browser's built-in feature bookmarks the URL from the address bar instead of a particular frameset state. When the user returns to the bookmarked page he only gets the default frameset instead of accessing the original frameset state.</dd>
<dt>Title of framed pages</dt>
<dd>By default, documents that load inside frames don't affect the title displayed at the top of the browser window. The title corresponds to the document loaded in the topmost window.</dd>
<dt>Sending the link to a framed page to someone</dt>
<dd>The browser's built-in feature sends the URL from the address bar. The recipient of the email accesses the frameset with its default documents for each frame instead of accessing a particular frameset state.</dd>
</dl>
</body>
</html>