Webの記録

はじめてのHTML5。

投稿日:

この記事は約 6 分で読めます。

そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。

これからHTML5を覚えていこうと思っているところなので、ここでは個人的な初心者メモとして残しておきます。(少しずつ書き加える予定です)

IEでも表示が出来る事を前提に、今回は思い切った事はせず・・・今までのXHTMLをちょっとHTML5風に書き換える程度にします。

勉強をはじめたばかりなので、まだ理解出来てない部分も多いのですが・・・ぼちぼちいきます♪

head要素

title要素の前に必ずmeta要素で文字コードを指定しておかないと、IE8でページが真っ白になる事があるそうです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サイトのタイトル</title>
<meta name="description" content="サイトの説明">
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="author" content="著作権者名">
<link href="css/style.css" rel="stylesheet" type="text/css">

 

HTML5に対応していないIE8以下のために「html5.js」をGoogle から読み込ませます

 <!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

 

body以下

新要素に戸惑いを覚えますが・・・、簡単にメモします。
まだまだ私の中で意味がぼんやりしてるものが多いです。。。

article
複数の記事などがある場合、記事全体をまとめる。文章全体のまとまり。
section
ブログの個々の記事などのひとまとまり。章や節。
header
サイトタイトルやロゴなどのheader部分をまとめる
hgroup
見出しのみをまとめる。見出し要素以外のものは含めない(勧告候補からはずれるらしいです)
nav
ナビゲーション部分をまとめる
aside
そこまで重要ではない関連情報をまとめる
footer
footer部分をまとめる
small
免責条項、警告、著作権などはsmallでくくる。HTML4と意味が違う

 

装飾にはdivが必要になるので、従来通りdivを使ってくくります。以下はdivを省略しています。

<header>
<!-- 見出しのみをまとめた「hgroup」 -->
    <hgroup>
       <h1>見出し1</h1>
       <h2>見出し2</h2>
    </hgroup>

<!-- 「nav」がサイドにある場合は「header」でない場合も -->
    <nav>
       <h2>ナビゲーション</h2>
       <ul>
          <li><a href="#">ページ1</a></li>
          <li><a href="#">ページ2</a></li>
          <li><a href="#">ページ3</a></li>
       </ul>
    </nav>
</hrader>

<!-- 複数の記事など、記事全体をまとめる「article」 -->
<article>
    <h2>見出し2</h2>

<!-- ブログなどひとまとまりとして独立した個々の記事など「section」 -->
    <section>
       <h3>見出し2</h3>
       <p>テキスト。</p>
       <section>
          <h4>見出し3</h4>
          <p>テキスト</p>
       </section>
    </section>

    <section>
       <h3>見出し2</h3>
       <p>テキスト</p>
    </section>
  
    <aside>
       <p>そこまで重要ではない関連情報。サイドバーの中など・・・。</p>
    </aside>
</article>

<footer>
    <p><small>Copyright &copy; 2012 xxxx All Rights Reserved.</samll></p>
</footer>

 

ただ何も考えずにhtmlを書くのではなく、どんな構造になっているかをちゃんと考えた後に書いていく必要がありそうです。

まだまだ曖昧で理解出来てない部分があるので、しばらくは悩みそうです・・・。

HTML5のリセットCSS参考

リセットCSSも必要な場合もあると思います。
参考になるリセットCSSとして「html5doctor」がよく使われているようです。

チェックツール

W3Cの文法チェッカーと、アウトラインチェックツールです。

参考サイト

これからHTML5を勉強するのに見ておきたいサイトです。

-Webの記録
-

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Twitterのフォロミーバッチにチャレンジ♪

いろんなサイトの横側に見掛ける「Twitterのフォロミーバッチ」。
どんな風に作られているか気になっていたので、私もチャレンジしてみました。

no image

フォントサイズの単位変換が楽に出来る「PXtoEM.com」

この記事は約 1 分で読めます。 Webサイト制作で、コーディングをしていく時に、フォントサイズを計算しなくちゃいけない事があります。 単位が違う(px、em、ptなど)場合、なかなか計算が面倒くさい …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …

no image

Chromeの拡張機能FireBugとSnifferを入れてみた♪

この記事は約 1 分で読めます。Webサイト作っている時、大活躍しているのがFirefoxの「FireBug」です。 私が確認しているブラウザは、IE,Firefox,Safari,Chromeですが …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …