Какой тег HTML5 я должен использовать для разметки имени автора? - PullRequest
87 голосов
/ 03 сентября 2011

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

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

Тэг author не существует, хотя ... Так что же обычно используется тег HTML5 для авторов?Спасибо.

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

Ответы [ 8 ]

106 голосов
/ 03 сентября 2011

Оба rel="author" и <address> предназначены именно для этой цели.Оба поддерживаются в HTML5.Спецификация говорит нам, что rel="author" может использоваться на <link> <a> и <area> элементах.Google также рекомендует его использование .Комбинированное использование <address> и rel="author" кажется оптимальным.HTML5 наилучшим образом позволяет переносить <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>
47 голосов
/ 03 сентября 2011

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

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

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

<span class="author">John</span>
17 голосов
/ 03 сентября 2011

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

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

Спецификация дальнейших ссылок address в отношении авторов здесь

Менее 4.4.4

Информация об авторе, связанная с элементом статьи (q.v. the элемент address) не применяется к вложенным элементам article.

Менее 4.4,9

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

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

Тем не менее, вы также можете дать address rel или class из author.

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

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

9 голосов
/ 07 сентября 2015

Поддержка 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 голосов
/ 03 декабря 2018

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

<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>
2 голосов
/ 26 февраля 2016

Вы можете использовать

<meta name="author" content="John Doe">

в заголовке согласно спецификации HTML5 .

2 голосов
/ 03 сентября 2011

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

<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>
1 голос
/ 03 сентября 2011

Если вы указали контактную информацию для автора, то тег <address> подходит:

Но если это буквально только авторимя, для этого нет конкретного тега.HTML не имеет большого отношения к людям.

...