HTMLタグ一覧 基本要素編

HTML HEAD TITLE META LINK BASE SCRIPT NOSCRIPT STYLE BODY

BASE BODY HEAD HTML LINK META NOSCRIPT SCRIPT STYLE TITLE

はじめに

表の意味

要素名

タグの説明。使い方など。
タグの省略可不可や分類、関係するタグなど。
属性の名前。 属性の意味。
サンプルコードなど。

タグの省略可不可について

<始>
開始タグは省略できません。
(始)
開始タグの省略が可能です。
<終>
終了タグは省略できません。
(終)
終了タグの省略が可能です。
[--]
終了タグを書いてはいけません。

要素の分類について

(B)(I)(???)
この要素がどんな要素かかいてあります。(B)はブロック要素、(I)はインライン要素、(???)は???要素の子要素を意味します。
[B][I]<???>-<???>
この要素の中に入れられる要素が書いてあります。[B]はブロック要素、[I]はインライン要素、<???>は???要素を意味します。また、-<???>のように、前にマイナスのついているものはこの要素の中に入れることができません。

基本要素

HTML

　この文章がＨＴＭＬで書かれていることを表している（のか？）。
が、無くてもエラーにならない。
　しかも、あるからと言ってどうというわけでもない、全く謎なタグ。
ブラウザによっては意味があるかも知れないが、ＩＥ、ＮＣ共に無意味。
このタグからはみ出して書いたとしても、ちゃんと認識されますし。
　ＨＴＭＬ分文全体をこれでくくってしまえばいい。
(始) (終) (Root) <HEAD><BODY> HEAD BODY
lang 言語を指定する。書いてもあんまり意味なさそう。
日本語のページならlang="ja"とすればいい。

HEAD

　ヘッダです。頭です。誰がなんと言おうと頭です。英語辞書にも載ってます。
　このタグの中にはこのページについてのいろいろなことを書きます。
ページタイトルやらロボット系サーチエンジンへの自己主張やらをしまい込んでおくのにつかいます。あと、JavaScriptやVBScriptのプログラムを置いたりもします。
あとタイトルとか。タイトルは必須らしいです。
(始) (終) (HTML) <TITLE><META><LINK><BASE><SCRIPT><STYLE>etc. TITLE META LINK BASE SCRIPT STYLE

TITLE

　タイトルです。ヘッダ（<head>〜</head>）の中に書きます。 このタグで囲った文字が、そのページのタイトルになり、ブラウザの一番上に表示されたり、「戻る」ときの目印になったりします。
　長さに限界は無い（と思う）けど、他のタグ（aやfontやimg）が効きません。
<始> <終> (HEAD) [テキスト] HEAD

META

　ヘッダの中に書く、補足タグです。
　自己顕示欲の強いページビルダが自分の名前やバージョンを書き込んでみたり、自己顕示欲の強いページの管理人がサーチエンジンへの自己主張をしたりするのに使う、便利、かつ汎用性にとんだ基本的には無意味なタグです。
　登録式サーチエンジンにはここに更新情報をのせればそれを検索対象にしてくれるちなみちゃんみたいなのもあります。
　また、ロボット系のサーチエンジンがＨＰに何が書いてあるかとか、何語で書かれているかなどの情報を得るもとにもなるみたい。
　まぁ、好き勝手書いていいってわけでしょうねぇ、たぶん。
　オートリロード機能やらをページに持たせることも可能。
<始> [--] (HEAD) HEAD
name 名前。なにが名前だかは良く分からないが、「私はnameです。私の持っている情報はcontentですよ〜」って感じのnameを指定します。
Author（著者）、Keywords（キーワード）、Expires（キャッシュの有効期限）、その他その他。Lastmodified（最終更新）なんかもあったかなぁ・・・
content 上のやつのcontent、つまり、nameさんの持っている情報を書きます。
Authorなら「世界で最強のオトコ」とか「どこかのだれか」とか。 Keywordsなら「今日の朝ごはん」とか「リンクリスト」とか。 Expiresなら「Sun, 19 Nov 2001 00:00:00 GMT」とか。
http-equiv HTTPのヘッダ情報の付加情報。もはや意味不明。
とりあえず、良く使うやつだけ例を書いておきます。 <meta http-equiv="Refresh" content="180"> ３分（１８０秒）ごとにこのページをリロードしますよ、という指示。 <meta http-equiv="Refresh" content="180;URL=http://www.sp.cup.com/"> ３分たったらＵＲＬで指定したページに勝手にジャンプしますよ、という指示。
　上の例ではサーファーズパラダイスに。ページが移転したときなどによく見掛けるアレです。

LINK

　他の文章との関係を書くのに使ったりするらしいです。が、僕はスタイルシートのファイル以外が入ってるのを見たことありません。
ヘッダ（<head>〜</head>)の中に書きます。
<始> [--] (HEAD) HEAD
rel 目標のものとどんな関係かを書く。
type 目標のもののMIMEタイプを書く
href 目標のもののＵＲＬを書く
title 目標のもののタイトルを書く
スタイルシートを埋め込む時は次のようにする。 <LINK REL=STYLESHEET TYPE="text/css" HREF="jkn.css"> <LINK REL=STYLESHEET TYPE="text/css" HREF="jkntags.css" title="魔導実験室タグ一覧"> <LINK REL=STYLESHEET TYPE="text/css" HREF="jkntags2.css" title="魔導実験室タグ一覧(2)"> 本来なら上みたいに書くとjkn.cssが常時適用され、jkntags.cssかjkntags2.cssをユーザーが選んで適用するはずなのですが、ＩＥでは全部適用されます。ＮＮ６ではちゃんと動きます。

BASE

　ベース、すなわち「基準」をあらわすタグ。ヘッダ（<head>〜</head>)の中に書きます。
<始> [--] (HEAD) HEAD
href 相対パスで指定されているすべてのアドレスに効果。対象アドレスの基準ディレクトリを変更する。
target すべてのリンクアンカーに効果。対象アンカーのターゲット属性の規定値を変更する。

SCRIPT

スクリプト言語（JavaScriptとか）を記述します。
そのなんちゃら言語を記述して何が楽しいかというと、普通ＨＴＭＬでは記述できない、動的な処理（時間によってあいさつ文を変えるとか）ができるようになります。
でもスクリプト言語自体の解説をしているととてもじゃないけどこのスペースでは足りないのでここではやりません。
<始> <終> (HEAD)(BODY)(I) [SCRIPT] HEAD BODY NOSCRIPT
language スクリプトが何語で書かれているかを指定します。何語といっても英語とか日本語とかではなく、JavaScriptとかVBScriptです。
src スクリプト言語を外部参照する時に使います。src="mm.js"とするとmm.jsを読み込んで実行するわけですね。
この時、<SCRIPT src="mm.js"></SCRIPT>のように、タグを閉じるのを忘れないようにしましょう。
表示する時に現在時刻を表示するには、 

<SCRIPT langage="JavaScript">
<!--
  c=new Date();
  document.write(c.getHours()+"時"+c.getMinutes()+"分"+c.getSeconds()+"秒");
-->
</SCRIPT>
を表示させたい位置に書き込みます。

NOSCRIPT

SCRIPTに対応していないブラウザのための代替表記を示します。
<始> <終> (B) [B][I] SCRIPT

STYLE

　ヘッダの中に書いて、スタイルシートを記述します。
スタイルシートは普通<LINK>で関連付けるんですけど、そのＨＴＭＬでしか絶対使用しないようなスタイルならばこのタグで記述します。
<始> <終> (HEAD) [StyleSeet] HEAD LINK BODY
type スタイルシートの種類。必須です。
type="text/css"って書くとCSSのスタイルシートということになります。 

<STYLE tyle="text/css">
<!--
BODY{
    background-color: #FFFFFF ;
    color : #000000 ;
}

A {
    font-weight: bold ;
    text-decoration: none ;
}
A:link {
    color : #255AFF;
}
A:visited {
    color : #FF51DA;
}
A:active {
    color : #FF0000;
}
A:hover {
    color: #FF0000 ;
    text-decoration: underline ;
} 
-->
<STYLE>
上の例は背景色その他もろもろを変更し、なおかつリンクの下線を消した上太字にし、リンクにマウスを重ねると色を変えて下線を表示するという例です。
実験室で使っているまんまです。

BODY

　ボディー、つまり体、本体のことです。
このタグで本文を囲め、と言うことなのでしょうが、はみ出して書いても特に何も言われません。
(始) (終) (HTML) [B][SCRIPT] HTML STYLE
bgcolor 背景の色を指定します。
text 文字の色を指定します。
link 未訪問のリンクの色を指定します。
vlink 訪問済みのリンクの色を指定します。
alink クリックしているリンクの色を指定します。
background 背景画像を指定します。
bgproperties よく分からないんですが、ＩＥではここにFIXEDを指定すると、画面をスクロールしても背景画像が動かなくなります。
色の指定方法はいつもと同じです。たとえば <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#ff00ff"> とすると、背景白、文字黒、未訪問青、訪問済み赤、クリックすると紫、てなもんです。
これらを指定しないと、ブラウザ側の設定がそのまま使用されます。部分的に書いても部分的に使用されますから、たとえば文字色黒とだけ指定したとき、ブラウザのデフォルト背景色が黒だと何も見えなくなるので、一個でも指定するときは全部指定してあげてください。
また、何かの拍子に背景画像を読み込めないことがあるかもしれませんから、背景色は背景画像の色調と合わせるのがいいでしょう。

戻る
魔導実験室。