1. ホーム
  2. HTML・CSS
  3. 基礎5. HTMLの基本構造の要素と属性

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

HTMLの基本構造

HTMLには、HTMLとして成立させるための最低限の構成があります。この章では、その構成に必要なタグやコードを説明していきます。
下記は、そのサンプルです。


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

DOCTYPE宣言

1行目に記述されたソースコードは、DOCTYPE（ドックタイプ）宣言と言います。
HTMLは、大文字と小文字を区別しないため、<!doctype html>という表記でも問題ありません。


<!DOCTYPE html>

HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。
当サイトは、最新のHTML5で宣言しています。HTML5以前のバージョンは、xhtml1.0。その前はhtml4.01となります。（3つのHTMLの仕様（DOCTYPE）の比較）
特に理由がなければ、HTML5の宣言で問題ありません。DOCTYPEは、必ず1行目に書く必要があります。

html要素

HTMLの最上位のタグです。すべてのタグは、htmlタグ内に記述しなければなりません。
htmlタグのlang属性は、どの国の言語で書かれているかを表します。jaは日本語という意味です。他にも英語のenなど複数の言語があります。
lang属性は、ブラウザの翻訳機能のトリガーになっています。指定しない場合、翻訳をするかの確認表示が正しく表示されないので、必ず指定しておきます。


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

head要素

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


<head>
</head>

headタグ内に記述できるタグは、決まっていて、titleタグ・linkタグ・metaタグなどがあります。
headタグ内に記述した内容は、ブラウザに表示されません。
ただし、titleタグのテキストは、タブ名やブックマークで表示されます。

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文字以内で収めるのが基本です。
titleタグは、検索サイトが重要視するタグの1つです。
ポイントは、ページごとにタイトルを変えることです。GoogleやBingなどの検索サイトでは、ページごとにタイトルを変えることを推奨しています。

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

body要素

bodyタグ内には、ブラウザに表示される文書を記述します。
この先の章で、特に指定がない場合、すべてbodyタグ内で記述していきます。

まとめ

  • HTMLの基本構造のタグは省略してはいけない
  • <!doctype html>は、必ず1行目に指定する
  • titleタグのテキストは、ページごとに変える

関連記事