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

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

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

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

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

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

文字コードの記載方法

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

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

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

タイトルの記載

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

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

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

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

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

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

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

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

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

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

基準URLの設定

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

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

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

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

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

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

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

お仕事のご依頼は↓コチラより…、それではまた次回…。