[翻訳] Hgroup element

Category : HTML

WHATWG Wiki に興味深い記事があったので簡単に翻訳しつつ紹介してみようと思います。

この記事の情報

この記事は WHATWG Wiki の Hgroup element を翻訳したものです。
なお、原文は MIT ライセンスで公開されています。
この記事の最終更新時点で、原文の最終更新日時は 9 May 2011, at 12:31. 9 May 2011, at 13:28. となっています。

  • HTML コード内の特に重要でないと思われる部分に関しては一部省略して表記しています。
  • 原文・リンク先は変更される可能性があります。
  • 訳がおかしいところがありましたらご指摘ください。できるだけ早く直します。
  • 翻訳部分は次のセクションからとなります。

Hgroup element

このページの文書は、ヘッダー内のサブタイトルやキャッチコピーのマークアップにおけるユースケースと既存の使用パターンに関するものです。

現実における例

以下は全て、ページや記事ヘッダー内のサブタイトルやキャッチコピーが様々な構造でマークアップされている実在するページです。
それぞれのマークアップは必要に応じて、空白、またはヘッダーから無関係な内容を省略し、各サイトから直接コピー&ペーストされたものです。

The Telegraph (UK)

例: Coca Cola recipe ‘discovered’

<div class="storyHead">
  <h1>Coca Cola recipe 'discovered'</h1>
  <h2>A website claims to have uncovered Coca-Cola's top secret recipe.</h2>
</div>

National Geographic

例: Einstein Theories Confirmed by NASA Gravity Probe

<div id="page_head">
  <h1>Einstein Theories Confirmed by NASA Gravity Probe</h1>
  <h2 class="subtitle">Space mission did what the famed physicist said would be impossible.</h2>
</div>

Project Gutenberg

例: The War of the Worlds, by H. G. Wells

<h3 class="chapnum">CHAPTER ONE</h3>
<h3 class="chaptitle">THE EVE OF THE WAR</h3>

例: The Madcap of the School, by Angela Brazil.

<div style="(スタイル指定)">
  <a name="CHAPTER_I_THE_MOATED_GRANGE" id="CHAPTER_I_THE_MOATED_GRANGE"></a>
  <h2>CHAPTER I</h2>
  <h3>THE MOATED GRANGE</h3>
</div>

例: A Tale of Two Cities, by Charles Dickens

<h1>A TALE OF TWO CITIES</h1>
<h2>A STORY OF THE FRENCH REVOLUTION</h2><br>
<h2>By Charles Dickens</h2>

Techdirt

例: When Copyright And Contracts Can Get In The Way Of Art

<div class="story">
  <h1>When Copyright And Contracts Can Get In The Way Of Art</h1>
  <h3>from the <i>tales-from-the-creative-front-lines</i> dept</h3>
  <p>...</p>
</div>

XKCD

<div id="topRightContainer">
  <div id="logo">
    <a href="/"><img src="(URL)" alt="xkcd.com logo" height="83" width="185"/></a>
    <h2><br />A webcomic of romance,<br/> sarcasm, math, and language.</h2>
    <div class="clearleft"></div>
    <br />
    XKCD updates every Monday, Wednesday, and Friday.
  </div>
</div>

Yahoo! Finance

例: Gas prices expected to drop 50 cents by summer

<div id="y-article-hd">
  <h1 class="test1">Gas prices expected to drop 50 cents by summer</h1>
  <h2>After 44 days of surging gas prices, analysts expect drop of 50 cents by summer driving season<br></h2>
  <a href="(URL)" rel="nofollow"><img src="(URL)" alt="ap" class="sponsorimage"></a>	
  ...
</div>

Oxford English Dictionary

<h1>
  <span>
    <p>Discover the story of English</p>
    <span class="blurb">
      <p>More than 600,000 words, over a thousand years</p>
    </span>
  </span>
</h1>

Dive Into Accessibility

<div id="logo">
  <div class="inner">
    <h1 class="title"><a href="/" accesskey="1">Dive Into Accessibility</a></h1>
    <p>30 days to a more accessible web site</p>
    <a class="skip" href="#startnavigation">Skip to navigation</a>
    <span class="divider">&nbsp;</span>
  </div>
</div>

Calgary Herald

例: Cooking Solo Grows Up

<div id="storyheader">
  <div class="headline">
    <h1>Cooking Solo Grows Up</h1>
  </div>
  <div class="clear">&nbsp;</div>
  <div class="subheadline">
    <h2>On your own? You no longer have to put up with cereal over the sink or days of the same old leftovers. Joe Yonan shows us why</h2>
  </div>
  <div class="clear">&nbsp;</div>
  <div class="byline">
    <span class="name">By Gwendolyn Richards, Calgary Herald</span>
    <span class="timestamp">May 8, 2011 2:06 AM</span>
    <span id="lblComment" class="comments"></span>
  </div>
  <div class="clear">&nbsp;</div>
</div>

Panic

例: Coda – One-Window Web Development for Mac OS X

<div id="header">
  <h1><a href="/coda/" title="Coda">Coda</a></h1>
  <p>One window web development.*</p>
</div>

例: Unison – The Best Usenet Browser / Newsreader, Only For Mac OS X

<h1>
  <a href="(URL)" title="Unison - The Best Usenet Browser">Unison</a>
  <br>
  the best usenet browser
</h1>

PCWorld

例: Top 15 Android Apps For Smartphone Shutterbugs

<div id="articleHead">
  ...
  <h1>Top 15 Android Apps For Smartphone Shutterbugs</h1>
  <h2>Use these Android apps to add effects to your mobile photos and make them easier to take.</h2>
  <p class="byline">By <a href="(URL)">Daniel Ionescu</a>,
     <a href="(URL)" target="_blank">PCWorld</a>
     &nbsp;&nbsp; <script type="text/javascript">timestamp(1304707200000,'longDateTime')</script>May 6, 2011 8:40 pm</p>
</div>

Computerworld

例: Elgan: How to pop your Internet ‘filter bubble’

<div id="article_header" class="clearfix">
  <div id="content_type">Opinion</div>
  <h1>Elgan: How to pop your Internet 'filter bubble'</h1>
  <h2>Personalization algorithms are stereotyping you, then hiding information from you based on that stereotype. Wait -- what?</h2>
  <div id="byline">By Mike Elgan</div>
  <div id="date">May 7, 2011 08:00 AM ET</div>
    ...
</div>

Apple

例: Apple – iMac – Read about the features of the new iMac.

<hgroup>
  <h1><img src="(URL)" alt="Its beauty is way more than screen  deep. " width="766" height="46" class="center" /></h1>
  <p class="intro">All-new quad-core processors. Advanced graphics. Thunderbolt technology. FaceTime HD. iMac is a desktop workhorse disguised as an all-in-one wonder.</p>
</hgroup>

DocBook XSL Stylesheets

DocBook からタイトル／サブタイトルとして生成されるコンテンツは以下のように出力されます。(実際の見出しレベルはタイトル／サブタイトルを持つ要素の階層の深さによって異なる場合があります)

<div class="titlepage">
  <h2 class="title">Title</h2>
  <h3 class="subtitle">Subtitle</h3>
</div>

MiniApps

<hgroup>
  <h1><a href="(URL)" title="Home page"><span>MiniApps</span></a></h1>
  <h2>Beautifully crafted mobile web apps.</h2>
</hgroup>

InterACT with Web Standards

<h1>
  <span id="title">InterACT With <strong>Web Standards</strong></span>
  <span id="subtitle">A Holistic Approach to Web Design</span>
</h1>

From the Swedish Magazine Fokus

<h4>Utmanarna</h4>
<p><em>Tio republikanska kandidater som kan bli ett hot mot Obamas andra presidentperiod.</em></p>

サブタイトルを全くマークアップしていないウェブサイト

おそらく、開発者が魅力的な手本を持っていないから？

  • IMDB
  • Amazon
  • Wikipedia

Leave a Reply