1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【HTML入門】headerとbodyの意味と書き方

Pocket

HTMLファイルは、header部分とbody部分でできています。ここでは、headerとbodyの意味と書き方を説明します。

HTMLはheaderとbodyでできている

HTMLファイルは、次のようにタグの間に

タグとタグが入るという形でできています。

最初の<html>でHTMLの文書であることを宣言し、文書を始めています。そして最後の</html>でHTML文書を閉じています。
その中にheader要素とbody要素が1つずつ入っています。

HTMLファイルの宣言

文書の最初、header部分より前に、HTMLのバージョンを宣言します。この例ではHTML5を使用しています。

日本語を宣言

HTML文書の始まりを宣言するときに、同時に言語属性を指定できます。
</html lang=”ja”>と記述することで日本語の文書であることを宣言しています。

headerってなに?

<head>から</head>までをheader部分と言います。その文書がHTMLの文書であること、どのような言語が使われているのかなど、コンピュータに知らせるための情報(メタ情報)を記述します。スタイルシートやスクリプトなど外部ファイルの読み込みを制御することもできます。

headerの内容

headerには、メタ情報を記述します。具体的にはファイルのタイトル、何に関する文書かの説明、キーワード、文字エンコード、作成者、スタイルシートなどです。

header部分に何を記述するかは文書の内容により異なります。ただし、タイトルは必ずタイトルタグ<title>…</title>で記述します。タイトルはブラウザのタブに表示されます。タイトル以外のheader部分の内容は、ブラウザでは表示されません。

headerの実例

headerには、必ずタイトルを1つ記述する必要があります。

ほかに次のようなメタ情報を記述できます。メタ情報の指定にはメタタグを使います。metaタグは単独で用いられるので、閉じるタグは不要です。開始タグの最後に/>をつけます。

  • <meta charset=”UTF-8”/>:文字コードがUFT-8であることを示しています。
  • <meta name=”description” content=”説明文”>:文書についての簡単な説明を記述します。
  • <meta name=”keywords” content=”キーワード”>:文書についてのキーワードを記述します。複数のキーワードがあるときは、半角のカンマ(,)で区切ります。

bodyってなに?

body部分はブラウザに表示される部分で、文書の本文です。body部分の内容はタグに規定されたとおりにブラウザに表示されます。同じページに表示される内容はすべて1つのbody部分に記述されます。

body部分の内容はタグによって章、節などのまとまりに分け、見出しをつけて構造的にも視覚的にも読みやすく整理されます。

Bodyの内容

注意点

Header部分とbody部分は、1つのHTMLファイルに1つずつあります。また、順序を替えることはできません。

HTMLの概要については「プログラミング入門講座①「HTMLとは〜概要と基本構造〜」も参考にしてください。

【おすすめ記事】

【HTML入門】テーブルやセルの大きさを指定するには
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】余白の取り方(paddingとmargin)について

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る