読者です 読者をやめる 読者になる 読者になる

webサイト制作の勉強@迅

webサイト制作の基本やホームページ制作を学ぶ、webサイト制作の勉強@迅。webサイト制作に必要なイラストレーター|フォトショップ|Dreamweaver|HTML5|CSS3|javascript|jQuery|の基本を紹介しています。

HTML5基本の型

HTML5基本の型

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>各ページタイトル</title>
<meta name="description" content="ページ概要文">

</head>

<body>

<header></header><!-- /header -->

<nav></nav><!-- /nav -->

<div id="container"></div><!-- /container -->

<footer></footer><!-- /footer -->

</body>

</html>

 

自分用ですが、上から簡単に解説していきます。

 

DOCTYPE宣言

<!DOCTYPE html>は、ドックタイプ宣言と呼ばれるもので、簡単に言うとHTML5のルールに従ってコードを書いていくことを宣言するものです。

htmlタグで文書全体を囲む

<html lang="ja"></html>はHTML文書の開始と終了を表します。lang属性によって日本語を使用していることをブラウザや検索エンジンに対して明示します。

headとbody

htmlタグの中に入れ子構造で、<head></head>と<body></body>を記述します。

ここまでは、決まりきったお約束だと思って頂いて大丈夫です。

 

文字化け防止

<meta charset="utf-8">は、文字化けを防ぐためにutf-8という文字コードを指定しています。その直下にタイトルタグを書きます。

 

ページ概要文

<meta name="description" content="ページ概要文">は、ディスクリプション設定といいます。SEO対策及び検索エンジン対策に非常に大切なものの一つです。content属性の中にそのページの概要文を記述します。

 

body内のタグについて

・<header>や<footer>,<nav>といったタグは、HTML5から追加されたタグです。ウェブサイトを制作する人達は、従来(HTML5が出現する前)、<div id="header">や<div id="footer">といったヘッダーやフッターを呼ばれるものを自分で作って、レイアウトを調整したり、そこがヘッダーやフッターの部分だと明示したりしていたのですが、それがHTML5では標準化され、一つのタグとして使えるようになったものです。(つまりわざわざdivにid名を付けて自分で作らなくてもよくなったということです。)

・<div id="container">はdivタグに、container(※container = コンテンツ全体を囲む空要素に対してよく使われるid名)というid名を付けたdiv要素になります。この中に、ヘッダーとフッター以外のページの主要なコンテンツ(文章や図等)を入れていきます。これも今はまだ分からなくて大丈夫です。よく使われる主要なタグを覚えて、divの使い方を本格的にやり始めてからでも全然大丈夫ですので慌てず、今は全体の形をある程度把握できるようにしましょう。

※ちなみにcontainerというid名も、任意で好きなid名を付けられますが、今回メインとなるコンテンツ全体を囲むものとしてよく採用されるcontainerという名前を使用しただけです。絶対この名前じゃないとだめというわけではありません。

更に詳しく知りたい方へ

メタタグについて参考になるサイト

<meta>-HTML5タグリファレンス

 

ドックタイプ宣言について参考になるサイト

HTMLのDOCTYPE宣言って何なの?使い方は?書き方は?