HTMLを記述する基本的な3つのタグとその構成について解説します!

HTMLでは、ある程度決まったタグを使うことがあります。 

HTMLのバージョンを指定する 

HTMLでは、バージョンを指定しておきます。 

ゲームで言うと、○○クエスト1、○○クエスト2というような感じです。 

現在はHTML5というバージョンが使われています。 

バージョンによって使える要素やどこに配置できるかなどの情報が違ってくるのでかならず指定しておきましょう。 

このようにバージョンを表記することを「文書型宣言」といいます。 

「○○バージョンで書いてますよー」とコンピュータに宣言するわけですね。 

記述は次のように行います。 

<!DOCTYPE HTML> 

こんな感じです。 

HTML5以前のバージョンでは、もっと長ったらしい宣言が必要でしたが、HTML5からはこれで十分になりました。 

ちなみに、宣言をしないと「互換モード」となり、CSSでデザインする時に不具合がでてしまう可能性があります。 

宣言しておけば「HTML5以降の標準準拠モードで書いてますよー」となるので、問題なく表示できるようになります。 

HTMLの文字が大文字ですが、DOCTYPE宣言は特に区別する必要はないので、小文字で記述しても問題ありません。 

文書構造の定義 

HTMLで記述する文章の構造をつくっていきましょう。 

<html>、<head>、<body>の3種類のタグを使って定義していきます。 

この3つの順番は入れ替わることはありません。 

<html>~</html> 

このタグは、文書がHTMLで記述されていることを宣言しています。 

HTMLの記述をする際に<!DOCTYPE>を宣言後、最初と最後におきます。 

<head>~</head> 

ここには文書のタイトルや特徴、製作者情報など、文書に関する情報を記述していきます。 

ここで記述された文書は、タイトルを表示する<title>~</title>タグの間に記述したテキスト以外はブラウザ上に表示されません。 

<body>~</body> 

このタグの間に記述し文書やプログラムなどがブラウザに表示される部分となります。 

コメントを挿入しよう 

ホームページの作成時、後で更新したり、記述した内容を直したりする時のために見えないコメントを記述しておきたいという場合があります。 

そのときには、コメントを「<!–」と「–>」で挟んであげましょう。 

すると、挟まれた場所の文書は表示されなくなります。 

記入例 

<!DOCTYPE html>
<html>
<head>
<!--ここにHTML文書の情報を記述していきます。 -->
</head>
<body>
<!-- ここにホームページの内容を記述していきます。 -->
</body>
</httml>

上記の記入例をメモ帳に保存し、.htmlファイルにしてブラウザで表示すると、真っ白なウィンドウが出てきます。 

まとめ 

今回は枠組みをつくるための基本的な構造について解説しました。 

これができれば、あとはheadとbodyのところにタグや文章を記述していくだけです。 

すてきなホームページができるようにもりもり盛っていきましょう。 

タイトルとURLをコピーしました