Семантический HTML для 1 строки текста - PullRequest
Новая
       21

Семантический HTML для 1 строки текста

1 голос
/ 12 июля 2011

У меня есть div, содержащий событие, которое я хочу, чтобы оно выглядело так 

[-----]   TITLE
[-IMG-]   Author
[-----]   Date

То, как я его сейчас настроил, выглядит так: 

<div class="book">
    <img class="thumb">
    <h2>TITLE</h3>
    <span>Author</span>
    <br />
    <span>Date</span>
</div>

У меня нетдумаю, что я должен использовать <span> для автора и описания, так как я хочу, чтобы они были в нескольких строках (также выполнение display:block делает его странным с плавающим элементом слева), но я не знаю, если <p>тег подходит, так как это всего 1 строка текста.

Какой тег мне использовать для этого?

Спасибо !!

Ответы [ 4 ]

3 голосов
/ 12 июля 2011

Author - это подзаголовок, я бы использовал <h3>, поскольку для даты идеальным было бы использование HTML 5 временного тега , но это приводит к некоторым сложностям в старых браузерах и IE, поэтому я бы рекомендовал использовать <p> если вы хотите разрыв строки. 

<div class="book">
    <img class="thumb" alt="">
    <h2>TITLE</h2>
    <h3>Author</h3>
    <p>Date</p>
</div>

Эти элементы дадут вам необходимые тормоза линии и будут семантически правильными.

PD: Как упомянул @Will Martin, рекомендуется, чтобы выиспользуйте атрибут alt с тегом изображения.

1 голос
/ 27 августа 2012

Начиная с ответа amosriveras из 2011 , я бы поступил иначе:

HTML 4.01: 

<div class="book">
    <h2>TITLE</h2>
    <img class="thumb" alt="">
    <div>Author</div>
    <div>Date</div>
</div>
  • , h2 долженбыть первым элементом, иначе img не будет частью этой области заголовка
  • «Автор» не является содержимым заголовка;также это будет означать, что «Дата» принадлежит области заголовка «Автор» (вместо этого она должна принадлежать «НАЗВАНИЮ»).Поэтому используйте div вместо h3 (нет, не p, потому что это не абзац)
  • «Дата» не является абзацем, поэтому используйте div вместо p

HTML5: 

<article class="book">
    <img class="thumb" alt="">
    <h1>TITLE</h1>
    <div>Author</div>
    <div><time>Date</time></div>
</article>
  • с использованием article вместо div
  • теперь заголовок "TITLE" может быть размещен где угоднов этой статье;также оно может стать h1
  • с использованием time для «Дата»

Использование dl также возможно: 

<article class="book">
    <img class="thumb" alt="">
    <h1>TITLE</h1>
    <dl>
     <dt>Author</dt>
     <dd>AUTHOR NAME</dd>
     <dt>Date</dt>
     <dd><time>DATE</time></dd>
    </dl>
</article>
  • img можно поместить в dd, например, с dt «Фото» или чем-то в этом роде (зависит от контекста).Я бы сделал это, только если изображение действительно имеет отношение к книге / событию.
0 голосов
/ 12 июля 2011

Прочитав комментарий @ Mazlix к @ ответу Amosrivera, я хотел бы предложить список определений. 

<dl>
    <dt><img class="thumb" alt="book cover" /> TITLE</dt>
    <dd class="author">AUTHOR</dd>
    <dd class="date>DATE</dd>
</dl>

Стиль может привести к путанице, если вы попытаетесь использовать один DL с несколькими парами DT / DD в нем, но вы также можете легко использовать целую кучу списков определений.

EDIT:

@ Дэвид Томас избил меня до удара. Ах, хорошо, c'est la vie.

0 голосов
/ 12 июля 2011

Хотя это не строго параграфы, я думаю, что тег <p> является наиболее подходящим здесь.

Вы выделяете разные, но связанные типы информации.То, что это не в форме предложения, не означает, что нет смысла использовать <p> с классами для типа информации в них.

Что бы вы ни решили, запомнитечто дизайн отделен от элементов.То есть тот факт, что они находятся на разных линиях, не должен быть вашим основным решением.

...