HTMLリファレンス

HTMLリファレンス_________

HTMLリファレンス

ホームページ上などで使用されるHTML文はHTMLタグというものを使って表現されます。HTML文にはさまざまなDOCTYPE（バージョン）がありますが、ここでは、覚えておいたほうがよい代表的なHTMLタグとその基本的な使い方を解説します。

基本構成

<html>　HTML文であるという開始タグ

<head>　ヘッダ要素を記入する
<title>　作成ページのタイトル　</title>
</head>　ヘッダ要素の終了

<body>　ボディ要素の始まりを示す

この部分をブラウザが表示します。

</body>　ボディ要素の終了を示す

</html>　HTMLの終了タグ

このようにHTML文は<html>で始まり、</html>で終了します。またHTMLタグは<xxx>、</xxx>の組み合わせで使用し、タグには要素と属性がありますが、中には要素のみのタグもあります。HTMLは半角の英文字で記述してください。大文字、小文字はどちらでも構いませんが、自分なりに統一しておいたほうがよいでしょう。ちなみにHTML4.0では要素名は大文字で、属性名は小文字で書くことを推奨しています。ところが、次世代規格のXHTMLでは要素名や属性名はすべて小文字で書かなければならない、とのことです。

<a（要素） href（属性名）="http://www.xxx"（属性値）>

HTMLテキストの中にコメントを書き込みたいときは<！－－　と　－－>で囲みます。このコードで囲まれた文字はブラウザ画面に表示されません。JavaScriptなどを使用するときにコメントコードで囲んでおくと、JavaScriptに対応していないブラウザはコメントとして対応します。（JavaScriptの使用できるブラウザでは有効になります。）

HTMLタグ

下記に現在もっとも主流をなす（と筆者が思っているだけかも知れませんが）HTML4.01 Transitionalでサポートされている全HTMLタグを表記しておきます。

もちろん全てのタグを覚えおくに越したことはないのですが、上記の中でも普段よく使用されるタグとその属性値について一覧にしました。

タグ	内容	アトリビュート（属性値）の例
<a>	テキストや画像などをリンクするハイパーテキスト・リンクやアンカーを作成する。	<a href="http://www.xxx" target="_blank/_top">
<address>	ページ作成者の情報、作成日等を表す。
<applet>	JavaアプレットをHTMLテキストに張り込む。	<applet code="xxx.class" width="200" height="80">
<area>	リンクスポットの領域を指定する。	<area shape="rect/circle">
<b>	ボールド体（太字）で表示する。
<basefont>	基本フォントサイズの指定をする。	<basefont size="5">
<big>	フォントサイズを大きくする。
<blockquote>	抜粋や引用した文を表示する。（ブロック化）
<body>	本体部分を表す。	<body bgcoler="#ffff00" background="xxx.gif">
<br>	改行を行う。
<caption>	表にタイトルを付ける。
<center>	センタリング（中央揃）を行う。
<cite>	抜粋や引用した文を表示する。
<code>	プログラムのコードなどを表記する。
<div>	テキストの表示位置を示す。	<div align="left/center/right">
<em>	テキスト表示の内容を部分的に強調する。
<font>	表示フォントの大きさや色を変更する。	<font size="10pt" color="#0000FF">
<form>	フォーム領域を作成する。	<form action="mailto:xxx" method="post/get">
<frame>	フレームの内容を表示する。	<frame src="xxx.htm" name="xxx" marginwidth="5" marginhight="8">
<frameset>	表示画面の分割（フレーム構造・レイアウト）を設定する。	<frameset rows="25%,25%,50%" cols="30%,70%">
<h>	見出し文字。	<h3 align="center">
<head>	ＨＴＭＬテキストの「ヘッダ」部を表す。
<html>	ＨＴＭＬの開始と終了を表す。
<hr>	水平線を引く。	<hr widht="80%" size="2" align="left">
<i>	テキスト表示の内容を部分的にイタリック体（斜体）に表示する。
<img>	イメージ（画像）データをテキストに張り込む。	<img src="xx.gif" alt="xxxx" align="left">
<input>	ブラウザからさまざまな方法で入力できるフィールドを作る。	<input type="text/radio/checkbox/reset/submit" value="表示" size="10">
<kbd>	ユーザが入力する文字を表現する。
<li>	リスト項目を表す。	<li type="disc/circle/square">
<map>	クライアント・サイド・イメージマップを作成する。	<map name="xxx">
<ol>	番号付きのリスト表示。
<option>	選択項目。	<option selected value="xxx">
<p>	段落。	<p align="right/left/center">
<param>	パラメータ（引数）を渡す。	<param mane="xxx" value="xx">
<pre>	改行やスペース、タブ等がブラウザ画面にそのまま表示される。
<samp>	プログラムやスクリプト等の出力結果をサンプルとして使用する。
<script>	スクリプト言語を使用する。	<script type="text/javascript">
<select>	プルダウン形式のメニューリストを作成する。	<select name="xxx" size="5">
<small>	フォントサイズを小さくする。
<strong>	<em>タグよりも更に強調文字にする。
<strike>	テキストに取消し線を引く。
<sub>	テキストを下付き文字表示にする。
<sup>	テキストを上付き文字表示にする。
<table>	表を作成する。	<table border="1" width="50%" align="center">
<td>	表の中にセルを作成する。	<td align="center" valign="bottom" width="80%">
<th>	表の中に見出しセルを作成する。
<tr>	表の横列を指定する。	<tr align="left/center/right">
<textarea>	複数行の入力フィールドを作成する。	<textarea name="xxx" rows="10" cols="20">
<title>	タイトル。
<tt>	部分的に等副フォントへ変更する。
<u>	テキストにアンダーライン（下線）を引く。
<ul>	マーク付きのリスト表示。	<ul type="disc/circle/square">
<var>	変数名などのコマンドを表現する。

尚、タグに対するアトリビュート（属性値）の値は引用符（"）で囲むことが推奨されています。

例 <a href="../index.html">

行頭でHTMLのバージョンについて触れましたが、HTMLタグにはMicrosoft社のInternet Explorerのみにしか対応していないものとか、Netscape Navigatorにしか対応していないものとかもありますので注意が必要です。

また、厳密にはWebページ作成時に文章全体の構成はHTMLタグで、そのデザインや配置など、いわゆる「見栄え」はスタイルシートで行う、というのが正しいそうです。スタイルシートについては別頁で。

HTMLでは背景、文字等のカラーを指定するとき16進数もしくはカラーネームを指定することにより表現します。カラーコードについては、カラーコード表。
また、もっとビジュアルにカラーを見たい方は、ビジュアルカラーコード表。

TOPページ(Alt+B)