htmlのヘッダ領域には何を書く?役割と頻繁に記述される内容を把握しよう!
  • facebookページ
  • twitterページ
  • 2020.05.22

    htmlのヘッダ領域には何を書く?役割と頻繁に記述される内容を把握しよう!

    htmlファイルを作成する際、ヘッダ(head)領域は必ず記述することになりますが、使い方がイマイチ分かっていない方も多くいらっしゃいます。

    本記事では、ヘッダ領域の基本的な役割と頻繁に利用される記述方法についてご紹介していきたいと思います。

    htmlのヘッダ領域の役割とは


    htmlには、最低限必要な要素として「htmlタグ」「headタグ」「bodyタグ」が必要です。

    htmlのヘッダ領域(headタグ)に指定する情報は、ホームページを訪れたユーザーに直接見せる情報ではないけれども、ホームページを表示するためにブラウザが必要とする情報を記述するエリアとなります。

    htmlのヘッダ領域に指定出来る要素

    htmlのヘッダ領域に指定出来る要素としては、下記のようなものが挙げられます。

    • metaタグ:HTML文書自体の情報(メタデータ)
    • titleタグ:HTML文書のタイトル
    • styleタグ:スタイルシート(CSS)を記述する
    • scriptタグ:スクリプトの読み込む(書き込み)
    • linkタグ:関連するファイルの読み込み

    それぞれの要素の使い方について、順番に説明していきます。

    htmlのヘッダ領域指定1:metaタグの使い方


    Webページの情報を検索ブラウザ(GoogleChrome・Firefoxなど)に伝えるために利用されます。

    頻繁に利用されるmeta情報の指定についてご紹介していきます。

    文字コードの指定

    ブラウザでWebページを表示する際の文字コードをmetaタグに記述します。

    HTML5以前の記述法では下記のように記述されていることが多いですが、HTML5以降からは上記のように簡略化することが可能です。

    説明文の指定

    Googleなどの検索エンジンで何かを検索すると、タイトルと説明文が表示されるかと思います。

    この説明文に表示する内容を決めるのが「メタディスクリプション」です。

    name属性に「discription」を指定すると、content属性に設定した文言が説明文として表示されます。

    キーワードの指定

    検索エンジンに設定したキーワードの内容で記事を書いていることを伝えるために指定します。

    検索結果として上位表示されやすくするため、一般的に1~3つのキーワードを設定するのが一般的です。。

    name属性に「keywords」を指定し、キーワードとして設定したい値をcontent属性に「,」区切りで設定します。

    ポテパンダの一言メモ

    確かな情報とは言い切れませんが、Google検索ではmetaキーワードに設定された値は検索結果の上位表示判定に使用していないとの情報もあります。

    htmlのヘッダ領域指定2:titleタグの使い方


    titleタグに設定した値は「検索エンジンでの結果」と「ページを開いた際のタブ」に表示されます。

    titleタグの記述方法

    titleタグの記述方法は下記の通りです。

    タグの内側に設定したテキストがタイトルとして表示されます。

    title属性の役割

    titleタグには、属性として「title=”テキスト”」を表示することが可能です。

    title属性に指定したテキストの値は、音声サポートを利用した際に読み上げられます。

    htmlのヘッダ領域指定3:styleタグの使い方


    styleタグは、HTMLファイルに直接スタイル(CSS)を記述する際に利用します。

    styleタグの記述方法

    styleタグの記述方法は下記の通りです。

    styleタグを利用する場合、ブラウザによりCSSとして記述した内容がそのままテキストとして表示されてしまうことがあるため、CSS全体を下記のようにコメント化しておく方法が一般的です。

    HTML5ではCSSは別ファイルに記述する方法を推奨

    styleタグはHTMLファイル上に直接CSSを記述出来る方法ではありますが、HTML5からはCSSを別ファイルに記述して、後述する「linkタグ」で読み込む方法が推奨されています。

    styleタグはあくまで記述方法の1つとして認識しておき、実際の利用はlinkタグからCSSを読み込む方法で実装しましょう。

    htmlのヘッダ領域指定4:scriptタグの使い方


    scriptタグでは、JavascriptやVBscriptを記述してHTMLに動的な処理を加えることが可能です。

    scriptタグの記述方法

    scriptタグの記述方法は下記の通りです。

    scriptタグでもstyleタグ同様に、scriptタグ内部に直接コードを記述する場合、scriptタグ非対応ブラウザでテキストとして表示されないよう全体をコメント化しておきます。

    ここで記述したtype属性に関しては、scriptタグの必須属性です。

    Javascriptを指定する場合には「type=”text/javascript”」という風に設定します。

    src属性で外部ファイルの取り込み

    scriptタグの内部に処理を記述することで、スクリプトを実行することは可能ですが、HTML5からはスクリプト処理は別ファイルに記述することを推奨しています。

    src属性を利用することで外部ファイルを取り込むことが可能です。

    上記の例ではhtmlファイルと同階層にある「sample.js」というJavascrptファイルを読み込むことが可能です。

    htmlのヘッダ領域指定5:linkタグの使い方


    linkタグの最も一般的な使い方としては外部のCSSファイルを読み込む際に利用されます。

    linkタグでは外部ファイルの読み込み以外にも、検索エンジンにページの関係性を伝える際など様々な用途で利用されます。

    ポテパンダの一言メモ

    本記事のテーマと少し離れてしまうため、今回は外部ファイルの読み込み方法のみご紹介していきます。

    CSSの外部ファイル読み込み

    HTML5では、デザインは別ファイルとして切り出すことが推奨されています。

    linkタグの使い方としても最も多く利用されるのがCSSファイルの読み込みです。

    rel属性に「stylesheet」を指定し、href属性にCSSファイルのパスを指定することで、外部のCSSファイルを読み込むことが可能です。

    ポテパンダの一言メモ

    応用として、href属性にGoogleFontsやFontAwesomeのURLを記述するとWebフォントを読み込むことが可能です。

    アイコン画像の読み込み

    Webサイトのタブに独自のアイコンを表示させるのもlinkタグを使用して設定します。

    linkタグのrel属性に「icon」と指定することで、href属性に指定したURLの画像がアイコンとして表示されます。

    さいごに:htmlのヘッダ領域で頻繁に利用されるタグの使い方を把握しよう!


    本記事では、htmlにおけるヘッダ領域の役割と基本的な使い方についてご紹介してきました。

    ヘッダ領域には様々なWebサイトの情報を埋め込むことが可能ですが、全てを覚える必要はありません。

    今回ご紹介した基本的な内容を頭の片隅に置いてもらって、html実装の際に調べながら必要な情報をヘッダ領域に組み込めるように理解していきましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE