Programming log - Shindo200

イベント参加記録とプログラミング系の雑記

HTML5 の基本を学びました

フィヨルドインターン学習週1日目で HTML の基本を学びましたので、まとめてみます。

HTML

そもそも HTML とは何なのでしょうか。W3C のページを見てみます。
http://www.w3.org/standards/webdesign/htmlcss

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

この文章で大事そうなところは、「HTML is the language for describing the structure of Web pages.(意訳: HTML は Web ページの構造を記述するための言語)」というところだと思います。HTML は「Web ページの構造」を伝えるための言語だということを心にとめておきます。

HTML5

文章宣言

まずは、文頭に HTML5 で書かれていることを宣言します。

<!doctype html>

これは「この文章は HTML5 で書かれています」という意味になり、この記述によって、ブラウザは HTML5 だということを判断できるようになります。

セクション関連要素

HTML5 より前のバージョンでは、ヘッダーやメニューを表すのに、div タグに id や class を指定する方法を使っていました。

<div class="header">
ヘッダーです。
</div>
<div class="menu">
メニューです。
</div>
<div class="content">
  <div class="entry">コンテンツ</div>
  <div class="entry">コンテンツ</div>
  <div class="entry">コンテンツ</div>
</div>
<div class="footer">
  フッターです。
</div>

しかし、この方法ですと、ソースコードが div タグだらけになってしまい、ひと目でわかりにくいという問題があります。HTML5 では、ヘッダーを表す header タグ、ナビゲーションを表す nav タグなど、それぞれの役割に応じたタグ「セクション関連要素」が追加されました。

<header>
ヘッダーです。
</header>
<menu>
メニューです。
</menu>
<section>
  <article>コンテンツ</article>
  <article>コンテンツ</article>
  <article>コンテンツ</article>
</section>
<footer>
  フッターです。
</footer>

よく使うタグ

header タグ

http://www.html5.jp/tag/elements/header.html
直近のセクション(section とか body とか)のヘッダーを表すタグです。header タグの中では見出しタグ(h1 とか)を使うことを想定していますが、検索フォームやタイトルロゴだけを入れる可能性もあるので、仕様では必須にしていないようです。「特別なケースではない限り、header タグには見出しタグを入れること」と考えておいたほうがよさそうですね。

<header>
  <h1>O'dailly Japan</h1>
  <p>サンプルヘッダー</p>
</header>
footer タグ

http://www.html5.jp/tag/elements/footer.html
直近のセクションのフッターを表すタグです。フッターには「関連ドキュメントのリンク」や「コピーライト」を書きます。リンク先の例を見ると、見出しタグは使わなくてもいいみたいです。(h1 タグの h は headings、つまり見出しのこと。もしフッターに見出しを書いているなら、それはヘッダーの方に書くべき……とか考えている方もいるみたいです。参考:http://moz.com/community/q/h1-tag-in-the-footer)footer タグはセクションの最後に入れることが多いですが、必ずしもそうする必要はありません。

<footer>
  <p>copyright - O'Dailly Japan http://example.com/</p>
</footer>
section タグ

http://www.html5.jp/tag/elements/section.html
セクションを表すタグです。セクションとは、コンテンツの主題をグループ化したものです。

<section>
  <h1>僕のブログ</h1>
  <!-- ... -->
</section>

仕様では必須にしていませんが、やはり見出しタグを付けるのが一般的みたいです。「特別なケースではない限り、section タグには見出しタグを入れること」と考えたほうがよさそうです。

article タグ

http://www.html5.jp/tag/elements/article.html
このタグは少し難しいので、HTML5.jp のサイトから引用します。

article 要素は、ドキュメント、ページ、アプリケーション、サイトの中の自己完結した構成を表します。つまり、シンジケーションのように、単独で再配布でき再利用できるものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェット、その他、コンテンツの独立した項目が考えられます。

「自己完結した構成」という表現を使っていますが、正直なところ、イメージし難いです。しかし、http://www.xml.vc/HTML5/kiso/section.html の図を見ると、少しイメージしやすくなるかもしれません。section という大きな要素の中に、article という小さいな要素がいくつもあるようです。ブログページを例にすると、ブログ自体が section になって、ブログエントリの一つ一つが article になるというイメージでしょうか。

<section>
  <h1>僕のブログ</h1>
  <article>
    <h1>今日の日記</h1>
    <p>...</p>
  </article>
  <article>
    <h1>昨日の日記</h1>
    <p>...</p>
  </article>
</section>

nav タグ

http://www.html5.jp/tag/elements/nav.html
ナビゲーションリンクが埋め込まれたセクションであることを表すタグです。

<header>
  <h1>O'dailly Japan</h1>
  <nav>
     <ul>
       <li><a href="/">Home</a></li>
       <!-- ... -->
     </ul>
  </nav>
</header>

ページの複数の部分にナビゲーションリンクがある場合、全てのナビゲーションリンクに nav タグを使う必要はなく、主要となるナビゲーションリンクにだけ nav タグを使えばいいようです。

aside タグ

http://www.html5.jp/tag/elements/aside.html
補足記事や広告といった、主要のコンテンツから分離しても構わない情報が埋め込まれたセクションであることを表すタグです。

<aside>
  <h1>Twitter Feed</h1>
  <blockquote cite="http://example.com/1">
     ...
  </blockquote>
  <blockquote cite="http://example.com/2">
     ...
  </blockquote>
</aside>

資料

今回参考にした資料、HTML を学ぶのに良さそうな資料を紹介します。

World Wide Web Consortium (W3C)(英語)

HTML などの Web に関わる技術の標準化を行っている団体「W3C」のページです。Web に関わる技術用語の定義は、ここを見れば間違いがなさそうです。また、HTML のチュートリアルもあります。

The W3C Markup Validation Service(英語)

HTML の構造に間違いがないかチェックしてくれるサービスです。HTML を書いた後は、このサービスを使って、構造に問題がないかチェックすると良さそうです。

ドットインストール HTML 入門

HTML の基本を解説したビデオクリップです。入門者にお勧めです。