작성자 이름을 마크 업하려면 어떤 HTML5 태그를 사용해야합니까?


97

예를 들어 블로그 게시물 또는 기사.

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

author태그는하지만 ... 그래서 저자에 일반적으로 사용되는 HTML5 태그 무엇 존재하지 않는? 감사.

(없으면 하나 있어야하지 않나요?)


<cite>아마도? 몰라요. : P 스타일에 큰 차이를 만들지는 않습니다.
Joseph Marikle 2011 년

2
스타일에 관한 것이 아닙니다. 기술적으로는 글꼴 크기를 늘리기 만하면 <p>를 사용하여 제목을 만들 수 있습니다. 그러나 검색 엔진은 그것을 그렇게 이해하지 못할 것입니다.
jalgames 2014

2
time그런 요소 를 사용할 수 없습니다 . dd-mm-yyy는 인식 된 형식 중 하나가 아니기 때문에 요소 의 datetime속성에 기계가 읽을 수있는 버전 (인식 된 형식 중 하나로)을 제공해야 합니다 time. w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand 2014

1
이제 받아 들여진 (robertc의) 답변 보다 더 나은 답변 이 있습니다 .
Dan Dascalescu 2016 년

답변:


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 microformat 을 추가하려면 다음과 같이합니다.

<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 모두 사양에서 사라 브루스 로손이 기록으로, 여기 , 당신이 당신의 대답에서 제거하는 것이 좋습니다.
Paul Kozlovitch 2015

51

HTML5에는 작성자 링크 유형이 있습니다 .

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

여기서 약점은 일종의 링크에 있어야한다는 것입니다.하지만 만약 그렇다면 여기에 대안에 대한 긴 논의가 있습니다 . 링크가 없으면 클래스 속성을 사용하면됩니다.

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

3
@Quang 예, 실제 링크가없는 링크 유형은 의미 론적으로 마크 업하려는 목적을 무효화 할 것이라고 생각합니다.
robertc 2011 년

3
@Quang : rel속성은 링크의 목적지가 무엇인지 설명하기 위해 존재합니다. 링크에 목적지가 없으면 rel의미가 없습니다.
Paul D. Waite 2011 년

2
이러한 유형의 정보를 표현하는 방법에 대해 schema.org 를 참조 할 수도 있습니다 .
Michael Mior

1
@ jdh8 John은 작품의 제목
robertc

6
이 답변은 더 이상 최고가 아닙니다. 구글에서 더 이상 지원rel="author" 등과 같은 ryanve 제이슨 언급의 address태그는 명시 적으로뿐만 아니라 저자를 표현하기 위해 설계되었다.
Dan Dascalescu 2016 년

19

HTML5 사양에 따르면 address.

주소 요소는 가장 가까운 기사 또는 본문 요소 상위에 대한 연락처 정보를 나타냅니다.

사양은 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
감사합니다 Jason, "qv"가 무슨 뜻인지 아십니까? > 4.4.4> 기사 요소 (qv 주소 요소)와 관련된 작성자 정보는 중첩 된 기사 요소에 적용되지 않습니다.
Quang Van

3
@QuangVan-(잠깐, 당신의 이니셜은 ... qv 흠)-qv는 "quod vide"또는 "on this (matter) go see"를 의미합니다- "qv"문제에 관한 아들 go see english.stackexchange.com/questions / 25252 /… (qv) haha
pageman

@JasonGennaro 하하 나노스 거대한 humeris insidentes!
pageman

lol,이 댓글이 무엇을 의미하는지 알아 내기 위해 잠시 시간이 걸렸습니다 ... Latin lession에 감사드립니다 :)
Quang Van

10

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>

1
확실히 2019
Simon G

3
schema.org는 HTML5의 일부가 아닙니다. 별도의 사양입니다.
ya.teck

9

rel = "author"에 대한 Google 지원 이 더 이상 사용되지 않습니다 .

"저작권 마크 업은 웹 검색에서 더 이상 지원되지 않습니다."

설명 목록 (HTML 4.01의 정의 목록) 요소를 사용하십시오.

로부터 HTML5 사양 :

dl 요소는 0 개 이상의 이름-값 그룹 (설명 목록)으로 구성된 연관 목록을 나타냅니다. 이름-값 그룹은 하나 이상의 이름 (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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.