プログラミング

プログラミング学習④【HTML headタグについて学ぶ】

こんばんは、本日はドットインストールでHTMLのheadタグについて学んでいきたいと思います。

HTMLは大きくheadタグとbodyタグに分けられております。

headタグは・・・

<head>~</head)で挟まれた部分で、閲覧者に直接見えないタグを入れます。検索エンジンやブラウザに情報を提供したり、指示を出したりするためのタグを書きます。

bodyタグは・・・

<body>~</body>で挟まれた部分で、閲覧者に直接見える部分です。

 

その内、今回はheadタグについて見ていきたいと思います。

下記はVisual Studio Codeのコード画面になりますが、headタグ内の情報を学習していきます。

 

1.headタグ

 

<meta charaset=”utf-8″>

metaタグはmeta要素とも言って、Webページの情報を検索エンジンやブラウザなどに伝えるタグのこと。イメージとしてmetaタグは検索する人の道標のようなものです。

charaset=”utf-8”

cahraset(キャラセット)は文字コードを指定

utf-8は文字コードで現在世界共通語となっており、一般的に使われる文字コードです。

このmetaタグの意味としては「この情報の文字コードはutf-8です」と検索エンジンに伝えていることになります。

 

 

<title>プログラミング学習中</title>

titleタグは字を見て分るとおりWebページのタイトル設定に使うタグです。ブラウザのウインドウに表示されます。

検索エンジンの検索結果に大きく影響を及ぼす部分であるため、必要不可欠なタグであり、、また閲覧者もこのタイトルを見て閲覧してくるため、興味が持てるタイトルにする必要がある。

 

 

<meta name=”description” content=”41歳公務員です”>

meta descriptionは検索エンジンとユーザーにWebの概要を伝えるためのタグです。

この「41歳公務員です」と書いた文字が、検索結果画面に表示するサイト概要文に表示されます。

SEO対策としては直接的に影響して来ないと言われていますが、サイト概要文に表示される部分でもあり、興味を引く内容であればクリック率が上がります。

直接的に影響は無いにせよ、間接的には影響してくる大変重要なタグです。

 

 

<link rel=”icon” href=”favicon.ico”>

ファビコンとは、ブラウザのアドレスバーなどに表示される小さなアイコンのことです。

がリンク先を指定してブラウザに表示させることができます。

rel=””で現在の文書から見たリンク先の関係

href=””でリンク先の指定

でそのファイルがある場所(URL)を指定します

%d人のブロガーが「いいね」をつけました。