書き方を忘れた場合にご活用ください。詳細は記述しておりません。
| No | 分類 | タグと説明 | 使用例・サンプル |
| 1 | 文書情報・構造 | <!DOCTYPE> :ドキュメントタイプを宣言する | <!DOCTYPE html> <html> <head> <meta http-equiv="content-language" content="ja"> <meta charset="UTF-8"> <TITLE>文書タイトル</TITLE> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> </head> <body> <h1>見出し</h1> <p>パラグラフ</p> </body> </html> |
| <html> :HTML文書であることを宣言する | |||
| <head> :文書のヘッダ情報を表す | |||
| <meta> :その文書に関する情報（メタ情報）を指定する | |||
| <title> :文書にタイトルをつける | |||
| <body> :文書の本体を表す | |||
| <h1>～<h6> :見出しを付ける | |||
| <p> :ひとつの段落（パラグラフ）であることを表す | |||
| 2 | コンテンツの分類 | <p>:ひとつの段落（パラグラフ）であることを表す | |
| <hr>:テーマや話題の区切りを表す（横罫線を引く） | <hr> |
||
| <pre>:半角スペースや改行をそのまま表示する | |||
| 3 | テキストの表現 | <b>:テキストを太字にする | <b>太文字</b> 太文字 |
| <i>:テキストを斜体（イタリック）にする | <i>斜体</i> 斜体 | ||
| <u>:テキストに下線（アンダーライン）を引く | <u>xxxx</u> xxxx | ||
| <sub>:下付き文字を表す | Z<sub>zz</sub> Zzz | ||
| <sup>:上付き文字を表す | Z<sup>zz</sup> Zzz | ||
| <br>:改行する | |||
| 4 | 範囲指定 | <div>:ひとかたまりの範囲として定義する（ブロック要素） | |
| <span>:ひとかたまりの範囲として定義する（インライン要素） | |||
| 5 | コンテンツの 埋め込み |
<img>:画像を表示する | <img src="img/yasai.jpg" width="60" height="50">
|
| <iframe>:インラインフレームを作る | <iframe style="border: 0; width: 100% ; height: 100px; margin:0;
padding: 0;" scrolling="no" frameborder="0" src="xxx.html"></iframe> |
||
| <video>:動画を再生する※ | <video src="Xperia.mp4" controls style="width:160px;height:90px"></video> |
||
| <audio>:音声を再生する※ | <audio controls><source src="Yesterday.mp3"> <source src="Yesterday.ogg"> </audio> |
||
| <canvas>:図形を描く※ | 参考 | ||
| <svg>※ | |||
| 6 | リスト | <ol>:順序のあるリストを表示する | 参考 |
| <ul>:順序のないリストを表示する | |||
| <li>:リストの項目を記述する | |||
| <dl>:定義・説明リストを表す | |||
| <dt>:定義・説明される言葉を表す | |||
| <dd>:定義用語や言葉の説明をする | |||
| 7 | 表・レイアウト | <table> :テーブル（表）を作成する | 参考 |
| <tr> :テーブル（表）の横方向の一行を定義する | |||
| <th> :テーブル（表）の見出しセルを作成する | |||
| <td> :テーブル（表）のデータセルを作成する | |||
| <thead> :テーブル（表）のヘッダ行を定義する | |||
| <tfoot> :テーブル（表）のフッタ行を定義する | |||
| <tbody> :テーブル（表）のボディ部分を定義する | |||
| <caption> :テーブル（表）にタイトルをつける | |||
| <hr> :横罫線を引く | |||
| 8 | 入力フォーム | <form> :入力・送信フォームを作成する | 参考 |
| <button> :ボタンを作成する | |||
| <Iinput type="submit"> :フォームの送信ボタンを作成する | |||
| <input type="image"> :フォームの画像ボタンを作成する | |||
| <input type="button"> :フォームの汎用ボタンを作成する | |||
| <input type="text"> :一行テキストボックスを作成する | |||
| <input type="password"> :パスワード入力欄を作成する | |||
| <input type="radio"> :ラジオボタンを作成する | |||
| <input type="checkbox"> :チェックボックスを作成する | |||
| <input type="hidden"> :非表示データを送信する | |||
| <input type="file"> :サーバーにファイルを送信する | |||
| <select> :セレクトボックスを作成する | |||
| <optiongroup> :セレクトボックスの選択肢をグループ化する | |||
| <option> :セレクトボックスの選択肢を指定する | |||
| <textarea> :複数行の入力フィールドを作成する | |||
| 9 | リンク | <a>:ハイパーリンクを指定する | <a href="#go">ページ内移動</a> <a href="htt://tomari.org">URLへジャンプ</a> |
| <link> | <link rel="stylesheet" type="text/css" href="css/tom.css"> | ||
| 10 | スクリプト | <script> :文書にスクリプトを埋め込む | |
| 11 | スタイルシート | <style> :スタイルシートを記述する | |
| 12 | コメント | <!---->:ソース中にコメントを入れる |