本講座ではhead要素とbody要素について学んでいきます。

head要素

head要素は自身(ファイル全体)の情報を記述する領域です。
自身をどう扱って欲しいか、どう表示して欲しいかを記述します。

head要素に記述するのは"ページに関する情報"のため、ブラウザのメインエリアには描画されません。

head要素に置くタグ

私たちがこれまでに配置してきたtitlestyleタグの他に、head要素内に置く主なタグとしてmetalinkタグがあります。

それぞれどんなものか、実際にGieerに設定しているものをいくつか見てみましょう。
(これらはサイトの公開時に必要になってくる記述です。今は参考程度にご覧ください。)

  • metaタグ - description
<meta name="description" content="Gieerはゼロから独学でWEBエンジニアを目指すあなたを支援する技術提供ブログです。当サイトで勉強中の美少女エンジニア(見習い)と一緒に勉強していきましょう。">

これは"ページの説明"を記したmetaタグです。
これにより、検索結果の説明文に任意の文字列を表示することができます。

検索結果の表示例

  • metaタグ - twitter
<meta name="twitter:site" content="@bgn_nakazato">
<meta name="twitter:title" content="Gieer | 独学する美少女エンジニア">
<meta name="twitter:image" content="https://gieer.tech/images/logo.png">

これは"Twitterでシェアされた時の表示方法"を記したmetaタグです。

  • metaタグ - viewport
<meta name="viewport" content="width=device-width,initial-scale=1">

これは"スマートフォンで閲覧された時の表示方法"を記したmetaタグです。

  • linkタグ - icon
<link rel="icon" type="image/x-icon" href="/icons/favicon.ico">

これは"favicon(タイトル横に表示される画像)の表示方法"を記したlinkタグです。

faviconの表示例

  • linkタグ - canonical
<link rel="canonical" href="https://gieer.tech">

これは"サイトの正式なURL"を記したlinkタグです。

body要素

body要素は本文を記述する領域です。
head要素に設定したtitleタグなどの情報に対しての"詳細な内容"になっていることが望ましいです。

body要素に記述される内容は、基本的に全てブラウザのメインエリアに描画されます。

HTMLの決まった形

HTMLは必ず

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

という形になります。

1行目にdoctype宣言(※)、2行目にhtmlタグがあり、その直下にheadタグ → bodyタグの順で並びます。


※ doctype宣言は別講座で取り上げます

lang属性

Gieerではhtmlタグにlangという属性を指定しています。

<html lang="ja">

値をjaとすることで、ページ全体が日本語で構成されていることを示しています。

この属性がなくてもブラウザは自動で判断してくれますが、これもHTMLの決まった形として覚えておくと良いでしょう。

では、link.htmlindex.htmltask.htmlhtmlタグにlang属性を追加しておきましょう。

<!doctype html>
<html lang="ja">
<head>

まとめ

本講座では

  • head要素とbody要素について
  • head要素に置くタグ
  • HTMLの決まった形

について学びました。

必須の要素なのであまり意識することがありませんが、それぞれがどんな役割なのか、ここでざっくりでも理解しておきましょう!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...