HTML リファレンス
HTML ( Hypertext Markup Language ・ハイパーテキスト・マークアップ・ランゲージ)とは、 web ページを制作するためのマークアップ言語です。
HTML だけでは、テキスト、画像や動画といったコンテンツを羅列できるだけですが、web ページの制作はここからが始まりです。
HTML は、インターネット上で公開された研究レポートを検索するために考案された SGML から発展したマークアップ言語です。
文章を特定の意味をもったタグで囲むという手法によって、コンピュータが素早く検索できるように考案されました。そのため、何らかの意味をもつタグがHTMLには用意されています。
文章のみならず、レポートの画像、表、一覧といった機能が加えられていき、web ページを広告として利用されるようになって、レイアウトやデザインを重要視するようになりました。
今はデザインやレイアウトは CSS 。内容の正誤の判断や計算、動きのある表現、ゲームのための JavaScript ・ Web API と機能を増やしながら、より充実した web ページ作成が可能になりました。
HTML の基本的なことは HTML 入門を参照してください。
HTMLタグの用途別一覧
HTMLタグについて用途別に紹介します。
基本エレメント
HTMLソースファイルを作成するのに必要な基本的なエレメントです。
ヘッダーエレメント
<head>内に編集するエレメントです。ページに必要な定義を行います。SEOを重視する商用サイト制作では必要なタグエレメントです。
- title
- ページタイトルを定義します
- meta
- ページに必要で表示はしないデータを定義します
- link
- ページの移動とスタイルシートの読み込みに使います
- script,noscript
- スクリプトを定義します
- style
- スタイルを直接記述するのに使います
レイアウト、任意タグ
汎用タグエレメントで、CSSを利用した見た目を形成することや内容の領域分けに利用されています。
しかし、必ずしも使わなければならないという訳ではありません。
商用利用のサイト制作では憶えておいた方がよいタグエレメントです。
- header
- サイトタイトルを各ページに設けるエレメント
- footer
- サイトタイトルをフッターとして各ページに設けるエレメント
- nav
- ページのナビメニューエレメント
- main
- ページのメインコンテンツエレメント
- aside
- ページのサブコンテンツエレメント
- article
- 任意のブロックレベルエレメントで、内容が完結していることを示すエレメント。1ページに複数のコンテンツや内容を包括することができます。1ページで複数ページを表示するブログなどで見られます。
- section
- 任意のブロックレベルエレメントで、内容ごとに分ける際に使用します。
- div
- 任意のブロックレベルエレメント
- span
- 任意のインラインエレメント
テキスト編集
テキスト編集のためのタグエレメントです。
基本テキスト編集
テキストの編集で、基本的に必要と思われるタグエレメントです。
リンク
データ送受信、表などの機能性タグ
リストや表、データ送受信などの機能をもったタグエレメントです。
リスト
表(TABLE)
フレーム表示
- iframe
- ページ内に別のページが表示できます
データの送受信
マルチメディア
目盛り、工程表示
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ページを開発しながら参照することを前提に作成していますので詳細な説明をしていない部分が多いです。