Webサイト

【随時更新】HTMLのheadでよく使う項目まとめ

はじめに

Webサイト製作を行なっていく上で、headによく使用する項目を記載していきます。

headとは

HTMLのhead部分は、実際には表示されない部分となります。
この部分にはタイトルやCSSのリンク、メタデータ(文字エンコード等)の情報を設定します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test title</title>
  </head>
  <body>
    <p>body content</p>
  </body>
</html>

タイトルをつける

<title>要素を使用して、文書にタイトルを追加します。
ブラウザのタブに表示されるタイトルはここで設定します。

<title>test title</title>

メタデータの設定

文字コードを指定する

ページの文字コードを指定します。
日本語非対応の文字コードを選択してしまうと、文字化けを起こしてしまうので注意しましょう。

<meta charset="utf-8">

CSSJavaScriptを追加する

ほとんどのサイトでは、見た目をカスタムするためにCSSやJavaScriptを用いています。
これらはそれぞれ、<link>要素、<script>要素で表します。

<link>要素

<link>要素は必ずHTMLのheadに配置します。
relとhrefの二つの属性を用いて設定を行います。
以下の例の説明をすると、「rel="stylesheet"」の部分が文書のスタイルシートであることを示し、「href="style.css"」はスタイルシートファイルへのパスを表します。

<link rel="stylesheet" href="style.css">

<script>要素

<script>要素はheadに配置する必要はありません。
実際使用しているページを見ると、bodyの後に置かれることが多いです。
これは、ブラウザーは全てのHTMLの内容を全て読み込んだ後にJavaScriptを適用しようとする動きを明示的に表すためです。

<script src="script.js"></script>

-Webサイト