HTMLリファレンス


HTML(Hyper Text Markup Language)は、主にWebサイト(ホームページ)の作成で使用されるマークアップ言語(データ記述言語)です。

タグと呼ばれる括弧 < と > 内に記述された文(目印)と表示させる文書を記述することで、Internet ExplorerやFirefoxなどのWebブラウザが認識して表示してくれます。

HTMLの記述は大文字・小文字の区別がないのも特徴の一つです。

CSSJavaScriptを併用することでより柔軟なWebページの作成も可能になります。

基礎知識

記述の仕方

最初の行に<!DOCTYPE html>を記述し、あとは全て<html>から</html>のタグ内に記述していきます。

<html>のタグ内でさらに<head> ~ </head>タグと<body> ~ </body>タグの2つに分かれており、 <head>タグ内にページのタイトルなど、ページ全体の情報に関する内容を記述し、<body>タグ内にWebページとして表示させる内容を記述します。

<!DOCTYPE html>/*HTML5で作成してあることを宣言*/
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
ここに表示させる内容を記述
</body>
</html>
実際に使用するなら最低限以下のように記述した方がいい。

<!DOCTYPE html>/*HTML5で作成してあることを宣言*/
<html lang="ja">/*要素内で使用されている言語*/
<head>
<meta charset="UTF-8">/*文字エンコーディングの指定*/
<meta name="viewport" content="width=device-width">/*表示領域を設定*/
<title>ページのタイトル</title>
</head>
<body>
ここに表示させる内容を記述
</body>
</html>
あとはファイルの拡張子をhtmlやhtmにして保存すればWebブラウザで閲覧できます。

※HTML5ではいくつか省略可能なタグがあり、条件次第では終了タグを含む<html><head><body>なども省略できます。
※文字エンコーディングの指定をしてもサーバー側で別の文字コードを指定している場合はサーバー側の文字コードで表示されます。

コメントアウト

コメントは以下のように<!--と-->の間に記述すれば複数行でも問題ない。
<!-- ここにコメント -->

文字の色を変える

<font>タグで変更できていたが、HTML5で廃止されたのでCSSで文字の色を変えるようにする。

罫線を引く <hr>

あいうえお<hr>かきくけこ

あいうえお
かきくけこ

前後に余白をつくる <p>~</p>

あいうえお<p>かきくけこ</p>さしすせそ

(表示)
あいうえお

かきくけこ

さしすせそ

前後に余白をつくらない <div>~</div>

あいうえお<div>かきくけこ</div>さしすせそ

(表示)
あいうえお
かきくけこ
さしすせそ

※あいうえお<br>かきくけこ<br>さしすせそと同じ表示ですが
 <div>では色を変えたり表示位置を変えたりする拡張要素があります。

センタリング(中央)表示にする <center>~</center>

あいうえお<center>かきくけこ</center>さしすせそ
または<div>や<p>を使って
あいうえお<div align="center">かきくけこ</div>さしすせそ
あいうえお<p align="center">かきくけこ</p>さしすせそ

(表示)<center>・<div>の場合
あいうえお
かきくけこ
さしすせそ

(表示)<p>の場合
あいうえお

かきくけこ

さしすせそ

※<div>や<p>では右揃えや上揃え、中央揃えなどの配置もできる
左揃え <div align="left">~</div>
右揃え <div align="right">~</div>
上揃え <div valign="top">~</div>
中央揃え <div valign="middle">~</div>
下揃え <div valign="bottom">~</div>

※この記述はHTML4.01では非推奨のためCSSでの記述を推奨。

余分なタグを使わずにテキストをそのまま表示する

文章を記述していて改行するには通常改行タグの<BR>を使うが文法説明などで改行が多くなりそうな場合 <pre>タグを使用することで改行タグがなくてもテキストをそのまま表示(スペースもそのまま反映)できる。 また<pre>タグは<p>タグと同様に前後に余白が入る。
通常の記述
あいうえお<BR>
かきくけこ<BR>
さしすせそ

<pre>タグを使用した場合
<pre>
あいうえお
かきくけこ
さしすせそ
</pre>
あいうえお
かきくけこ
さしすせそ

表示幅に合わせて改行

CSSの表示幅に合わせて改行を参照

画像の横から文字を書き込む

<IMG src="画像のURL" align="right">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

(表示)
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

※画像の横への書き込みをやめる場合<br clear="right">で解除されます。
<IMG src="画像のURL" align="right">
あいうえおかきくけこさしすせそたちつてと<br clear="right">なにぬねのはひふへほまみむめもやゆよらりるれろわをん

(表示)
あいうえおかきくけこさしすせそたちつてと
なにぬねのはひふへほまみむめもやゆよらりるれろわをん

※rightの部分をleftにすれば画像は左にきます。

特殊文字(特殊記号)の表示

> や < などはそのまま記述するとブラウザにタグと間違えられて表示できません。Webページに表示させるには記号表示用のコードで記述します。

特殊文字の名称と記述を参照。

リンクをつくる

<a href="リンク先のURL">リンク</a>

(表示)
リンク

※リンク先のURLは絶対パス、または相対パスを記入します。

リンク先を新しいウィンドウで開く

<A href="リンク先のURL" target="_blank">リンク</A>

(表示)
リンク

リンクを画像でつくる

<A href="リンク先のURL"><img src="画像のURL" alt="画像のコメント"></A>

(表示)
画像のコメント

※画像のまわりの枠を表示させないようにするには<img>タグ内に border="0"を加える。

リンクをボタンでつくる

<form method="LINK" action="リンク先のURL">
<input type="submit" value="ボタン1">
</form>

※formタグで記述した場合、pタグと同じように自動で改行され前後に余白ができます。
※JavaScriptでも作成可能。リンクをボタンでつくる参照

リンクを無効にする

<a href="#">リンク名</a>
ページ内リンクで擬似的に無効のようにしますが、同一ページの最上部に移動します。それを回避するには以下のようになります。

<a href="#" onclick="return false;" >リンク名</a>
これはリンクをキャンセルしています。

<a href="javascript:void(0)" >リンク名</a>
javascriptが無効なブラウザの場合おかしな挙動をすることがあります。

HTML5ではJavaScriptなどによって動的にリンク先を設定するケースを考慮し、a要素にhref属性が必須とされていないので、以下でも可。
<a>リンク名</a>
href属性が指定されていないa要素は、プレースホルダ(場所取り)を表します。リンクは機能させたくないが、その内容だけは表示しておきたいメニューなどの場合に有効です。リンクの機能がないのでマウスカーソルも変わります。他のリンクと見た目を合わせるなら以下になります。

<a style="cursor: pointer">リンク名</a>

転送(リダイレクト)

サーバーの移転やサイトの修正に伴ってURLの変更をした場合などに使用します。 リダイレクトには301リダイレクトと302リダイレクトがあり、 301リダイレクトは恒久的なリダイレクトとして扱われ検索エンジンに移転先をインデックス登録したいときに使います。 302リダイレクトは一時的なリダイレクトで検索エンジンでは移転元と移転先は別々のサイト扱いになります。 リダイレクト方法はいろいろありますがHTMLでリダイレクト(転送)をするには<META>タグを使用します。

<META http-equiv="refresh" content="5; url=jump.html">  5秒後にjump.htmlへ302リダイレクト

※content="0;(即時転送)にすると301リダイレクト

またサーバーが.htaccessファイルを許可している場合はテキストエディタで以下のように記述して.htaccessの名前で保存し、 転送元に配置することでリダイレクトすることができます。

redirect permanent /tensoumoto/tensoumoto.html http://○○○.com/tensousaki/tensousaki.html

301なのか302なのかなど、確認したい場合はブラウザに搭載の開発ツールやGoogle Search ConsoleのFetch as Googleなどで確認できます。

表をつくる

<TABLE border="1" cellspacing="30" cellpadding="10">
 <TBODY>
  <TR>
   <TD>あいうえお</TD>
   <TD>かきくけこ</TD>
  </TR>
  <TR>
   <TD>さしすせそ</TD>
   <TD>たちつてと</TD>
  </TR>
 </TBODY>
</TABLE>

(表示)
   
あいうえお かきくけこ
さしすせそ たちつてと

※列を結合させたい場合はcolspan="結合数"を、行を結合させたい場合はrowspan="結合数"を
 <TD>タグ内に記入することでできます。
<TABLE border="1">
 <TBODY>
  <TR>
   <TD colspan="2">あいうえお</TD>
   <TD rowspan="2">かきくけこ</TD>
  </TR>
  <TR>
   <TD>さしすせそ</TD>
   <TD>たちつてと</TD>
  </TR>
 </TBODY>
</TABLE>

(表示)
   
あいうえお かきくけこ
さしすせそ たちつてと

※border 表の外側の罫線の太さを示す
cellspacing セルとセルの間隔(間の罫線の太さ)を示す
cellpadding セルの中にある文字とセルの枠(罫線)との間隔を示す
※widthで幅を数値で指定した場合、幅固定されるが数値を超える文字列が記述された場合FireFoxは自動改行され問題ないが Internet Explorerだと全角文字は自動改行されるが半角文字は自動改行されずに指定した幅を超えることがある。

画像を表示する

<img src="画像のURL" width="120" height="90" alt="画像のコメント">

(表示)
画像のコメント←画像有り   画像のコメント←画像なし

※width="120"は横幅、height="90"は縦幅のサイズで数値は変更可能です。
 alt="画像のコメント"はカーソルを画像の上に重ね合わせたときや
 画像ファイルが表示されないとき(画像ファイルのリンクミスやブラウザで画像表示をしないに設定しているとき等)に
 表示されるコメント文です。

<META>タグ

作成したWebページの文書に関する情報(メタ情報)をブラウザやロボット型検索エンジンに知らせるためのタグで <HEAD>~</HEAD>タグ内に記述します。<META>タグには以下のようなものなどがあります。
  • <META Http-equiv="Content-Type" Content="text/html; charset=Shift_JIS">  表示文の文字コード指定
  • <META name="keywords" content="キーワード1,キーワード2,キーワード3">  検索されたときの表示文のキーワード指定
  • <META http-equiv="refresh" content="5; url=jump.html">  別ページへの自動ジャンプ指定
  • <META http-equiv="Pragma" content="no-cache">  ブラウザ側のキャッシュ防止
  • <META name="robots" content="noindex,nofollow">  ロボット型検索エンジンへの指示(indexで検索許可、followでリンク先検索許可)
  • <META http-equiv="imagetoolbar" content="no">  IE6.0などのイメージツールバーの無効化
  • <META name="description" content="HTMLの記述メモです">  検索サイトにインデックスされたときの説明文

右クリックさせない

body開始タグ内に

<body oncontextmenu="alert('右クリックはできません');return false">

単一の枠をつくる <fieldset>~</fieldset>

<fieldset>あいうえお</fieldset>

(表示)
あいうえお

※枠に題をつけるには<legend>を使用
<fieldset><legend>あいうえお</legend>かきくけこ</fieldset>

(表示)
あいうえおかきくけこ

※fieldsetタグは、divタグと同じように自動で改行され前後に余白をつくりません。

背景に画像を表示させる

body開始タグ内に
<body background="画像のURL">

※背景画像を固定(スクロールさせない)するにはさらにbgproperties="fixed"を付け加える。

POST

(例)
<FORM METHOD="POST" ACTION="./$script">
<INPUT type="hidden" name="name4" value="$nom">
</FORM>

TOPへ
戻る