Help us understand the problem. What is going on with this article?

HTMLの基礎構造

More than 1 year has passed since last update.

はじめに

この記事はProgate(プログラミング学習サービス)を使ってHTMLについて学習した内容を忘れないように逐一書き留めたものです。なので、ところどころ間違ってる可能性があるので、参考程度にとどめていただけると幸いです。

目次

1.HTMLの骨組み
2.head要素
3.body要素

1.HTMLの骨組み

ここではHTMLの構造について簡単に説明します。下に載せたコードが最も簡単な形のHTMLの構造です。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

一行目の<!DOCTYPE html>は単にHTMLのバージョンを宣言するためのものです。もう何も考えずに機械的に書いちゃいましょう。

2.head要素

次に続く<head>要素内には、Webページの設定に関する情報を書いていきます。
具体的には

  • 文字コードの情報
  • ページのタイトル情報
  • cssの読み込み情報

などです。これらの情報は以下のような定型文を<head>要素内に記述することで設定できます。

  1. 文字コード情報の設定  <meta charset = "文字コード名">
  2. ページのタイトル情報   <title> タイトル名</title>
  3. css読み込み情報      <link rel = "stylesheet" href = "cssファイル名">

実際の具体例でいうと下の感じです。

<html>
  <head>
    <meta charset ="utf-8">
    <title>Progate</title>
    <link rel ="stylesheet" href ="stylesheet.css">
  </head>
  <body>
  </body>
</html>

ちなみに"タイトル"というのは、下の画像のようにブラウザのタイトルバーに表示される名前のことです。

<head>要素は基本的にこの3つの要素だけ書いておけば大丈夫かと思います。

3.body要素

先に述べた<head>要素内での記述がWebページに表示されないのに対して、<body>要素内での記述はダイレクトにWebページに表示されます。<head>要素に比べると、書くことも多くなり、難しいです。
では順を追って見ていきましょう。

まず初めに、多くのホームページは大きく”ヘッダー””メイン””フッター”の3パートに分けることができます。下の図のヘッダーとフッターの間の領域はメインと呼ばれます。

  • ヘッダー : どのページが開かれても常に共通して表示される上の部分
  • メイン  :  主なコンテンツが含まれる
  • フッター :  ホームページ一番下の部分 「会社概要」などを書いてたりする。

この3つのパートはそれぞれ違う背景色であったり、文字の大きさを使ったり、異なった設定を用いることが多くなります。そのため、<body>要素はあらかじめ3パートに分けておくとよい。分け方は以下のとおりです。

<body>
    <div class ="header">
    </div>
    <div class ="main">
    </div>
    <div class ="footer">
    </div>  
  </body>

ここで用いられた<div>はdivision(分割)からきています。その名の通り、ここでは<body>要素を3つのパートに分割するために使われています。classというのはわかりやすいようにそれぞれのパートにつけたパート名と思って問題ないと思います。

4.終わりに

今回は本当に基礎的なHTMLの構造についてだけ説明をしてみました。
次回以降CSSやより細かなHTMLの書き方について説明をしていきたいと思います。
私も勉強を始めたばかりなので、初心者のみなさん一緒に頑張っていきましょう:)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away