【入門レベル】HTMLの基礎知識と最小ひな形

HTMLの最小ひな形とHTMLに関する簡単な内容を書きました。「HTML？何それ？食べれるの？」というレベルの方には無理かもしれませんが、「興味あるけど難しそう。。。」ぐらいの人には少しは理解できるような内容かと思います。

まずはHTML5の最小のひな形をご覧ください。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>/*ここにタイトルを入力*/</title>
</head>
<body>
    //ここに表示させる内容を入力
</body>
</html>

1つ1つ説明していきますが、その前にHTMLの基礎知識を軽く説明します。

HTMLのドキュメントに記述されているコードは主に以下のような形になっています。

<title>HTMLドキュメントのタイトル</title>

<title>を「開始タグ」、</title>を「終了タグ」、開始タグから終了タグまでのひとまとまりを「title要素」と呼びます。この場合、title要素の内容(コンテンツ)は「HTMLドキュメントのタイトル」となります。

<a href="example.html">リンクテキスト</a>

このように開始タグ内に追加で記述されている場合もあります。このとき、hrefを「属性名」example.htmlを「(属性)値」と呼びます。

また、要素の中にはコンテンツを含まない「空要素」と呼ばれるものがあります。(<br>や<hr>など) HTMLでは空要素は開始タグのみで(終了タグを付けずに)表します。

わからない事があるときに調べていると、「なんとか要素はなんとか属性を指定する事ができる」みたいに書かれている事が多いので、要素や属性など各名称は把握しておきましょう。

ここから上のひな形の内容をひとつずつ確認していきます。

<!DOCTYPE html>

この部分を文書型宣言といいます。HTMLドキュメントでは最初に文書型宣言を記述するのがお約束です。これまではバージョン情報や仕様についての記述が必要だったのですが、HTML5は上記の文書型宣言に仕様で決められています。

<html>から</html>までの部分がhtml要素となります。この部分がHTMLドキュメントであることを表します。html要素内には下で説明する head要素とbody要素が順に続きます。

html要素の開始タグ内に書かれているのがlang属性と言語タグ(値の部分)です。要素のコンテンツや属性に含まれるテキストの言語をlang属性と言語タグで指定します。「ja」は日本語を表す言語タグです。

lang属性はhtml要素以外にも指定することができますが、親要素(上の要素)と言語が同じ場合は省略する事が可能なので、全部日本語の場合は一番の親要素であるhtml要素のみ指定すればOKです。

head要素には使用する文字コード、ドキュメントのタイトルなどドキュメントに関する情報(メタデータといいます) を記述します。

meta要素ではメタデータを表します。各種情報を対応した属性にて指定していきます。 meta要素自体は空要素なので終了タグは不要です。

meta要素内で指定できるcharset属性ではドキュメントの文字コードを指定します。 HTML5では"utf-8"が推奨されています。

title要素ではドキュメントのタイトルを記述します。 title要素内のテキストはブラウザのタイトルバーやブックマーク、履歴、Googleなどの検索結果画面などに表示されます。

html要素内でhead要素の次に記述するのがbody要素です。 body要素内ではドキュメント本体のコンテンツ(表示される内容)について記述していきます。 1つのドキュメントに対してbody要素は1つのみです。

BFL〜Blog For Leveling〜