Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML]head要素

はじめに

f:id:akatonbo_web:20150329141703j:plain

今日はhead要素の記述内容について学習しました。


HTML文書のメタデータ

メタデータとは、HTMLでは“その文書に関する様々な情報”を意味します。
HTML文書のメタデータは、head要素の中に、

などのタグで指定します。
これらのタグで表現できないその他の様々なメタデータは、<meta>で表します。

文字コードの指定

HTML文書では文字コードを指定する必要があります。

<meta charset="utf-8">
  • UTF-8ユニコードを表示する指定。近年の標準、特別な理由がない限りこれを選ぶ
  • HTMLファイル出力時の文字コードと、meta要素の文字コード指定は必ず一致させる
  • HTML文書では改行コードを指定するところはない

title要素

文書にタイトルをつけるタグです。省略はできません。
ここに記述したタイトルはブラウザのツールバーに表示、お気に入り登録時や検索エンジンの結果にも表示されます。SEO上重要な要素でもあります。

  • ですます表現で記述しない
  • “キーワード”(半角スペース)“カテゴリ”|”ユニーク語句"
  • キーワード:開店間近・新規オープンなどサービスの特徴
  • カテゴリ:カフェ、病院などカテゴリ
  • ユニーク語句:店名など個別のもの

link要素

リンクする外部リソースを指定する際に使用します。
外部リソースとは、現在の文書ファイルに関連する外部ファイルのことです。

  • HTMLファイル
  • CSSファイル
  • RSSファイル
<link rel="stylesheet" href="style.css">

リンク要素には、href属性とrel属性が必須です。
href属性には、リンクする外部ファイルのURLを指定します。
rel属性にはリンクタイプを指定します。具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。

代表的なキーワード値
その他の属性
  • 外部リソースの対象メディアを指定するmedia属性
  • 外部リソースの言語を指定するhreflang属性
  • リンクする外部リソースのMIMEタイプを指定するtype属性
  • アイコンのサイズを指定するsizes属性

参考:<link>-HTML5タグリファレンス