備忘録的プログラミングリファレンス

HTML リファレンス

 HTML ( Hypertext Markup Language ・ハイパーテキスト・マークアップ・ランゲージ)とは、 web ページを制作するためのマークアップ言語です。

 HTML だけでは、テキスト、画像や動画といったコンテンツを羅列できるだけですが、web ページの制作はここからが始まりです。

 HTML は、インターネット上で公開された研究レポートを検索するために考案された SGML から発展したマークアップ言語です。
 文章を特定の意味をもったタグで囲むという手法によって、コンピュータが素早く検索できるように考案されました。そのため、何らかの意味をもつタグがHTMLには用意されています。

 文章のみならず、レポートの画像、表、一覧といった機能が加えられていき、web ページを広告として利用されるになって、レイアウトやデザインを重視するようになりました。
 今はデザインやレイアウトは CSS へと、内容の正誤の判断や計算、動きのある表現、ゲームのための JavaScriptWeb API と機能を増やしながら、より充実した web ページ作成が可能になりました。

 HTML の基本的なことは HTML 入門を参照してください。

HTMLタグの用途別一覧

 HTMLタグについて用途別に紹介します。

基本エレメント

 HTMLソースファイルを作成するのに必要な基本的なエレメントです。

!DOCTYPE
HTMLの形式を宣言。以降の<html>テキストの編集形式を示します
html
包括された内容がHTMLテキストであることを示します
head
ページのための情報
body
ページ内容を包括するエレメント。表示される内容

ヘッダーエレメント

 <head>内に編集するエレメントです。ページに必要な定義を行います。SEOを重視する商用サイト制作では必要なタグエレメントです。

title
ページタイトルを定義します
meta
ページに必要で表示はしないデータを定義します
link
ページの移動とスタイルシートの読み込みに使います
script,noscript
スクリプトを定義します
style
スタイルを直接記述するのに使います

レイアウト、任意タグ

 汎用タグエレメントで、CSSを利用した見た目を形成することや内容の領域分けに利用されています。
 しかし、必ずしも使わなければならないという訳ではありません。
 商用利用のサイト制作では憶えておいた方がよいタグエレメントです。

header
サイトタイトルを各ページに設けるエレメント
footer
サイトタイトルをフッターとして各ページに設けるエレメント
nav
ページのナビメニューエレメント
main
ページのメインコンテンツエレメント
aside
ページのサブコンテンツエレメント
article
任意のブロックレベルエレメントで、内容が完結していることを示すエレメント。1ページに複数のコンテンツや内容を包括することができます。1ページで複数ページを表示するブログなどで見られます。
section
任意のブロックレベルエレメントで、内容ごとに分ける際に使用します。
div
任意のブロックレベルエレメント
span
任意のインラインエレメント

テキスト編集

 テキスト編集のためのタグエレメントです。

基本テキスト編集

 テキストの編集で、基本的に必要と思われるタグエレメントです。

p
段落
br
改行
h1-h6
見出し
hr
横線
ruby
ふりがな、ルビ文字について
a
リンクの作成
img
画像
 
picture
表示幅によって画像を変更

数式、化学式やプログラムコードのエレメント

 数式、化学式やプログラムコードに関連するエレメントには以下があります。

エレメント名概要
プログラム
codeプログラムコード例などに、インラインエレメント
kbdキーボード入力例
pre改行やスペースをソースそのままに表示、ブロックエレメント
sampプログラムの出力例
数式、化学式
sub下つき小文字
sup上つき小文字
プログラム、数式
varプログラムの引数や数式の変数
その他(記録用)
del削除済み。関数や引数などの削除があったら
ins追記。関数や引数などの追加があったら

引用、定義、出典

 引用、定義、出典に関連するエレメントには以下があります。

エレメント名概要
abbr略語に用いる
address連絡先やメールアドレスだが、使わないことが多い
blockquote引用に用いる。ブロックエレメント
q引用に用いる。インラインエレメント
cite出典、参照先があることを明示
dfn定義された語句であることを明示

データ送受信、表などの機能性タグ

 リストや表、データ送受信などの機能をもったタグエレメントです。

リスト

ul
順序なしリスト
ol
順序づけリスト
li
順序なしリストまたは順序づけリストにおけるデータ
dl
項目名リスト
dt
項目名リストにおける項目名
dd
項目名リストにおけるデータ

表(TABLE)

table
表の作成
tr
表の列エレメントを作成します。これによって列数が決まります。
td
表のセル
th
表データの項目名を明示
colgroup
表の行エレメントをまとめて、スタイルやスクリプトに利用します。
col
caption
表にキャプション(見出し、説明文)を追加
thead
表の行にヘッダーを設定します。
tbody
表にヘッダーまたはフッターを設定する際は必要になります。
tfoot
表の行にフッターを設定します。

フレーム表示

iframe
ページ内に別のページが表示できます

データの送受信

form
サーバーとのデータ送受信
input
データ入力や送信ボタンに
select
選択肢のあるデータ入力
textarea
改行を含むテキスト入力
button
送信ボタンなどの機能ボタン専用
fieldset
form内容を複数個に分かる場合に
legend
fieldsetのキャプション
label
データ入力部品に名前を付ける

マルチメディア

img
画像を読み込みます
audio
他のリソースを読み込みます
picture
他のリソースを読み込みます
video
他のリソースを読み込みます
object
他のリソースを読み込みます

目盛り、工程表示

meter
数値を目盛り、ゲージで表示できます
progress
進捗状況を表示

HTML属性

HTML属性

HTMLグローバル属性

イベントハンドラー属性

その他

<!-- , -->コメントアウト

特殊文字

ブロックレベルエレメントとインラインエレメント

非推奨タグエレメントとその属性

数値の書式について

Tips

 HTMLタグエレメントには、「開始タグ、終了タグとも省略できない」、「終了タグのみ省略できる」、「開始タグ、終了タグとも省略できる」の3種類があります。htmlエレメント・headエレメント・bodyエレメント・colgroupエレメント・tbodyエレメントは、開始タグ、終了タグともに省略できます。htmlエレメント・headエレメント・bodyエレメントの終了タグが省略してあるのはあまり見かけたことはないです。

注意点

以下の注意点があります。

・WHATWG(Web Hypertext Application Technology Working Group)などの機関によってHTMLの仕様が勧告されていますが、必ずしもその通りの説明であるという保証はありません。各自のブラウザでの動作を確認して下さい。

・HTMLテキストにページを性格付けるようなタグ、<HTML>、<HEAD>、<BODY>では定義すると記述します。

・<P>、<BR>といったHTMLテキストに改行やヘッダー、リンクを加えるようなタグには編集すると記述します。

・<BLOCKQUOTE>、<DEL><INS>などのような暗黙の内にテキストに意味を持たせるタグには明示すると記述します。

・HTMLテキストに機能を追加するようなタグ、<FORM>、<TABLE>、<MAP>、<OBJECT>では作成できますと記述します。

・このサイトの例は、javascriptによって実際に作成できるようにしています。

このページはwebページを開発しながら参照することを前提に作成していますので詳細な説明をしていない部分が多いです。