ホームページのタグ講座

こんにちは。
今日はホームページタグのひとつ、metaタグについてです。

Metaタグは

<head>～</head>

の中に記述します。

私のサイトでは<head>～</head>内に、下記のように記述しています。
（一部のみ抜粋。※他にも様々なタグの記述はあります）

****************************************************

<title>ホームページのタグ講座</title>

****************************************************

● meta http-equiv=”Content-Type”

こちらは、このホームページがどんな文字セットを利用しているかということを記述します。私のサイトではUTF-8を使用していると記述してあります。

● meta http-equiv=”Content-Style-Type

こちらは、スタイルシートを使っている場合に記述してあります。

● meta name=”description” content

こちらは、このサイトがどのような内容のサイトなのか、いわゆるサイトの説明にあたる部分です。検索エンジンで検索した場合にもホームページタイトルのリンクの下にこちらの説明文が表示されます。

● meta name=”keywords” content

こちらはこのページに合ったキーワードを記述します。

キーワードは、「,」で区切りせいぜい5j個程度が適当だそうです。

● meta name=”description” content

● meta name=”keywords” content

上記二つは検索エンジン対策としても必要となってきます。検索エンジン対策は外部対策だけでなく内部対策のきちんと行っておくことが大切ですので、自分のサイトのキーワードをうまく埋め込み上位表示されるようにmetaタグを記述しておきましょう。

訪問客を逃さないホームページ

ホームページのタグについていろいろ勉強するサイトですが、タグをきちんと記述できるのはもちろんですがサイトを作る際にはタグを理解してHTMLやスタイルシートのファイルを作ることも大事ですが、実際にインターネットを検索して訪問してくれた方に見ていただき、自分のサイトを利用してもらわなければホームページをせっかく公開しても意味がありません。

あなたもいろいろインターネットサーフィンをしていてたくさんのサイトを見ているかと思いますが、訪れたサイトで自分の知りたい情報を見つけれなかったり、サイト自体がわかりにくかったり、様々な理由で違うサイトへ飛んでいくことはあると思います。
実際に検索して訪れたサイトから離れる理由には、どんなことがありますか？

たとえば、ホームページを訪問した際に、音楽が流れるサイト。
これは嫌われるサイトの代表格だといわれます。

また、見た目に目がチカチカするサイトもよくありますね。
背景の色と文字の色のバランスが悪くて文字が読みにくいサイト、文字が極端に小さいサイトも。視覚的に問題のあるサイトは訪問客を逃してしまいます。

どこに何の情報があるのかわかりづらいサイト、コンテンツが絞りきれず何のサイトなのかわからないサイト、広告が多いサイト・・・などなど、嫌われるホームページの条件はたくさんあります。

まずは、自分のホームページは何のホームページなのか、どんな人に訪問してもらいたいのか、中身をしっかり作りこまなければ、どんなにきちんとしたタグを並べていてもホームページの本来の目的は果たせないかと思います。

ホームページのタグは正しく

これまでに様々なタグやその使い方について説明していますが、皆さんは正しくホームページのタグを使えているでしょうか？
タグの全てはW3Cという機関が定めたものに準拠しており、ユーザーや各種ブラウザのためにも、正しく使うことが推奨されています。

ですが、タグの種類や使い方にはいろいろとあるため、初心者なら・・・いえ、ホームページ制作に慣れている人でも、一度や二度の間違いはあることでしょう。
ブラウザに表示させたときに、間違いがはっきりと表れているのならすぐに修正できますが、中にはブラウザに表示されない間違いもあります。

そんなとき「おや？」と思いませんか？
タグの使い方を多少間違っていても表示には問題ないのですから、完全に正しい使い方でなくても良いのではないか？・・・と。

それが、ホームページのタグの甘いところだったりします。
タグをプログラムの一種とする考え方もありますが、プログラミング言語に含まれないのは、上記のように多少の間違いも構わず表示されるためです。
ですが、それこそがホームページタグの難しいところでもあり、見落としがちな間違いに気付けないと、さらに重要な障害を見逃してしまいかねないのです。

重要な障害とは、例えばブラウザによっては大きく表示が崩れること。
IEでチェックしていてこちらでは問題無く表示されていても、実はFFで崩れているという場合があります。
また、世の中には「音声読み上げブラウザ」といった障害者向けのブラウザもあるため、自分ばかりが知っているブラウザだけを基準にしてはいけません。

また、タグの間違いはSEOにも影響します。
SEOとは検索エンジンで上位表示させるための対策で、クラスC分散サーバーを利用するといった様々な対策法がありますが、肝心のタグ・・・つまりホームページそのものの出来が良くなくては意味がありません。

絶対URLと相対URLについて

リンク（アンカー）タグにおけるURLの記述方法は、大別して2通りの方法があります（厳密にはタグに限らないのですが）
今回は、それらの紹介と使い分け方の説明です。

【絶対URL、絶対パス】
絶対URL、もしくは絶対パスとは、どんな立場から見ても同じページを示すアドレスです。
道案内で例えるなら、「東京都新宿区～番地ですよ」と住所そのものを指定している方法と言えるでしょう。

例1：<a href="http://www.seelans.net/">
例2：<a href="/page.html">

【相対URL、相対パス】
相対URL、もしくは相対パスとは、現在の位置を基準として行き先のページを表している移動手順です。
道案内で例えるなら、「この先右折して左手2番目の建物ですよ」と説明している方法、といったところでしょうか。
絶対URLとは違い、同じ説明方法でも今現在のページが異なれば目的地も変わるということが分かりますね。

例1：<a href="page.html">
例2：<a href="../top.html">

【使い分け方】
・外部サイトへのリンク
　→絶対URLの例1
・自サイト内での移動で、前ページに表示させているメニューバーなどのリンク
　→絶対URLの例2（ページを増やす際に修正する必要がなくなる）
・自サイト内での移動で、臨時的に本文内に加えているリンクなど
　→相対URLの例1
・下位ページから上位ページへ戻るリンク（ナビゲーションリンク）
　→相対URLの例2

リンク（アンカー）タグの記述

では、リンクタグの記述方法ですが、以下が基本となります。

<a href="ホームページのURLなど">テキストや画像</a>

リンクなど別の箇所に移動するような操作やシステムを、ホームページ作成では「アンカー」と呼ばれます（アンカーの語源は船の「碇」です）
そのため、リンクタグは「アンカータグ」や頭文字をとった「aタグ」とも呼ばれており、「a」から始まるこのタグはリンク以外の機能も有しています。
今回はリンクに限って説明させていただきますが・・・

ホームページ作成業界ではどちらかというと「アンカータグ」との呼び方が一般的なので、以下ではこちらの名称で説明させていただきます。
リンクタグをアンカータグと呼ばれるのに対し、リンクを指定するテキストなどは「アンカーテキスト」と呼びます。
特別な指定をしていなければ、アンカーテキストは色付きの文字となり、下線が表記されます。

リンクを張る場合のアンカータグ内の属性は、まず必要不可欠なのが「href」。
これがなくてはどのホームページへ移動するのか、どのファイルをダウンロードするのか、はたまたメールを送るのか、指定することができません。
他には、以下の属性が使われます。

・target="●●●"
ターゲット属性はリンク先ページを同ブラウザでどのように表示させるかの指定です。
●●●を「_blank」とすることでウィンドウ、もしくはタブを新規に立ち上げ、フレームを使用しているホームページなら「_top」とすることでフレームが解除されます。

・title="●●●"
タイトル属性にはリンク先ページの正しい名称を書き入れます。
アンカーテキストが説明文などの場合は特に必要です。

リンクの種類と記述の違い

タグで作成するリンクの種類を大別した場合、前回説明した内部リンクと外部リンクに分けられる他、その他のリンクにも分けられるものがあります。
リンクというと、その部分をクリックすると別のページに移動するものと考えられていますが、ページを移動するのではなく、何らかのツールが立ちあがるものがあります。

例えば、ダウンロード。
ZIPやLZH形式で圧縮したファイル（フォルダ）リンクが貼られている場合、それをダウンロードするためのウィンドウが表示されます。
ただ、こちらはページ移動ではないとはいえ、そのホームページと同じサーバーに格納されている圧縮フォルダにリンクされているのであれば内部リンクの一種と見なすことができます。
内部リンクとは同サーバー内の別のファイルに繋げていることなので。

内部とも外部とも言えず、別のツールが立ちあがるリンクの代表といえば、やはりメールリンクでしょう。
クリックするとOutlookといった規定のメールブラウザが立ちあがるもののことです。
通常のリンクがタグで対象ホームページのURLを指定しているのに対し、こちらの場合はメールアドレスが指定されています。
メールアドレスということは、指定されているのはメールサーバーということ。
ホームページのサーバーとメールサーバーは往々にして異なるものですから、異なるサーバーへ繋げているという意味では外部リンクの一種と考えられるかもしれません。

内部、外部、そしてその他のリンク。
これらは種類として異なるものであっても、全く同じタグを利用して作られるものです。
何が異なるのかというと、タグの中で指定しているもの。
上記で少々説明したとおり、メールリンクの場合はタグ内ではメールアドレスを指定しますし、内部・外部リンクであれば対象ホームページのURLを指定します。
ただし、外部の場合はURL全てを記述するのに対し、内部ならファイル名のみという違いがあります。

リンクについて

諸事情により、以前より更新頻度が落ちていることをどうかご了承ください。
前回まではxhtmlについて長々とご説明してきましたが、今回からはまたhtmlの基本や新たなホームページのタグについて説明していきたいと思います。
今回はリンクについてですが、まずはタグの紹介の前に、リンクとは何かということを述べておきます。

ホームページに関するリンクというと、よく知られているのはホームページから別のホームページへと繋げることですね。
ホームページ制作者が募集している相互リンクなどがそうです。

しかし、このホームページからホームページへと繋げるリンクは、リンクを二つに大別したうちの一方でしかありません。
別々のホームページ同士を繋げるものを、外部リンクといいます。

外部があるなら内部リンクもあります。
ただ、こういった呼び方はあまりされません。
よく言われている呼び方はサイト内リンク。
その名の通り、ひとつのホームページ内で別々のページ同士を繋げているものです。
トップページのメニューを選んでクリックすると、指定のページへアクセスされる・・・あれだってリンクの一種なのですよ。

外部リンクとサイト内リンクという違いはありますが、この二つは機能としては同じ役割を果たしています。
ホームページ内であろうと別のホームページであろうと、異なるURLのページへ移ることには変わりありません。
そのため、タグも当然同じものです。
ただ、ドメインが違うかどうかでタグの記述方法に違いが出てくるので、次回からはそのためのリンクタグの使い方を説明していきます。

xhtmlタグ総まとめ

htmlとxhtmlのタグの違いは全部で11点あります。
その11点を前回までにひととおり説明しましたので、今回はこれまでの総まとめとしてxhtmlをホームページ作成に利用した場合の全体的な記述例を、以下に紹介したいと思います。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

<title>ホームページタイトル</title>

</head>
<body>

<p>
タグの部分をコピー＆ペーストして<br />
htmlファイルを作ってみると良いでしょう。
</p>

</body>
</html>

htmlとxhtmlのタグの違い・5

ホームページ作成講座の講師を担当しているため、いちだんと更新頻度が低くなっておりますこと、悪しからずご了承いただきたいと思います。
今回のタグ説明は、htmlとxhtmlの書き方の違いの残りです。

◆style、及びscript内ではコメント宣言しない

htmlファイル内にstyleタグなどを使用する場合、それらで囲まれた中身をコメント宣言（<!– –>）することで一時的に適用させる方法がありましたが、xhtmlでは不可能となりました。
理由としてはタグと認識されてしまうため。

ですが、そもそもstyleなどは専用の外部ファイルを作成して読み込ませるのが、ただしいホームページの作り方です。
xhtmlを使うということは、それだけしっかりとしたホームページを作りたいと考えているはずでしょうから、こういった基本のホームページの作り方こそ厳密に心得ておきたいものですね。

◆属性を省略しない

値によっては属性を省略して値のみを記入しておくことがhtmlでは可能ですが、xhtmlではその省略が不可能です。
「checked」など属性名からして無いものは、以下のよう同じ名前を並べて記述します。

　<input type="checkbox" checked>　→　×
　<input type="checkbox" checked=”checked”>　→　●

以上がxhtmlとhtmlの違い。
他はhtmlとほぼ同じなので、特別難しいことはないでしょう。
xhtmlを駆使して綺麗なホームページを作ってみてください。

htmlとxhtmlのタグの違い・4

おはようございます。
再び、ご無沙汰しております。
先月中頃からホームページ作成講座が始まりまして、予定通りタグ講座の方を担当させていただいているところです。
講座開始直後は慣れないこともあり何かと忙しかったのですが、今ではなんとかひと段落ついてタグ講座の進みも順調になり、やっとこうしてホームページタグのブログを更新できるようになりました。
スクールの講師を務めながらも、ホームページタグのブログの更新も怠るつもりはありませんので、ご心配なく。

では、引き続きxhtmlタグについてです。
今回は以前までに説明したxhtmlタグの決まりごとの残りを。

◆「＆」はエンティティ化する

テキストのうち記号のいくつかは、ソース上ではエンティティ化したコードで記述する必要があります。
エンティティ化しなくてもブラウザ上では表示はされるのですが、xhtmlでは厳密さが増し、記号のうち「＆」は必ず「＆amp;」と記述することになっています。
本当のことを言うと、xhtmlではなく単なるxhtmlであっても、せめて「＆」だけはエンティティ化しておく必要があるのですが・・・
とまれ、xhtmlでは「＆」の非エンティティ化は認められていません。

◆name属性をid属性に

htmlでは、aタグやformタグなどでname属性を使用していましたが、xhtmlではそれら全てがid属性に取って変わっています。
互換性を高めるためには、nameとidの両方を記述しておいても良いでしょう。

<a name="値">　→　×
<a id="値">　→　○
<a id="値" name="値">　→　○

次ページへ »

CATEGORIES

LINK

META