- 公開日：2017-2-19 最終更新日：2017-2-17
- プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ
HTMLファイルは、header部分とbody部分でできています。ここでは、headerとbodyの意味と書き方を説明します。
目次
HTMLはheaderとbodyでできている
HTMLファイルは、次のようにタグの間に
|
1 2 3 4 |
<html> <head>header部分</head> <body>body部分</body> </html> |
最初の<html>でHTMLの文書であることを宣言し、文書を始めています。そして最後の</html>でHTML文書を閉じています。
その中にheader要素とbody要素が1つずつ入っています。
HTMLファイルの宣言
文書の最初、header部分より前に、HTMLのバージョンを宣言します。この例ではHTML5を使用しています。
|
1 2 3 4 5 |
<!DOCTYPE html> <html>HTML <head>header部分</head> <body>body部分</body> </html> |
日本語を宣言
HTML文書の始まりを宣言するときに、同時に言語属性を指定できます。
</html lang=”ja”>と記述することで日本語の文書であることを宣言しています。
headerってなに？
<head>から</head>までをheader部分と言います。その文書がHTMLの文書であること、どのような言語が使われているのかなど、コンピュータに知らせるための情報（メタ情報）を記述します。スタイルシートやスクリプトなど外部ファイルの読み込みを制御することもできます。
headerの内容
headerには、メタ情報を記述します。具体的にはファイルのタイトル、何に関する文書かの説明、キーワード、文字エンコード、作成者、スタイルシートなどです。
header部分に何を記述するかは文書の内容により異なります。ただし、タイトルは必ずタイトルタグ<title>…</title>で記述します。タイトルはブラウザのタブに表示されます。タイトル以外のheader部分の内容は、ブラウザでは表示されません。
headerの実例
headerには、必ずタイトルを1つ記述する必要があります。
|
1 2 3 |
<head> <title>headerとbody</title> </head> |
ほかに次のようなメタ情報を記述できます。メタ情報の指定にはメタタグを使います。metaタグは単独で用いられるので、閉じるタグは不要です。開始タグの最後に/>をつけます。
- <meta charset=”UTF-8”/>:文字コードがUFT-8であることを示しています。
- <meta name=”description” content=”説明文”>:文書についての簡単な説明を記述します。
- <meta name=”keywords” content=”キーワード”>:文書についてのキーワードを記述します。複数のキーワードがあるときは、半角のカンマ（,）で区切ります。
bodyってなに？
body部分はブラウザに表示される部分で、文書の本文です。body部分の内容はタグに規定されたとおりにブラウザに表示されます。同じページに表示される内容はすべて1つのbody部分に記述されます。
body部分の内容はタグによって章、節などのまとまりに分け、見出しをつけて構造的にも視覚的にも読みやすく整理されます。
Bodyの内容
|
1 2 3 |
<body> Webサイトに含まれるコンテンツ（文章、図表、画像、動画、音楽などいろいろな形のコンテンツをタグでマークアップしながら記述します。タグについては、他のページで説明します。 </body> |
注意点
Header部分とbody部分は、1つのHTMLファイルに1つずつあります。また、順序を替えることはできません。
HTMLの概要については「プログラミング入門講座①「HTMLとは〜概要と基本構造〜」も参考にしてください。
【おすすめ記事】
➡【HTML入門】テーブルやセルの大きさを指定するには
➡【HTML入門】colspanを使って表セルを横に結合してみよう！
➡【HTML入門】colspanを使って表セルを横に結合してみよう！
➡【HTML入門】余白の取り方(paddingとmargin)について
プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか？オンラインのプログラミングスクール「TechAcademy」のメンターが対応。
この記事が気に入ったら
いいね！しよう
プロナビの最新情報をお届けします
あわせて読みたい
2017年3月2日 【VBA入門】フォルダを作成する方法
2017年8月14日 【C言語超入門(第13回)】プロトタイプを活用しよう
2017年2月15日 【PHP入門】LaravelでWHERE句のANDやORをネストする方法- 2017年3月9日 【VBA入門】配列の内容を検索する方法
2017年2月13日 【JavaScript入門】alertでアラートダイアログを出す方法
2017年2月20日 【Python入門】リストの内包表記の使い方まとめ
