HTML5の骨組み

表示例

ソース解説

■ HTML ファイルの作成
まず最初に、テキストエディターで以下の【リスト1】の内容をを入力します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ここにタイトル</title>
</head>
<body>
    ここが本文
</body>
</html>

ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。

タグと要素の説明

HTML では、タグとは、
・タグは「<」と「>」で囲まれたものです。
・ダグはWeb ブラウザでの表示や機能・定義などを設定します。
・タグには、「開始タグ」と「終了タグ」が一対のものがあります。


HTML では、要素とは、
・リスト1 のを例にすると「<title> ~ </title>」の部分で、タグとその内容でタイトルの
要素を表しています。この場合は「title 要素」と呼ばれます。
・要素の中に別な要素が含める事ができます。例えば「head 要素」の中に「meta 要素」
や「title」要素」が含まれています。


①<!DOCTYPE html>
②<html lang="ja"> ~ </html> 開始タグ、終了タグ
③<head> ~ </head>
④<meta charset="UTF-8">
⑤<title> ~ </title>
⑥<body> ~ </body>

■<!DOCTYPE html> タグ
「!DOCTYPE」は、doctype 宣言といいます。
ドキュメントがHTML5 である事を宣言しています。

 

■<html lang="ja"> ~ </html> タグ
「<html> ~ </html>」このタグの間がHTML 文書になります。
「<html lang="ja">」の中の「lang="ja"」は、言語が日本語であることを表しています。

 

■<head> ~ </head> タグ
このタグの間は文書情報となります。
ページに関する情報を入れます。

 

■<meta charset="UTF-8"> タグ
「meta」とはメタ要素で、ここでは「charset="UTF-8"」で、文字コードが「UTF-8」である事を表しています。
この場合、html ファイルをUTF-8 で保存します。
文字コードは、UTF-8 を指定するのが一般的になってきています。

 

■<title> ~ </title> タグ
ここにタイトルを入れます。
ここの内容がタイトルバーに表示されます。

 

■<body> ~ </body> タグ
ここの間は、本文になります。
ブラウザに表示する内容を記述します。