HTML5 マークアップ入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

昔書いた HTML5 に関するエントリー 『HTML5 でコーディングしてみよう!』 のサンプルを jsdo.it に移植したので改めて解説します.

fullscreen 用に作ってあります. fork して色々イジって遊んでください.

Step by Step で HTML5 や CSS3 を学びたい方は過去に書いた『HTML5 と CSS3 で Web 制作』をどうぞ.

Demo Download

HTML5 の基本的なマークアップ

基本的なひな形はこんな感じです.

<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>HTML5 コーディング</title>
        
        <style>
        /* ここに CSS を書く */
        </style>
        
        <script>
        /* ここに JavaScript を書く */
        </script>
    </head>
    
    <body>
        <h1>HTML5 コーディング</h1>
    </body>
</html>

シンプルになった DOCTYPE 宣言

DOCTYPE 宣言の仕方がシンプルになっています.

【 旧HTML 】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【 HTML5 】

<!DOCTYPE html>

シンプルになった文字コード指定

文字コードの指定もシンプルになっています.

【 旧HTML 】

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />

【 HTML5 】

<meta charset=UTF-8>

style と script のタイプ指定が省略可能に

今までも type 属性を省略しても正常に認識してくれていたのですが, HTML5 から正式に省略 OK になりました!!

【 旧HTML 】

<style type="text/css"></style>
<script type="text/javascript"></script>

【 HTML5 】

<style></style>
<script></script>

セマンティックなマークアップ

HTML5 からは以前までのバージョンでよく使われていた id や class 名をタグに昇格し よりセマンティックなマークアップが可能になりました.

今後はクローラの方も HTML5の構文に対応してくると思うので今のうちに対応しておくことで SEO 的にも有利になると思います.

id, class名からの昇格

HTML4 では div に対して id, class を指定することで,コーディングしていましたが, よりセマンティックなコーディングを目指そうということでよく出てくる id, class 名をタグに昇格しました.

HTML5 で追加された主なタグ

HTML5 で追加された主なタグの一覧です.

HTML5(タグ) HTML4(id, クラス名) セマンティック
section main, content, contents, area, body 章や節といったセクションを表す.
article article, entry ブログエントリや記事といった, それ自体でコンテンツとして成り立つ要素を表す.
aside sub メインとなるコンテンツと関連性の薄い, つまり削除してもそれほど影響のないコンテンツを表します. 広告などに使用.
header head, header ページやセクションのヘッダー部分を表す.
footer foot, footer ページやセクションのフッダー部分を表す.
nav nav ページのナビ部分を表します.

これらの要素を使うことで, 人間の目にもクローラにもやさしいコーディングができます.

注意点

注意することが一つあります. それは, やみくもに div を section や article, aside に置き換えてはいけないということです.

html5doctorに以下の一文があります.

Don’t use it unless there is naturally a heading at the start of the section

セクションの始まりに見出し(h1~h6)を自然に入れられない場合は使わないでください 的なことが書かれています. この点だけ注意してください.

HTML5 マークアップの例

HTML5 マークアップの例です. jsdo.it で作ったサンプルの内容になります.

HTML5 マークアップ部分

HTML5 によるマークアップ部分です. ブログ記事用のマークアップを想定しています.

<body>
    <header id="header">
        <h1>[header]</h1>
        
        <nav id="nav">
        <h1>[nav]</h1>
        </nav>
    </header>
    
    <div id="contents">
        
        <section id="main">
        <h1>[section]</h1>
        
        <article>
            <h1>[article]</h1>
        </article>
        
        <article>
            <h1>[article]</h1>
        </article>
        
        <article>
            <h1>[article]</h1>
        </article>
        
        </section>
        
        <aside id="side">
        <h1>[aside]</h1>
        </aside>
        
    </div>
    
    <footer id="footer">
        <h1>[footer]</h1>
    </footer>
</body>

スタイルシート

サンプルのスタイルシート部分のコードになります. 今回は HTML5 のタグがどういう構造になっているのかを分かりやすくする為に シンプルな段組と色分けを行なっています.

このスタイルシートの部分を修正してオリジナルの Web サイトを作ってみてください.

* {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    font-family: "Meiryo", Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    font-size: 12px;
}

h1 {
    font-size: 25px;
}

#header,
#nav,
#main,
#main article,
#side,
#footer {
    margin: 10px;
    padding: 5px;
    border: 5px solid black;
    background-color: rgba(0, 0, 0, 0.125);
    border-radius: 5px;
    
    text-align: center;
}

#header {
    background-color: rgba(255, 0, 0, 0.125);
    min-width: 600px;
}

#contents {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    width: 100%;
    min-width: 600px;
    min-height: 600px;
}

#main {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -moz-width: 800px;
    min-width: 400px;
    background-color: rgba(0, 255, 0, 0.125);
}

#side {
    width: 200px;
    background-color: rgba(0, 255, 0, 0.125);
}

#footer {
    min-width: 600px;
    background-color: rgba(0, 0, 255, 0.125);
}

っぽいスタイルを適応した例

上記のマークアップに, っぽいスタイルを適応した例です. スタイルが違うだけでだいぶ見た目が変わりますね.

このサンプルは一番上でも紹介した 『HTML5 と CSS3 で Web 制作』 で作成したものになります.

以上, HTML5 マークアップ入門でした.

今回の内容は, だいぶ前に書いたエントリーを改めてまとめ直したものです.

最近は, 昔と違って HTML5 や CSS3 のニーズもかなり高まってきているので, 昔書いた HTML5/CSS3 関連のエントリーを jsdo.it に移植しつつ公開していきたいと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT