이미지 링크 세트 (호버 효과와 함께), 제목 및 설명을위한 시맨틱 HTML 구조?

Question

항목 세트 (또는 항목 목록이 있지만 목록 사용을 암시하고 싶지 않음), 이미지 링크, 제목 및 설명이 포함되어 있습니다. 이미지 링크에는 호버 효과가 필요하며 (마우스가 끝날 때 알파 변경), 왼쪽의 이미지, 오른쪽에 제목 및 설명을 배치하려는 특정 방법이 있습니다. 또한 전체 항목 블록에 대한 배경이 있습니다.

다음은 내가 원하는 모습에 대한 스크린 샷입니다.대체 텍스트 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를 작동시키는 데 어려움을 겪고 있습니다. 예를 들어 각 A, 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>

이 레이아웃의 문제는 그것이 나에게 의미 론적으로 보이지 않는다는 것입니다. 나는 정렬되지 않은 목록으로 Li에서 그것을 감싸 수 있었지만 여분의 마크 업처럼 보입니다.

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

Answer 1

나는 그것을 사용한다고 말하고 싶습니다 <DL> 이 목적은 실제로입니다 더 적은 의미 론적으로 사용합니다 <DIV> - 정의 목록을 작성하지 않습니다.

링크, 헤더 및 단락으로 랩핑 한 것은 나에게 완벽하게 받아 들여질 수 있습니다. 대신 비정규 목록을 사용해 볼 수 있습니다. 그러나 CSS와 마찬가지로 CSS와 같은 문제가있을 수 있습니다 (또는 더 이상 DT / DD 분리가 없어도 더 나쁘다). <DL>. 또한 헤더 태그를 사용하는 것은 목록 항목 내에서 유효성을 유지하지 않으므로 다른 단락 / 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를 사용하는 경우 각 항목의 "섹션"과 스크린 샷의 경우 "그림"을 사용합니다.