Web Survive

Webで生きる道を模索するブログ

基本情報を設計する要素

ページタイトル(title要素)

ページタイトルはtitle要素で指定します。
head要素のなかで必ず一度だけ指定します。
指定しなかったり、複数指定することは認められません。
ブラウザのタイトルバーに表示されるほか、
音声ブラウザで最初に読み上げられたり、
検索サービスで検索結果ページに表示されますので、
具体的でわかりやすい内容にしましょう。
通常、トップページではサイト名おともに「-」でつなぎ、
キャッチコピーなどを含めておきます。
カテゴリトップでは「カテゴリ名とサイト名」を、
個別ページでは「ページ名、カテゴリ名、サイト名」を含めて
「|」(パイプ)でつないでおくのが一般的です

title要素の書き方

トップページ

カテゴリページ

個別ページ

メタ情報(meta要素)

そのページに関するメタ情報はmeta要素で指定します。
メタ情報とは、そのページ全体に関わる基本データです、
http-equiv属性またはname属性を指定し、content属性で具体的な値を指定します。

多くの要素では開始タグと終了タグで内容を囲みますが、
meta要素のように内容をもたない要素(空要素)は、
簡略終了タグを用いて「meta /」と記述します。

空要素(からようそ)の記述

「<meta」が開始タグで「/>」が終了タグに相当しています。

http-equiv属性では、

そのページの種類(text/html)、
スタイルシートの種類(text/css)、
スクリプトの種類(text/javascript)、

などを指定しておくのが一般的です。
これらは通常、title要素よりも先に指定しておきます。

meta要素(http-equiv属性を指定する場合)の書き方

一方、name属性を指定した場合、
ページの概要分(description)やキーワード(keywords)、
制作者(author)、著作権保有者(copyright)など、
制作者側が指定したいデータをメタ情報として定義することになります。
これらは通常、title要素よりもあとに指定しておきます。

meta要素(name属性を指定する場合)の書き方

なお、http-equiv属性で指定するページの種類(text/html)では、
文字コードを一緒に指定しておくのが一般的です。
日本語ページの場合は
「UTF-8」「Shift_JIS」「EUC-JP」などの文字コードが利用されます。

どの文字コードを選ぶかは、
ページを動的に生成するプログラムの仕様などにより異なります。
そのページ単体で考えれば、どの文字コードを選んでもほぼ問題はなく、
通常は「UTF-8」か「Shift_JIS」を指定しておけばよいのですが、
このようにプログラムどの兼ね合いで決める場合もあります
(サイト内のすべてのページではなく、一部のページだけ異なる文字コードを指定する方法もよく利用されます)。

文章間関係(link要素)

そのページから見て、
ほかのページやファイルがどのような役割かを定義するのがLink要素です。
空要素であるため、簡略終了タグを用いて「<link>>」と記述します。
たとえばスタイルシートファイルやRSSファイル、目次やヘルブにあたるページ、
日本語以外の言語で制作したページ(たとえば英語ページ)などを指定します、

rel属性で関係、href属性でURL、type属性でMINEタイプ、
media属性でメディアタイプを指定します。

link要素の書き方

スタイルシートファイルの指定

RSSファイルの指定

トップページやヘルプページの指定

日本語以外の言語で制作したページの指定

MINEタイプ

MINEタイプハ「text/html」といった
クライアントとサーバー間のやりとりのフォーマットを、
メディアタイプはCSSなどの適用メディアを指します。

スタイルシート(style要素)

CSSのソースコードを指定するための要素です。
ただし、ソースコードを直接HTMLに記述してしまうと
構造に無関係な情報がHTMLに含まれてることになってしまうので。
link要素を利用して外部ファイルを読み込むほうが望ましいといえます。

style要素の書き方

style要素について

CSSはstyle要素やstyle属性でも適用できますが、
構造と見た目の分離が徹底できない、CSSを外部ファイルで一括管理できない、
といったデメリットがあります。
style要素やstyle属性は利用せず、
CSSは外部ファイルにまとめておくのが原則
と覚えておくいいでしょう。

スクリプト(script要素)

JavaScriptなどのソースコードや外部ファイルを指定するための要素です。
style要素と同様、ソースコードを直接HTMLに記述するのは望ましくないので、
外部ファイルを読み込む方法を取るのが一般的です。
外部ファイルはsrc属性でURLを指定することで読み込むことができます。

script要素の書き方

直接ソースコードを書く場合

外部ファイルを読み込む場合

script要素はbody要素内でも指定できます。
スクリプトの内容によって、
head要素内に記述するかbody要素内に記述するか異なります。
基本的には、裏側の処理に関するスクリプトはhead要素内で、
その部分に表示させたり埋め込むタイプのスクリプトはbody要素内で指定します。