الدلالي 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 يعمل هذا.على سبيل المثالأنا بحاجة الخلفية لكل مجموعة من dt و دد ، و أنا لا أريد استخدام 3 صور مختلفة من الجمع بين الخلفية.حتى الآن أنا أفكر في استخدام مجموعة من divs للقيام بذلك:

<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> - أنت بالتأكيد لا إنشاء قائمة تعريف.

رابط رأس الفقرة ملفوفة في شعبة يبدو مقبول تماما بالنسبة لي.يمكنك محاولة استخدام قائمة غير مرتبة بدلا من ذلك ؛ ولكن سيكون لديك على الأرجح نفسه (أو أسوأ من ذلك كما أنك لن تضطر dt / dd الانفصال بعد الآن) مشاكل مع CSS كما فعلت مع <DL>.بالإضافة إلى استخدام رأس العلامات لن التحقق من ضمن قائمة البند أيضا لذا عليك أن تلجأ إلى آخر الفقرة / div / span بالتأكيد أقل من مثالية.

التحديث (على أساس idrumgood's التعليق أدناه):
رأس (وغيرها من عناصر مستوى الكتلة) هل من صحة في قائمة غير مرتبة البند ، لذلك ربما النهج التالي كل الدلالية مع أنماط:

<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 هذا ليس قائمة من المشاريع ، انها مجموعة من المشاريع.باستخدام divs ، صالحة تماما للاستخدام من ذلك.إذا كنت تستخدم HTML5, يمكنك استخدام "المادة" لكل بند و "الشكل" على الصورة.