HTMLの記述ルールと合わせて覚えておきたいのが、HTMLの基本構造です。HTMLの基本構造とは、HTMLファイルの中身の構成のことです。この構造を守ってHTMLを書きます。
HTMLの基本構造
HTMLファイルの中身の構成は、下図のとおりです。
- ①DOCTYPE宣言
- 文書型の定義
- HTMLのバージョンの指定
- ②htmlタグ
- HTML文書であることを示すタグ
- ③headタグ
- HTMLファイルの様々な情報を定義する
- ここに書いたものはブラウザに表示されない
- ④bodyタグ
- ブラウザに表示する内容を記述する
これがHTMLの基本構造です。この構造を守ってHTMLを書きます。
簡単なHTML文書
HTMLの基本構造を踏まえた上で、簡単なHTMLのコードを書きます。以下のコードが書かれたHTMLファイルをブラウザで開くと「見出しタグ」とだけ表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの練習</title> </head> <body> <h1>見出しタグ</h1> </body> </html>
コードの説明
ここからは、簡単なHTML文書で書いたコードの説明です。
DOCTYPE宣言
<!DOCTYPE html>
文書型の定義です。
開始のhtmlタグ
<html lang="ja">
開始のhtmlタグです。このHTMLファイルで扱っている言語は、日本語です。
headタグ
<head> <meta charset="UTF-8"> <title>HTMLの練習</title> </head>
ヘッダの定義です。ブラウザには表示されない様々な情報を設定します。<meta charset="UTF-8">は、文字コードをUTF-8に設定するという記述です。<title>HTMLの練習</title>は、このページのタイトルです。ブラウザのタブのところに表示される文言です。
bodyタグ
<body> <h1>見出しタグ</h1> </body>
<body>から</body>の間に、ブラウザに表示する内容を記述します。h1タグは、見出しを表します。開始のh1タグと終了のh1タグの間に記述したものが、見出しの内容としてブラウザに表示されます。
終了のhtmlタグ
</html>
終了のhtmlタグです。HTMLの終わりを表します。
ツリー構造
htmlタグを親として、下に枝分かれしていく構造をツリー構造といいます。簡単なHTML文書のところで記述したHTMLをツリー構造で表すと下図のようになります。
HTML入門のまとめ記事なら... » HTML入門まとめ
