累計訪問:本日訪問:
トップイメージ

みんなの味方~ビジネスサポートブログ~


HTML

headタグ

htmlのheadタグを解説します。

◎headタグ

<head>…</head>

headタグとは、メタ情報という、そのサイトページの情報を記述する部分にあたります。

◎記載例

一般的によく用いられるソースを下記で紹介します。

<html>
 <head>
  <meta charset="UTF-8">
  <title>みんなの味方~web:HTML~</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="keywords" content="HTML,PHP,css,ビジネス,business,サポート">
  <meta name="description" content="HTMLのheadタグを理解してもらうため説明します。">
 </head>
</html>

◎解説

<meta charset="UTF-8">

文字エンコーディングの指定となります。「UTF-8」に指定されます。
この指定を怠ると、文字化けの原因となります。
→ metaタグの詳細はこちら

<title>タイトル名</title>

その名前の通り、タイトルを指定します。そのページの入り口となる部分で判りやすく長すぎないタイトルを心がけます。
→ titleタグの詳細はこちら

<link rel="shortcut icon" href="favicon.ico">

ファビコンを指定します。ファビコンとは、ブラウザのアドレスバーなどに表示される小さな画像(アイコン)を指します。
→ linkタグの詳細はこちら

<link rel="stylesheet" type="text/css" href="css/style.css">

読み込むスタイルシート(外部CSSファイル)を指定します。スタイルシートとは、構造化文書などにおける表示形式を制御するしくみを指します。
→ linkタグの詳細はこちら

<meta name="keywords" content="キーワード1,キーワード2,…">

ページのキーワードを指定します。検索エンジンで利用されます。
→ metaタグの詳細はこちら

<meta name="description" content="検索結果に表示される説明文">

検索結果に表示される説明文になります。ページに興味を持ってもらうための大事な文章です。100文字前後で設定しましょう。
→ metaタグの詳細はこちら

あとがき

HTMLでページを作成するとき。
そのページをいかにたくさんの人に見てもらえるか。もちろん本文の内容がより興味を引くかどうかは重要です。
しかし、内容以前に存在を知ってもらえねば何も生まれません。
「知ってもらう」上でのアプローチとして重要な項目を記述する部分がheadタグになります。
例えば、どんなに中身が素晴らしい人間であろうと全身に入れ墨があったらどんな面接でも成功はしないでしょう。
無数に存在するWeb上のページで見つけてもらうため、自分を正当に評価してもらうため。
ちょっとした違いで、差がでる部分です。
「これくらいやらなくても大丈夫」と怠けていると後悔してしまうかもしれません。
第一印象で決まってしまうのも癪ですが、知らない誰かとつながるためには、すごく大事だなと思います。



みんなの味方~ビジネスサポートブログ~

トップに戻る