どや!?html5メモ – リファレンスやブログから情報を掻き集めた

03 8月

  • このエントリーをはてなブックマークに追加

html5メモ!リファレンスやブログから情報を掻き集めた

html5リファレンスやブログから情報をかき集めたのでメモしておく。
 


【もくじ】

 
DOCTYPE宣言

<!DOCTYPE html>

 
 
ドキュメントの言語を宣言

<html lang="ja">

 
 
文字エンコーディングの指定
また、HTML5ではShift_JISやECU-JP、UTF-32は推奨されていません。
UTF-8での記述になります。
Shift_JISを使っても表示されない、というわけではありません。
UTF-8がやたらと強く推奨されているということです。
どうやら策定している方々は日本の事情を考えてくれないみたいです。

<meta charset="UTF-8" />

 
 
古いブラウザでもHTML5が使えるようになるオープンソースのライブラリ
もしIE9未満だった場合にのみ実行する

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 
 
header 要素

  • header要素は導入部ないしナビゲーションの補助を表す
  • header要素は通常section要素の見出し(h1–h6要素かhgroup要素)を含むことを想定されている
  • header要素はセクションの目次、検索フォーム、あるいは関連するロゴを囲むためにも使える
  • header要素内にnav要素を使用することには問題がない
  • ページの区分上のdiv要素のid=”header”属性の代わりにheader要素を使うことができる
  • 2つ使用してもOK(こちらのリファレンスサイトは2つ使用している:
    http://www.html5.jp/tag/elements/header.html
<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

 
 
hgroup 要素

  • 小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、h1–h6要素のセットをグループ化するために使う
<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>

 
 
nav 要素

  • 他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーションのリンクを伴うセクションを表す
  • ページ上のすべてのリンクのグループが nav 要素の中にある必要はありません
  • 主要なナビゲーション・ブロックからなるセクションだけが、nav 要素に適しています
  • グローバルナビゲーション、ローカルナビゲーション、フッターナビゲーション程度にしておく
<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h1>Demos in Exampland</h1>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h1>Public demonstrations</h1>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h1>Demolitions</h1>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>

 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

 
 
article 要素

  • ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表す
  • フォーラムの投稿、雑誌や新聞の記事、ブログのエントリなどがそれにあたる
  • 自己完結していればコンテンツページに使用しても問題なさそう
  • article要素は、sectionよりも扱いが難しいので理解出来てない内に無理に使う必要は無い
  • sectionと悩むくらいなら sectionを使うのがベター
  • article要素を使うかどうかの判断基準は「article要素内だけを抜き出してそれをフィードとして配信した場合に妥当かどうか(実際に配信するかどうかは別)」となる
  • article要素内だけを見て、それがコンテンツとして成立しているかどうかが重要
  • article要素内にarticle要素が含まれる場合は、親のarticle要素と関連している必要が有る

例:article 要素を使ったブログ投稿

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a href="?comments=1">Show comments...</a>
 </footer>
</article>

 
 
section 要素

  • 一般的なドキュメント・セクションやアプリケーション・セクションを表す
  • section 要素は、一般的なコンテナ要素ではありません
    スタイリング目的やスクリプティングにとっての都合で要素が必要になったとき、ウェブ制作者は、代わりに、div 要素を使うことが推奨されます
  • section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる(が、cssでの指定が面倒なので、普通で良いかと)
  • section 要素には見出しを必ず入れる
  • h1からh6までのどのレベルの見出しをも含むことができるのですが、h1要素だけを使うか、または、セクションのネストに合ったレベルの見出し要素を使うかの、どちらかの見出しレベルの出現ルールに沿ったマークアップをすることが強く推奨されている
  • HTML 5でのsection要素とarticle要素の違い
<!DOCTYPE Html>
<Html>
<Head>
 <Title>Graduation Ceremony Summer 2022</Title>
</Head>
 <Body>
   <H1>Graduation</H1>
   <Section>
     <H1>eremony</H1>
     <P>Opening Procession</P>
     <P>Speech by Validactorian</P>
     <P>Speech by Class President</P>
     <P>Presentation of Diplomas</P>
     <P>Closing Speech by Headmaster</P>
   </Section>
   <Section>
     <H1>Graduates</H1>
     <Ul>
       <Li>Molly Carpenter</Li>
       <Li>Anastasia Luccio</Li>
       <Li>Ebenezar McCoy</Li>
       <Li>Karrin Murphy</Li>
       <Li>Thomas Raith</Li>
       <Li>Susan Rodriguez</Li>
     </Ul>
   </Section>
 </Body>
</Html>

<body>
<h1>A</h1>
<p>B</p>
    <section>
        <h2>C</h2>
        <p>D</p>
            <section>
                <h3>E</h3>
                <p>F</p>
            </section>
    </section>
    <section>
        <h2>G</h2>
        <p>H</p>
    </section>
</body>

 
 
aside 要素

  • その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができる
  • つまり、Amazonの「この商品を買った人はこんな商品も」みたいなものや、Googleアドセンスの広告エリアで使用する
  • リファレンスサイトの広告エリアで使用されている

 
 
footer 要素

  • footer 要素は、その直近の祖先にあたるセクショニング・コンテンツに対するフッターを表す
  • フッターは通常は、そのセクションに関する情報を含む(誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データなど)
  • footer要素内にnav要素を使用することには問題がない
  • ページの区分上のdiv要素のid=”footer”属性の代わりにfooter要素を使うことができる
  • 2つ使用してもOK

例:サイト全体のフッターとセクションのフッターの両方に footer 要素が使われている

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

 
 
a 要素

  • 段落、リスト、表など、その中にインタラクティブコンテンツ(例:ボタンや他のリンクなど)がない限り、その全体を包むことができる
  • a 要素でつまりブロック要素(セクション)を囲っても良い
<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

 
以上、ざっくりと書いてみました。
 

コメント

  1. pikavippejä より:

    Jäsenmaa laivasto toveri alustavasti patrick street brown äänimäärä viite,
    seuraaminen takaraja ala mänttäri juuttua niilo siepata yllättäjä benjamin chris arktinen

  2. Toutefois, les apprentis magiciens savent qu’il faut s’armer de persistence et s’entraîner régulièrement à effectuer
    les mêmes manipulations.

  3. This piece of writing will assist the internet people
    for setting up new webpage or even a weblog from start to end.

トラックバック

  1. pligg.com より:

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた…

    html5リファレンスやブログから情報をかき集めたのでメモしておく。…

  2. <strong>ガーデニング 定期刊行誌 一般</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?

  3. <strong>猫用品 アボダー?</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?

  4. <strong>ヘルメット フルフェイスヘルメット</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?

  5. <strong>mouse click the following article</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?

  6. <strong>advanced garcinia Review</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?

  7. <strong>batman cookie jars</strong>

    どや!?html5メモ – リファレンスやブログから情報を掻き集めた | デザインどや!?


  8. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL