For reference when creating a website
MK-BLOG
ホーム > MK-BLOG：ホームページ制作の参考に > Web制作技術（HTML/CSS/JS） > HTML headに記載する内容

HTML headに記載する内容：html step4

head要素

HTML headに記載する内容：html step4

前回は、HTMLの基本内容につきまして、コメントの記載方法などサンプルと共に記載いたしました。

また、HTMLの勉強をこれからおこなう方であれば、HTML5だけで十分だと思いますが、以前のHTMLなどが、どのように記載するのか理解をしておけば、ソースコードを参考にする際、HTMLのヴァージョンにより、マークアップが多少異なりますので、そのあたりを注意すれば、色々なソースコードを参考にしても問題ないように思います。

という事で、それでは今回はッ、

Menu

上記について記載していこうと思います...。

文字コードの記載方法

HTML文書がどの文字コードを使用して書かれているかを示すには、meta要素のcharset属性を使用します。

文字コード名は、大文字で書いても小文字で書いても特に問題ございません。
作成したHTML文書の実際の文字コードとcharset属性でしていしている文字コードが違っていると、文字化けする原因となりますので注意が必要です。

それでは文字コードと、記載方法のサンプルをご紹介。

文字コード意味
UTF-8UTF-8
Shift_JISシフトJIS
iso-2022-jpJIS
EUC-JP日本語EUC
Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字コードの記載方法</title>
</head>
<body>
</body>
</html>

タイトルの記載

HTML文書にタイトルを付けるには、title要素を使用します。この要素で指定したタイトルは、パソコンのブラウザではウィンドウのタイトルバーやタブとして表示されるほか、「お気に入り」や「ブックマーク」として登録した場合のタイトルとしても表示されます。

また、タイトルはGoogleやYahooなどで検索をおこなった際の検索結果の一覧画面でも使用されます。その際、たとえば「○○特集」のようなタイトルだけでは、どこの会社の特集なのか分かりませんので、「○○特集｜MKデザイン」のように、それだけを見て具体的に分かるようなタイトルが望ましいように思います。

なお、title属性は特別な例外をのぞき、1つのページに必ず1つ指定することになっています。

Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML特集：MKデザイン</title>
</head>

<body>

</body>
</html>

ページ概要・キーワードの指定方法

コンテンツとしてページ上には表示されない「ページの概要（紹介文）」や「キーワード」などの情報をHTMLの中に組み込んでおくには、meta要素を使用します。

キーワードは、半角カンマ（,）で区切って、複数指定することが出来ます。これらの情報は主に検索エンジンに使用されることを意図したものですが、実際にどう利用されるのかは検索エンジンによって異なります。

Sample<!DOCTYPE html><html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML特集：MKデザイン</title>
<meta name="description" content="MKデザインは、ホームページの作成およびショッピングサイトの運営代行などをおこなっております。">
<meta name="keywords" content="ホームページ作成,運営代行,ワードプレス,オリジナルデザイン">
</head>
<body>
</body>
</html>

関連する他のファイルの記載

link要素を使用すると、この文書と関連している別の文書やファイルの所在を示すことが出来ます。

たとえば、前のページや次のページ、目次のページ、外国語ヴァージョン、サイトのアイコン、スタイルシートを記述したファイルなどのURLを示すために使用されます。

rel属性に指定できる値については、下の「関連ファイルの種類を示すキーワード」に記載してございます。 size属性はアイコンのサイズを指定するための専用属性で、「32x32」や「512x512」のように「幅×高さ」の書式でピクセル指定します。

▼関連ファイルの種類を示すキーワード

キーワード関連ファイルの種類
previous関連する文書の「前の文書」
next関連する文書の「後ろの文書」
alternate現在の文書の代わりとなる文書
author現在の文書や記事の執筆者の情報
license著作権ライセンスに関する情報
help状況に応じたヘルプ
search現在とその関連ページを検索可能なリソース
iconアイコンとして使用する画像ファイル
stylesheet読み込み適用するスタイルシート
Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML特集：MKデザイン</title>
<link rel="previous" href="index1.html">
<link rel="next" href="index3.html">
<link rel="icon" href="favicon.png" sizes="16x16" type="images/png">
<link rel="stylesheet" href="style.css">
</head>
<body></body>
</html>

基準URLの設定

base要素は、そのページで使用されている相対URLの基準位置を設定する要素になります。

この指定をおこなうと、以降そのページで指定する相対URLは、すべてここで指定した絶対URLを基準としたものとして認識されます。この指定をおこなわなかった場合には、現在のページの位置が基準となります。

target属性を指定すると、リンク先のページを開くデフォルトのウィンドウやタブを指定することが出来ます。target属性には指定可能な値が4種類あります。下記を参考にしてください。

なお、base要素は「属性値に相対URLを持つ他の要素」よりも先に配置しなければならない点に注意が必要です。

target属性の特別な4つの値

リンク先を表示するフレームやウィンドウをtarget属性で指定する場合、あらかじめ決められている4種類の名前があります。それぞれの名前と機能は、下記のようになります。

値概要
_blank新しいウィンドウやタブに表示
_self現在のウィンドウに表示
_parent親となる表示先に表示
_top最上位となっている表示先に表示
Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML特集：MKデザイン</title>
<base href="https://mk-design.xyz/index.html">
<link rel="previous" href="index1.html">
<link rel="next" href="index3.html">
</head>
<body></body>
</html>

という事で今回は、htmlのhead内に記載するmeta、link要素などにつきまして記載いたしました。

実は、この他にもまだまだ記載できる要素がございますが、今回はシンプルに基本的に記載したほうが良い要素をご紹介いたしました。また、別の機会にもう少し詳しい内容を記載していこうと思いますが、現段階ではここまで。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。

ARCHIVES

CATEGORY