HTMLタグ覚書


このページは HTML タグに関する個人的なメモ置き場です。
HTML の基礎を身につけた人に理解できるように書くつもりです。
動作の保証はできませんので、参考程度に見てください。

基本的に HTML は大文字小文字を区別しません。
自分はタグ直打ちなので見易さの観点から区別してますが、
文法上はどちらで書いても大丈夫な場合がほとんどです。

HTML の文法をチェックできるサイトがあります。
一度はチェックしておくと良いと思います.

Another HTML-lint gateway


!DOCTYPE
HTML
HEAD
TITEL
META
LINK

<!DOCTYPE>

HTML のドキュメントタイプの宣言。 正確に言うとタグではない。
ファイルの先頭に書く。
バージョンによって使えるタグが違うので正確に書くこと。

<!DOCTYPE HTML PUBLIC "バージョン">



<HTML>

これを書いていないと HTML じゃない。
無くても .html で保存すれば問題ないのだが、きちんと書いておくべき。
オプションとして言語を指定できる。 例えば日本語にするならこんな感じ。

<HTML lang="ja">

jp じゃなくて、ja である事に注意。


<HEAD>

このタグで囲んだ部分がヘッダー情報になる。
ファイルの情報をいろいろ記述する部分で
サーチエンジンも見るので結構重要。
<HTML> と <BODY> の間に置く.


<TITLE>

ページのタイトル。
普通はブラウザの一番上に出る。
検索結果のタイトルはここが表示される。


<META>

様々な情報を設定、記述する事ができるタグ。
ヘッダーに記述する。 閉じタグは必要ない。
基本的な書き方は以下。

<META http-equiv="オプション名" content="値">
<META name="オプション名" content="値">


  • Auther
    ページの作成者を記述する。

    <META name="Auther" content="michi">

  • Cache-Control
    ページをキャッシュさせない。
    Pragma は http 1.0、Cache-Control は http 1.1 で適用される。
    ブラウザによって対応状況は異なるらしい。

    <META http-equiv="Cache-Control" content="no-cache">

  • Content-Script-Type
    スクリプト言語の指定。
    何も指定しなくても JavaSctipt は動くが正しく記述するなら必要。

    <META http-equiv="Content-Script-Type" content="text/javascript">

  • Content-Style-Type
    スタイルシート言語の設定。 デフォルトは CSS。
    正しく記述するなら必要。

    <META http-equiv="Content-Style-Type" content="text/css">

  • Content-Type
    文字コードの指定。
    ブラウザがここを見て文字コードを自動的に設定する。
    文字化けを起こす確率を大幅に減らせる。
    特にフレームを使うと文字化けしやすいので設定しておく事を推奨。

    <META http-equiv="Content-Type" content="text/html;charset=Shift_JIS">

    euc-jp が EUC、iso-2022-jp が JIS、Shift_JIS が Shift_JIS に対応している。
    古いブラウザだとこの設定で逆に文字化けを起こす事もある。

  • Copyright
    そのページの著作権を示す。
    (陽に示さなくても著作権は存在している)

    <META name="Copyright" content="&copy; 2000-2003 michi">

  • Description
    ページの説明。
    サーチエンジンが見に来る。

    <META name="Description" content="HTMLの個人的メモ置き場">

  • Expires
    ページの有効期限。
    content には日付を入れる。
    値に 0 を入れると、キャッシュを取らせなくできる。
    (更新頻度が高いページで特に有効)
    ブラウザによってサポート状況は異なる。

    <META http-equiv="Expires" content="Tue、1 Dec 2002 09:00:00 GMT">

    この場合、グリニッジ標準時で2002年1月1日午前9時 に
    ページのキャッシュが消える。

  • Generator
    ページを作成するのに使用したソフトを記述する。
    ホームページ作成ソフトで作ると勝手に記述されている事がある。

    <META name="Generator" content="Tera Pad">

  • Keyword
    ページのキーワード。 サーチエンジンが見に来る。
    アクセスを伸ばしたいならここにいっぱいキーワードを記述する。
    サーチエンジンによって http-equiv を見るタイプと
    name を見るタイプがあるようだ。

    <META http-equiv="Keyword" content="HTML,タグ,メモ">
    <META name="Keyword" content="HTML,タグ,メモ">

  • Pragma
    ページをキャッシュさせない。
    「キャッシュって何?」 って方はこちらを参照して下さい。
    小ネタ集

    <META http-equiv="Pragma" content="no-cache">

  • Refresh
    オートジャンプ。
    指定した秒数後に自動的にページを移動する。
    "引っ越しました。 5秒たつと自動的に移動します。" とか
    書かれているページでよく使われる。
    サポートしていないブラウザもあるのでテキストリンクも
    はっておいた方がよい。

    <META http-equiv="Refresh" content="5;url=http://www.google.com/">

    移動先のURLを省略すればオートリロードになる。
    一定時間毎に自動更新されるページに使われる。

    <META http-equiv="Refresh" content="10">

  • Robots
    ロボット型サーチエンジン対策。
    ロボット型のサーチエンジンは定期的にいろいろなサーバにアクセスして
    ヘッダー情報などを抜き出してデータベースに加えている。
    従って、本人が気付かないうちにサーチエンジンに登録されている事がある。
    このオプションでサーチエンジンに登録させないようにする事ができる。

    <META name="Robots" content="noindex,nofollow">

    content にはnoindex、nofollow のどれかを入れる。
    noindex はそのページを載せることを拒否。
    nofollow はそのページからリンクをたどることを拒否。
    両方入れるならカンマで区切る。
    ちなみに index とか all という値を入れると
    データベースに載せる事を許可する事になるらしい。
    (無ければ勝手に持っていくのでわざわざ入れる必要は無い)

    サーチエンジンはサーチしたページのキャッシュを保存しているが
    それを保存させないようにする事もできる。

    <META name="Robots" content="noarchive">

    なお、これらを記述しても情報が更新されるのは
    ロボットが再びサーバを見に来てからなので、
    この設定が反映されるのは結構時間がかかる
    中にはここの記述を無視するサーチエンジンもある。

    個々のページではなく、サイト全体を登録させたくないのなら
    robots.txt を置く方法がある。
    この辺りに関する詳しい内容が Google にあったのでリンクをはっておく。

    META タグではイメージ検索を弾く事はできない。
    ( Google なら robots.txt を置く事で対処できる )
    どうしてもイメージ検索を拒否したいのなら .htaccess を置いて
    イメージ検索経由のアクセスを弾く方法がある。
    具体的な方法はサーバごとに違うのでここでは省略する。

  • Transition
    トランジション効果の使用。
    I.E.4 以上で有効。

    <META http-equiv="Page-Enter" content="RevealTrans(duration=2,transition=23)">

    http-equiv にトランジション効果を起こすタイミングを記述する。
    使える値は Page-Enter、Page-Exit、Site-Enter、Site-Exit のいずれか。
    content に切り替えにかける時間と種類を記述する。
    duration で時間(単位は秒)、transition で種類を設定する。
    種類は0 〜 22の23通り。 23はランダム。

    0 = Box in
    1 = Box out
    2 = Circle in
    3 = Circle out
    4 = Wipe up
    5 = Wipe down
    6 = Wipe right
    7 = Wipe left
    8 = Vertical blinds
    9 = Horizontal blinds
    10 = Checkerboard across
    11 = Checkerboard down
    12 = Random dissolve
    13 = Spilt vertical in
    14 = Spilt vertical out
    15 = Spilt horizontal
    16 = Spilt horizontal out
    17 = Strips left down
    18 = Strips left up
    19 = Strips right down
    20 = Strips right up
    21 = Random bars horizontal
    22 = Random bars vertical
    23 = Random

    BlendTrans というパターンもある。 この場合は duration のみ設定可能

    <META http-equiv="Page-Exit" content="BlendTrans(duration=2)">

    なお、ブラウザ側でトランジション効果を有効にするかどうか設定できる。
    ツール → インターネットオプション の詳細設定のタブに
    "ページの切り替えを行う" という項目があり、チェックを外すと無効にできる。
    (I.E. のバージョンによって項目名が違うらしい)


<LINK>

ページ同士の相対関係を表すタグだが
主な使い道は StyleSheet やフォント定義ファイルの読み込み。
ヘッダーに記述する。 閉じタグは必要ない。
サーチエンジンも参照する。

  • rel
    参照先の文書との相対関係。
    href が参照先の文書で rel に関係を示す。

    <LINK rel="Index" href="../index.html">

    <LINK rel="fontdef" href="font.ptr">

    <LINK rel="Shortcut Icon" href="favicon.ico">

    <LINK rel="stylesheet" href="sytle.css">

    Appendix付録ページ
    Bookmarkブックマーク
    Chapter
    Contents目次
    Copywrite著作権情報
    fontdefフォント定義ファイル
    Glossary用語集
    Helpヘルプ
    Index索引
    Made作成者情報 (メールアドレスなど)
    Next次の文書
    Prev前の文書
    Parent上位の文書
    Section
    Shortcut Iconアイコン (お気に入りなどに表示される)
    Start開始ページ
    stylesheetスタイルシート
    Subsection小節

  • rev
    参照先の文書から見た相対関係.(rel の逆)

    <LINK rev="made" href="mailto:michi@ep.sci.hokudai.ac.jp">

    <LINK rev="Chapter" href="../index.html">

  • 使用例
    こんな風にタグを埋め込んでおけばナビゲーションボタンを
    表示してくれるブラウザがあるかも。

    <LINK rel="Parent" href="../top.html">
    <LINK rel="Index" href="index.html">
    <LINK rel="Start" href="text-01.html">
    <LINK rel="Prev" href="text-02.html">
    <LINK rel="Next" href="text-04.html">


リファレンス

World Wide Web Consortium (W3C)

HTML 4.0 Specification(jp)

とほほのHTMLリファレンス

HTMLクイックリファレンス

Another HTML-lint gateway

Counter
since 2001/12/27