【ゼロから学ぶHTML/CSS】head要素の基本とheadに記載する要素【head/meta/title/base/link/style/#5】

HTML/CSS
HTML/CSS

head要素の基本

head要素は、html要素の最初の子要素として記載します。

head要素に「このWebページはどのようなページなのか?」「タイトルは?」「他のファイルを読み込むリンクは何?」などをコンピューターに教えるための情報(要素)を記載します。

head要素内に記載する要素は、主に次の5つがあります。

  • meta要素
  • title要素
  • base要素
  • link要素
  • style要素

さらに、command要素、noscript要素、script要素を加えた8要素をメタデータコンテンツと呼びます。メタデータコンテンツとはHTMLページの概要他のページの関連性を示す要素達です。

つまり、head要素とはコンピューターが読み取る場所のことで、メタデータコンテンツにWebページの詳細な情報記載します。

headに記載する要素

meta要素

Webページの仕様を伝える要素です。「HTML文書の文字コードは何か」「HTML文書の概要」「検索エンジンにページを見せるかどうか」などです。

meta要素を使用する際には、「name」「http-equiv」「charset」属性のどれか1つは必ず記載します。

meta要素についてもっと詳しく→準備中。

title要素

Webページのタイトルを設定する要素です。title要素で設定した文書は、Google検索の結果画面ブラウザのタブお気に入りブックマークのタイトルにも使われます。

Webサイト内で、できるだけ同じtitleのページが存在しないように気を付けましょう。SEO対策においても重要な要素になります。

base要素

相対パスの基準となる場所を設定する要素です。base要素はlink要素などの「URLが指定されている要素」よりも前に記載する必要があります。

例えば、A.htmlを「C:\html」フォルダで作成しているとします。A.htmlで使用したい画像ファイル「画像.jpg」が「C:\画像」フォルダにあるとします。

A.htmlで記載した画像のURLが「./画像/画像.jpg」と記載されているとします。これは記載したファイルからの相対パス、つまり「A.htmlが存在する場所/画像/画像.jpg」を指し示すことになってしまうので、「C:\html\画像/画像.jpg」のパスとなります。ここには画像が存在しませんので、画像がHTMLに表示されません。

そこで、base要素に「C:\」を指定すると、「C:\」が相対パスの基準になります。つまり「./画像/画像.jpg」は「C:\画像/画像.jpg」になります。これによりA.htmlで記載した画像のURLが「./画像/画像.jpg」でも正しく表示されるようになります。

link要素

外部ファイルをWebページに読み込む要素です。CSSやRSSなどのファイルを読み込むことが多いです。

link要素を使うには「href属性」と「rel属性」が必須になります。

  • 「href」には参照する外部ファイルのURLを指定します。
  • 「rel」にはhref属性で指定したファイルの用途を指定します。stylesheetやicon、indexが良く使われますが、他にも多くの属性値があります。

link要素についてもっと詳しく→準備中。

style要素

HTML文書にスタイル情報を直接記載するための要素です。

link要素で外部のCSSファイルを参照しますが、style要素ではHTML文書(Webページ)に直接CSSを記載する場合に使用します。

HTMLとCSSが混ざってしまうのでメンテナンス性の低下を懸念して、基本的には外部のCSSファイルにスタイル情報を記載して、link要素で読み込むことが多いです。

コメント

タイトルとURLをコピーしました