의미 론적으로 올바른 XHTML 마크 업

Question

의미 상 올바른 XHTML 마크 업을 사용하려하지 않으려 고 시도합니다.

작은 탐색 항목에 대한 코드를 작성하기 만하면됩니다. 각 버튼에는 제목과 설명이 있습니다. 그래서 나는 위의 3 개 버튼의 DT 및 DD 텍스트를 포함하는 각 버튼되고 싶어 ... 다음

<dl> 
    <dt>Import images</dt> 
    <dd>Read in new image names to database</dd> 

    <dt>Exhibition Management</dt> 
    <dd>Create/Delete an exhibition </dd> 

    <dt>Image Management</dt> 
    <dd>Edit name, medium and exhibition data </dd> 
</dl> 

그러나 쓴 정의 목록 따라서 좋은 것 생각했다. 이 코드를 올바른 코드로 어떻게 처리 할 수 ​​있습니까? 일반적으로 각 버튼을 div로 만들고 시각적 버튼 동작 (onHover 및 현재 페이지 선택 항목)에 사용합니다.

어떤 조언을 바랍니다

감사

Answer 1

<ul> 
    <li><a href="#" title="Read in new image names to database">Import images</a></li> 
    <li><a href="#" title="Create/Delete an exhibition">Exhibition Management</a></li> 
    <li><a href="#" title="Edit name, medium and exhibition data">Image Management</a></li> 
</ul> 

충분 이잖아. 내비게이션에 <dl>을 사용하는 것은 그리 똑똑하지 않습니다. 설명이있는 <li> 안에 <span>을 사용하십시오. <dd>은 <dt> 안에 있지 않으므로 많은 두통을 줄 것이며 위치와 스타일에 상관하지 않습니다.

Answer 2

용어 "버튼"을 사용하여 약간 혼란 스럽습니다. 당신이 링크를 의미하는 경우에, 당신은 할 수 :

<a href="dest.html" title="Read in new image names to database">Import images</a> 

을, 그러나, 당신이 입력 태그를 의미하는 경우, 입력 유형 = 이미지를 사용하고 다음 고도의 설명을 제공하는 것이 작업을 수행하는 방법을. 예를 들어

:

<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/> 

Answer 3

당신은 <label> 요소 대신 <dt> 요소를 사용할 수 있습니다 만 다른 요소의 id에 일치 할 필요

<ul> 
    <li> 
     <a href="#"> 
      <label for="import-images">Import images</label> 
      <span id="import-images">Read in new image names to database</span> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <label for="exhibition-management">Exhibition Management</label> 
      <span id="exhibition-management">Create/Delete an exhibition</span> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <label for="image-management">Image Management</label> 
      <span id="image-management">Edit name, medium and exhibition data</span> 
     </a> 
    </li> 
</ul> 

... <label> 요소의 for 속성을 유효한 문서.