備忘録的リファレンス

HTML

 HTML(Hypertext Markup Language)とはwebページを制作するための1つのマークアップ言語です。htmlを編集するにはタグについて知る必要があります。
 <div>、<p>などのタグによってページ内容を区分します。装飾のためにタグを利用することことも多くあります。
 色や罫線などHTMLページに装飾を加えるには、CSSを使います。

 HTMLはソースをテキストで作成しますが、ブラウザはDOM(Document Object Model)として読み込み、HTMLテキストをオブジェクトデータ化します。HTMLテキストソースはブラウザではDOMデータとして扱われるのです。このDOM使ってJavaScriptなどでHTMLページを操作します。

 ここでは用途別に紹介しています。

ヘッダーエレメント

 HTMLテキストデータとして成り立つために必要なタグエレメントです。webページとして必要な定義を行います。SEOを重視する商用サイト制作では必要なタグエレメントです。

!DOCTYPE
ドキュメントタイプを宣言します
html
HTMLテキストであることを定義します
head
httpデータに追記もしくはユーザに分かる形のデータ群の包括エレメントです
title
ページタイトルを定義します
meta
ページに必要で表示はしないデータを定義します
link
ページの移動とスタイルシートの読み込みに使います
script,noscript
スクリプトを定義します
style
スタイルを直接記述するのに使います
body
HTMLテキストの本体部分を包括します

レイアウト、任意タグ

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

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

テキスト編集

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

基本テキスト編集

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

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

プログラムコード

 プログラムコードを表現するためのタグエレメントです。

code
プログラムコード例などに、インラインエレメント
del
削除済み
ins
追記
kbd
キーボード入力例
pre
改行やスペースをソースそのままに表示、ブロックエレメント
samp
プログラムの出力例
sub
下つき小文字
sup
上つき小文字
var
プログラムにおける引数や変数例

引用、定義、出典

 引用、定義、出典を明示するためのタグエレメントです。

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
画像を読み込みます
object
他のリソースを読み込みます
audio
他のリソースを読み込みます
video
他のリソースを読み込みます

Tips

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

注意点

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

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

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

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

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

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

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

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

html5は今やほぼ標準ですのであえてhtml5と分けていません。