이미지 링크 세트 (호버 효과), 제목 및 설명에 대한 시맨틱 HTML 구조?

Question

나는 일련의 항목 (또는 항목 목록이지만 목록 사용을 암시하고 싶지는 않음)이 있으며 이미지 링크, 제목 및 설명을 포함합니다. 이미지 링크에는 호버 효과 (마우스를 올리면 알파가 변경됨)가 필요하며, 레이아웃을 지정하려는 특정 방법이 있습니다. 왼쪽 이미지, 오른쪽 제목 및 설명. 또한 전체 항목 블록에 대한 배경이 있습니다.

여기에 내가 그것을 모양을하고 싶은의 스크린 샷입니다 : alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

그래서 제 질문은 이것에 대한 좋은 의미 HTML 구조 무엇입니까? 나는이 같은 DL을 사용하려고 :

<dl> 
    <dt><a href="#"></a></dt> <!-- using the background of anchor for the hover effect --> 
    <dd>Title<p>description goes here</p></dd> 

    <dt>... 
</dl> 

하지만 난 이것에 대한 작업 CSS를 얻을 수있는 힘든 시간을 보내고 있습니다. 예 : 나는 dt와 dd의 각 세트에 대해 여분의 배경이 필요하며 배경을 결합하기 위해 3 가지 다른 이미지를 사용하고 싶지 않습니다. 그래서 지금은이 작업을 수행하는 div 무리를 사용할 생각 해요 :

<div> 
    <a href="#"></a> <!-- image link with background hover --> 
    <h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation --> 
    <p>description goes here</p> 
<div> 

이 레이아웃의 문제가 나에게 의미 보이지 않는다는 것입니다. 순서가 매겨지지 않은 목록으로 리에서이를 감쌀 수 있지만 마크 업과 같은 것 같습니다.

어쩌면 나는 너무 까다 롭습니다 만, 이것에 대한 좋은 해결책이 있는지 알고 싶습니다. 꽤 긴 질문입니다. 끝까지 읽어 주셔서 감사합니다.

Answer 1

나는이 목적을 위해 <DL>를 사용하여 다음 <DIV>를 사용 적은 의미 사실이라고 말할 것입니다 - 당신은 가장 확실하게 정의 목록을 만들 아니에요.

div에 싸여있는 링크, 머리글 및 단락이 나에게 완벽하게 받아 들일 것 같습니다. 대신 정렬되지 않은 목록을 사용할 수 있습니다. <DL>처럼 CSS에서의 문제가 더 이상 동일하지 않을 수도 있습니다 (또는 dt/dd 분리가 더 이상 없을 것입니다). 헤더 태그를 사용하면 목록 항목에서도 유효성이 검사되지 않으므로 다른 단락/div/span을 사용해야합니다. (아래 idrumgood의 의견에 따라)

업데이트 :
헤더 (그리고 다른 블록 레벨 요소) 그래서 아마도 다음과 같은 접근 방식은 모두 의미가 될 것입니다, 정렬되지 않은 목록 항목에서 확인하고 작업 마십시오 스타일 :

<ul> 
    <li> 
    <a href="#"> </a> <!-- image link with background hover --> 
    <h4>Title</h4> 
    <p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag --> 
    </li> 
</ul> 

Answer 2

나는 당신의 후자의 예가 완벽하다고 생각합니다. 당신은 그들이 담고있는 내용을 적절하게 묘사하는 태그를 사용하고 있습니다. 심지어 스타일을 끄더라도 페이지의 일반적인 개념은 여전히 ​​존재합니다 (시맨틱 웹의 핵심).

Answer 3

idrumgood에 동의합니다. 이것은 프로젝트 목록이 아니며 일련의 프로젝트입니다. div를 사용하면 완벽하게 유효한 사용법입니다. HTML5를 사용하는 경우 각 항목에 '섹션'을 사용하고 스크린 샷에는 '그림'을 사용합니다.