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


97

Например, сообщения в блоге или статьи.

<article>
<h1>header<h1>
<time>09-02-2011</time>
<author>John</author>
My article....
</article>

Однако authorтега не существует ... Итак, какой тег HTML5 чаще всего используется авторами? Спасибо.

(Если нет, разве не должно быть?)


<cite>может быть? Я не знаю, лол. : P Хотя это не имеет большого значения в стиле.
Джозеф Марикл

2
Дело не в стиле. Технически вы можете использовать <p> для создания заголовка, просто увеличив размер шрифта. Но поисковые системы так этого не поймут.
jalgames

2
Вам не разрешается использовать такой timeэлемент. Поскольку dd-mm-yyyэто не один из признанных форматов, вы должны указать машиночитаемую версию (в одном из распознанных форматов) в datetimeатрибуте timeэлемента. См. W3.org/TR/2014/REC-html5-20141028/…
Андреас Рейбранд

1
Теперь есть лучший ответ, чем принятый (Роберт).
Дэн Даскалеску

Ответы:


114

Оба rel="author"и <address>предназначены именно для этой цели. Оба поддерживаются в HTML5. Спецификация говорит нам , что rel="author"может быть использовано на и элементы. Google также рекомендует его использовать . Комбинированное использование и кажется оптимальным. HTML5 лучше всего позволяет переносить заголовки и информацию о подписи следующим образом:<link> <a><area><address>rel="author"<article><header>

<article>
    <header>
        <h1 class="headline">Headline</h1>
        <div class="byline">
            <address class="author">By <a rel="author" href="/author/john-doe">John Doe</a></address> 
            on <time pubdate datetime="2011-08-28" title="August 28th, 2011">8/28/11</time>
        </div>
    </header>

    <div class="article-content">
    ...
    </div>
</article>
  • pubdateАтрибут указывает на то , что это Опубликованная дата.

  • Эти titleатрибуты не являются обязательными эстакадами.

  • Информация о подписи автора может альтернативно быть обернута в <footer>пределах<article>

Если вы хотите добавить микроформат hcard , я бы сделал это так:

<article>
    <header>
        <h1 class="headline">Headline</h1>
        <div class="byline vcard">
            <address class="author">By <a rel="author" class="url fn n" href="/author/john-doe">John Doe</a></address> 
            on <time pubdate datetime="2011-08-28" title="August 28th, 2011">on 8/28/11</time>
        </div>
    </header>

    <div class="article-content">
    ...
    </div>
</article>

3
Разве "By" не должно предшествовать тегу <address>? На самом деле это не часть адреса.
aridlehoover

1
@aridlehoover Оба варианта кажутся правильными в соответствии с whatwg.org/specs/web-apps/current-work/multipage/… - Если снаружи, используйте .byline address { display:inline; font-style:inherit }для переопределения blockзначения по умолчанию в браузерах.
ryanve

@aridlehoover Я тоже считаю, что <dl>это жизнеспособно. См., Например, разметку автора в источнике demo.actiontheme.com/sample-page .
ryanve

4
Поскольку pubdateатрибут отсутствует в спецификациях WHATWG и W3C, как здесь пишет Брюс Лоусон , я предлагаю вам удалить его из своего ответа.
Павел Козлович

51

HTML5 имеет тип ссылки автора :

<a href="http://johnsplace.com" rel="author">John</a>

Слабость здесь в том, что он должен быть на какой-то ссылке, но если она у вас есть, здесь есть долгое обсуждение альтернатив . Если у вас нет ссылки, просто используйте атрибут класса, для чего он:

<span class="author">John</span>

3
@Quang Да, я думаю, что тип ссылки без фактической ссылки лишит смысла попытки разметить ее семантически.
robertc 03

3
@Quang: relатрибут предназначен для описания назначения ссылки. Если ссылка не имеет назначения, relэто бессмысленно.
Пол Д. Уэйт

2
Вы также можете посмотреть на schema.org способы выражения этого типа информации.
Майкл Миор

1
@ jdh8 Потому что Джон - это не название работы
Робертц 01

6
Этот ответ уже не самый лучший. Google больше не поддерживаетrel="author" , и, как упоминают Райанве и Джейсон, этот addressтег также явно предназначен для выражения авторства.
Дэн Даскалеску

19

Согласно спецификации HTML5, вы, вероятно, захотите address.

Элемент адреса представляет собой контактную информацию ближайшего предка элемента article или body.

Дополнительные ссылки addressна авторов здесь

Менее 4.4.4

Информация об авторе, связанная с элементом статьи (qv элемент адреса), не применяется к вложенным элементам статьи.

Менее 4.4.9

Контактная информация автора или редактора раздела содержится в элементе адреса, возможно, внутри самого нижнего колонтитула.

Все это создает впечатление, что addressэто лучший тег для этой информации.

Тем не менее, вы также можете поставить оценку addressa relили classof author.

<address class="author">Jason Gennaro</address>

Подробнее: http://dev.w3.org/html5/spec/sections.html#the-address-element


1
Спасибо, Джейсон, ты знаешь, что означает "qv"? В разделе> 4.4.4> Информация об авторе, связанная с элементом статьи (qv элемент адреса), не применяется к вложенным элементам статьи.
Куанг Ван

3
@QuangVan - (подождите, ваши инициалы ... qv hmm) - qv означает "quod vide" или "по этому поводу (вопрос) иди и посмотри" - сын по вопросу "qv" см. English.stackexchange.com/questions / 25252 /… (qv) ха-ха
pageman

@JasonGennaro, ха-ха, nanos gigantum humeris insidentes!
pageman

лол, мне потребовалось время, чтобы понять, к чему эти комментарии относятся ... Спасибо за урок латыни :)
Куанг Ван

10

В HTML5 мы можем использовать некоторые семантические метки, которые помогают организовать информацию о вашем типе контента, но дополнительные и связанные с темой вы можете проверить schema.org . Это инициатива Google, Bing и Yahoo, цель которой - помочь поисковым системам лучше понимать веб-сайты с помощью атрибутов микроданных. Tu post podría tener el siguiente аспект:

<article itemscope itemtype="http://schema.org/Article">
<header>
  <h1 itemprop="headline">header</h1>
  <time itemprop="dateCreated datePublished">09-02-2011</time>
  <div itemprop="author publisher" itemscope itemtype="http://schema.org/Organization">
    <p>
        <img itemprop="image logo" src="..."/>
        <span itemprop="name">John</span>
    </p>
  </div>
</header>
<section itemprop="articleBody" >
    My article....
    <img itemprop="image" src="..."/>
</section>
</article>

1
Определенно самый точный ответ на 2019 год.
Саймон Дж.

3
Обратите внимание, что schema.org не является частью HTML5. Это отдельная спецификация.
ya.teck

9

Поддержка Google для rel = "author" устарела :

«Разметка авторства больше не поддерживается в веб-поиске».

Используйте элемент списка описаний (список определений в HTML 4.01).

Из спецификации HTML5 :

Элемент dl представляет собой список ассоциаций, состоящий из нуля или более групп имя-значение (список описания). Группа «имя-значение» состоит из одного или нескольких имен (элементов dt), за которыми следуют одно или несколько значений (элементы dd), игнорируя любые узлы, кроме элементов dt и dd. В одном элементе dl не должно быть более одного элемента dt для каждого имени.

Группы значений имени могут быть терминами и определениями, темами и значениями метаданных, вопросами и ответами или любыми другими группами данных значения имени.

Авторство и другая метаинформация статьи идеально вписывается в эту структуру пары ключ: значение:

  • кто автор
  • дата публикации статьи
  • структура сайта, по которой организована статья (категория / тег: строка / массивы)
  • и т.п.

Самоуверенный пример:

<article>
  <header>
    <h1>Article Title</h1>
    <p class="subtitle">Subtitle</p>
    <dl class="dateline">
      <dt>Author:</dt>
      <dd>Remy Schrader</dd>
      <dt>All posts by author:</dt>
      <dd><a href="http://www.blog.net/authors/remy-schrader/">Link</a></dd>
      <dt>Contact:</dt>
      <dd><a mailto="remy@blog.net"><img src="email-sprite.png"></a></dd>
    </dl>
  </header>
  <section class="content">
    <!-- article content goes here -->
  </section>
</article>

Как вы можете видеть при использовании <dl>элемента для получения информации в статье мета, мы свободны , чтобы обернуть <address>, <a>и даже <img>теги в <dt>и / или <dd>тегов в соответствии с характером содержания , и она предназначена функция .
В <dl>, <dt>и <dd>метки могут свободно делать свою работу - семантический - передача информации о родителе <article>; <a>, <img>и <address>аналогичным образом свободны выполнять свою работу - опять же, семантически - передавая информацию о том, где найти связанный контент, невербальное визуальное представление и контактные данные для авторитетных сторон, соответственно.



3

Как насчет микроданных :

<article>
<h1>header<h1>
<time>09-02-2011</time>
<div id="john" itemscope itemtype="http://microformats.org/profile/hcard">
 <h2 itemprop="fn">
  <span itemprop="n" itemscope>
   <span itemprop="given-name">John</span>
  </span>
 </h2>
</div>
My article....
</article>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.