基礎5. HTMLの基本構造の要素と属性

2016/03/12 2019/04/28 hatano

1 HTMLの基本構造

HTMLの基本構造

下記はHTMLのソースコードで必須となる基本のタグの構成です。


<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
</head>	
<body>
	
</body>
</html>

doctype宣言

1行目に記述されたソースコードはdoctype（ドックタイプ）宣言と言います。


<!doctype html>

HTMLには、いくつかバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがdoctypeです。このサイトでは、最新のHTML5で宣言しています。HTML5の前のバージョンは、xhtml1.0。その前はhtml4.01となります。（3つのHTMLの仕様（DOCTYPE）の比較）

特に理由がなければ、HTML5の宣言で問題ありません。

doctypeは書類の必ず1行目に書く必要があります。

html要素

HTMLの最上位のタグです。すべてのタグはhtmlタグ内に記述しなければなりません。htmlタグのlang属性は、どの国の言語で書かれているかを表します。jaは日本語という意味です。他にも英語のenなど複数の言語があります。


<html lang="ja">
</html>

head要素

headタグ内にはHTML文書に関する情報（メタデータ）を記述します。


<head>
</head>

headタグ内に記述できるタグは、決まっていてtitleタグ・linkタグ・metaタグなどがあります。headタグ内に記述した内容はブラウザに表示されません。

meta charset= "utf-8 "

headタグ内に記述します。meta要素。charset属性はHTMLの文字コードを指定する属性です。metaタグは終了タグがありません。


<meta charset="utf-8">

文字コードを正しく指定しないと、ブラウザの表示で文字化けが発生する場合があります。utf-8以外にshift-jisなどがあります。HTML5は、utf-8を推奨しています。

title要素

headタグ内に記述します。ページのタイトルを記述します。タイトルの文字数に関しては、「初級42. meta要素 - ページの説明文（meta description）」で詳しく解説しています。


<title>ページのタイトル</title>

ブラウザのタブに表示されたり、お気に入り（ブックマーク）に登録した時の名前になります。また、検索結果のタイトルに表示される文字になります。文字数に制限はありませんが検索結果で表示されるのは全角文字で30文字以内です。それ以降の文字は検索結果には表示されません。

検索サイトが重要視するタグの1つです。ポイントは各ページごとにタイトルを変えることです。googleやyahooなどの検索サイトもページごとにタイトルを変えることを推奨しています。

Google ページのタイトルについて