작성자 이름을 마크 업하려면 어떤 HTML5 태그를 사용해야합니까?
예를 들어 블로그 게시물 또는 기사.
<article>
<h1>header<h1>
<time>09-02-2011</time>
<author>John</author>
My article....
</article>
author
태그는하지만 ... 그래서 저자에 일반적으로 사용되는 HTML5 태그 무엇 존재하지 않는? 감사.
(없으면 하나 있어야하지 않나요?)
HTML5에는 작성자 링크 유형이 있습니다 .
<a href="http://johnsplace.com" rel="author">John</a>
여기서 약점은 일종의 링크에 있어야한다는 것입니다.하지만 만약 그렇다면 여기에 대안에 대한 긴 논의가 있습니다 . 링크가 없으면 클래스 속성을 사용하면됩니다.
<span class="author">John</span>
모두 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>
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>
HTML5 사양에 따르면 address
.
주소 요소는 가장 가까운 기사 또는 본문 요소 상위에 대한 연락처 정보를 나타냅니다.
사양은 address
여기에서 작성자와 관련하여 추가 참조
4.4.4 미만
기사 요소 (qv 주소 요소)와 연관된 작성자 정보는 중첩 된 기사 요소에 적용되지 않습니다.
4.4.9 미만
섹션 작성자 또는 편집자의 연락처 정보는 주소 요소에 속하며 바닥 글 내부에있을 수 있습니다.
이 모든 address
것이이 정보에 가장 적합한 태그 인 것 같습니다 .
즉, address
a rel
또는 class
of를 제공 할 수도 있습니다 author
.
<address class="author">Jason Gennaro</address>
자세히보기 : http://dev.w3.org/html5/spec/sections.html#the-address-element
rel = "author"에 대한 Google 지원 이 더 이상 사용되지 않습니다 .
"Authorship markup is no longer supported in web search."
Use a Description List (Definition List in HTML 4.01) element.
From the HTML5 spec:
The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.
Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
Authorship and other article meta information fits perfectly into this key:value pair structure:
- who is the author
- date the article published
- site structure under which the article is organized (category/tag: string/arrays)
- etc.
An opinionated example:
<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>
As you can see when using the <dl>
element for article meta information, we are free to wrap <address>
, <a>
and even <img>
tags in <dt>
and/or <dd>
tags according to the nature of the content and it's intended function.
The <dl>
, <dt>
and <dd>
tags are free to do their job -- semantically -- conveying information about the parent <article>
; <a>
, <img>
and <address>
are similarly free to do their job -- again, semantically -- conveying information regarding where to find related content, non-verbal visual presentation, and contact details for authoritative parties, respectively.
In HTML5 we can use some semantic labels that help organize the information regarding your type of content, but additional and related to the subject you can check schema.org. It is an initiative of Google, Bing and Yahoo that aims to help search engines to better understand websites through microdata attributes. 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>
You can use
<meta name="author" content="John Doe">
in the header as per the HTML5 specification.
How about microdata:
<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>
If you were including contact details for the author, then the <address>
tag is appropriate:
But if it’s literally just the author’s name, there isn’t a specific tag for that. HTML doesn’t include much related to people.
참고URL : https://stackoverflow.com/questions/7290504/which-html5-tag-should-i-use-to-mark-up-an-author-s-name
'code' 카테고리의 다른 글
Xamarin Forms에서 페이지를 어떻게 전환합니까? (0) | 2020.09.09 |
---|---|
양식 입력 배열을 PHP 배열로 가져 오는 방법 (0) | 2020.09.09 |
모든 글리프의 너비가 동일한 지 어떻게 확인합니까? (0) | 2020.09.09 |
django 1.5-정적 태그 내에서 변수를 사용하는 방법 (0) | 2020.09.09 |
$ scope와 $ rootScope의 차이점 (0) | 2020.09.09 |