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

WordPressのコメント欄にオリジナルアバター画像を表示させてみた♪

この記事は約 1 分で読めます。 WordPressで投稿されたコメント欄で、よくデフォルトの「ミステリーマン」を見掛けます。 何となくそのままでは面白くないので、今回はオリジナルアバターを作って表示 …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

WordPressサイトで表示高速化をいろいろやってみた。

この記事は約 1 分で読めます。 スマホなどでWebページを閲覧するようになって、表示が遅いサイトはせっかくアクセスしても表示されないまま諦めてしまうことが多々あります。 Googleが検索結果の順位 …

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

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

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