head要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

head要素っていつ使うの?

ユキ
ユキ

タイトルやスタイルシートなどの情報を取得するために使うよ!

結論からいうと、head要素はページのタイトルやスタイルシートを取得するときに使います。

今回はhead要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: head要素とは

head要素は、ページのタイトルやスタイルシートなどを指定します。

タイトルやスタイル情報は文書メタデータとも呼ばれ、ブラウザの画面上には表示されませんが、開発する上で必要なコンテンツとなります。
head要素は、HTMLを記述する時には必ず使う要素になります。メタデータコンテンツは必要に応じて省略できますが、 title要素だけは必ず使用する要素になるでしょう。
また、meta要素を指定することによって文字コードも指定することができます。

2: head要素の使い方

<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>タイトル</title>
</head>

head要素は上記のようにメタデータを保持して作成されます。

meta要素にはcharset属性でUTF-8の文字コードを記述します。
link要素にはrel属性でstylesheetを指定し、href属性にcssのパスを指定してcssを適用できるようにします。
title要素にはページのタイトルを決めて記述してください。

このようにhead要素はいくつかのメタデータを保持する箱だと思ってください。

まとめ

今回はhead要素についてと使い方について解説しました。

head要素はメタデータを保持する箱のようなもので、HTMLを記述する時には必ず使う要素になります。メタデータを学んで上手に使いこなせるようになりましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!