html5+CSS3 Joyの動物百科≪犬編≫ の勝手な解説

HTML5とCSS3を使って作成したWEBページ（Joyの動物百科≪犬編≫）を解説します。
≪注意≫正しく学びたい方は読まないでください。自分勝手な都合の良い解説です。
写真はウィキペディアから利用しました。

１．DOCTYPEの記述

HTML4.01時は結構長い記載で、よく省略（DOCTYPEを書かない）していました。今回は短くなりました。
HTML4.01 ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML5　　：<!DOCTYPE html>
バージョンのようなものもないので、今後の変更もなさそうです。

２．文字エンコーディング（文字コードとほぼ同意）の指定

日本語の文字エンコーディングとしては"utf-8"　"shift_jis"　"euc-jp"などありますが、今後は"utf-8"にします。
HTML4.01 ：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5　　：<meta charset="UTF-8">
こちらも短くなりました。

<body>～</body>以外の重要な部分は以上です。

　　ミニチュアダックスフンド　　ポメラニアン

３．本文に使う<header>、<section>、<article>、<footer>など

実際に使ってみましたが、ウェブページの文書構造を判りやすくするだけみたいで、レイアウト目的のコンテナとして使うべきではないので、書かなくても良いと思っています。

４．本文のブロック（コンテナ）はすべて <div>～</div> で書くように

10数年前までは、あまりレイアウトが崩れる心配もなく、初心者には使いやすいので、レイアウトにテーブルタグ<table>を使っていました。
今はもう使えません。（ブラウザが賢いので、テーブルタグでレイアウトしてもちゃんと表示してくれます）

<div>～</div> で組み立てます。
<div>はブロック要素で「改行して終わり」ます。この性質をよく理解してから組み立てます。
直前のブロック（<div>～</div>）の下に配置するならそのままで、右に配置するならあとで説明する特殊な処理を施します。

５．本文の装飾について

HTMLはテキストをマークアップするだけなので、何の装飾もなく表示されます。装飾はスタイルシート（CSS）に指定します。

※HTML
ハイパー　テキスト　マークアップ　ランゲージ　です。
「マークアップ」とは機械が理解できるようにルールに従って文章を書くことです。
この機械が、巡回ロボットなどと呼ばれたりするのかな。