posted on 2019.7.17
このページでは、html入門者用にタグを使用して作成されるHTMLの要素を機能別にグループ化してまとめています。html初心者が理解し易いようにあまり一般的でないHTMLタグは一部割愛してあります。どのタグが何の意味を持つのか確認して、ホームページ作りに役立てて下さい。
・構造・データ
HTML文書をどのようなものにするのか、またそれに必要な外部ファイルへのリンクなどを定義するhtmlタグの一覧です。通常ブラウザなどに表示されるものではありません。
| <!DOCTYPE> | HTML文書の記述のタイプを定義します。 |
|---|---|
<html> |
HTML文書であることを定義します。HTML文書においてルート (基点) となる要素 (トップレベル要素)。 |
| <head> | HTML文書に関する情報を定義します。 |
| <meta> | HTML文書に関するメタデータを定義します |
| <title> | 文書のタイトルを定義します |
| <link> | 文書と外部のリソースとの関係を指定します。 |
| <style> | ヘッダー内にスタイルシートを記述します |
| <script> | 文書にJavaScriptなどのスクリプトを組み込みます。 |
・文書本体および文書のセクション
HTML文書の一番太い骨組みを定義する為のhtmlタグ一覧です。ホームページを作成するために最初に覚えなければならないタグの一群です。
| <body> | HTML文書の表示される本体を定義します。<body>要素は文書中に一つだけ配置できます。 |
|---|---|
| <header> | 導入的なコンテンツを定義します。見出し(主にh1)、ナビゲーション、ロゴ、検索フォーム、作者名なども含めることができます。 |
| <article> | 文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を定義します。 |
| <section> | HTML 文書の中で単独のセクション（区間）を定義します。 |
| <aside> | サイドバーなどメインコンテンツとは離れた補足的な情報を定義します。 |
| <footer> | HTML文書本文またはセクションのフッターを定義します。作者情報 著作権情報、連絡先、サイトマップ、トップリンクに戻る、関連文書などの情報を含めることができます。 |
| <h1>–<h6> | セクションの見出しを6段階で表します。<h1>が最上位で、<h6>が最下位です |
| <nav> | 他の文書へのナビゲーションリンクを提供するためのセクションを表します |
| <address> | 個人、団体、組織の連絡先をを示します。 |
・テキストコンテンツの分類
皆さんが表現したいコンテンツを定義するためのhtmlタグの一覧です。<P>タグは必須になります。段落・文章であればこのタグで囲えば意味は通ります。
| <p> | テキストの段落を表します。 |
|---|---|
| <hr> | 段落レベルの要素間において、節内での話題の転換など、意味的な区切りを表します。 |
| <blockquote> | 内包する文章が 引用・転載であることを表す。<cite>タグにより引用元の文書のタイトルなどを明示できる。 |
| <ol> | 項目の順序付きリストを表し、ふつうは番号付きのリストとして表示されます。 |
| <ul> | 項目の順序なしリストを表します。一般的に、「・」などの行頭記号を伴うリストとして描画されます。 |
| <li> | リストの項目を表すために用いられます。 <ol>、<ul>、<menu>のいずれかの子要素として配置する必要があります。 |
| <dd> | HTML 4.01では、
|
| <dt> | 説明又は定義リストの中で用語、言葉を表す部分であり、 <dl> の子要素としてのみ用いることができます。 |
| <dd> | 定義語（<dt>）の詳細または定義を表します。 |
| <figure> | 図表などをを表す要素であり、多くの場合、<figcaption>と一緒に使用されます。 |
| <figcaption> | <figure>要素におけるコンテンツのキャプションや凡例を表します。 |
| <div> | フローコンテンツの汎用コンテナーです。コンテンツとしての意味はありません。 |
・テキストの意味付け
強調、引用など文章の一部に意味を付けをしたい場合や一部リンクを含める場合などに使用するHTMLタグの一覧です。
| <a> | href属性を用いて、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他のURLへのハイパーリンクを指定します。 |
|---|---|
| <span> | スタイル付けの為の記述コンテンツの汎用的な行内コンテナー。何かを表すものではありません |
| <strong> | 重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。 |
| <em> | 強調されたテキストを示します。 |
| <small> | 著作権表示や法的表記のような、注釈や小さく表示される文を表します。テキストのフォントサイズをブラウザーの最小フォントサイズを限度として、一段階縮小します。 |
| <cite > | 引用された創作物の参照を表し、作品のタイトル、著者、 URL を含む必要があります。 |
| <q> | その内容が引用句・引用文であることを表します。 |
| <br> | 文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です |
・画像、マルチメディア
画像やビデオなどをHTML文書内に埋め込む為のhtmlタグの一覧です。
| <img> | HTML文書に画像を埋め込みます。画像は技術的にはHTMLページに挿入されず、画像はsrc属性でHTMLページにリンクされます。<img>タグは、参照画像用の保持スペースを作成します |
|---|---|
| <map> | イメージマップ (クリック可能なリンク領域) を定義するために <area>要素とともに使用します。 |
| <area> | 画像のホットスポット領域を定義し、また任意で領域とハイパーテキストリンクの関連づけを行います。この要素は<map>要素内だけで使用します |
| <video> | ムービークリップや他のビデオストリームなどのビデオを指定します。 |
| <audio> | 音楽やその他のオーディオストリームなどのサウンドを定義します。 |
・コンテンツの埋め込み
外部ウェブページやアプリケーションなどをHTML文書内に埋め込む為のhtmlタグの一覧です。
| <iframe> | インラインフレームを指定します。インラインフレームは、現在のHTMLページに他のHTMLページを埋め込むために使用されます。 |
|---|---|
| <embed> | 外部アプリケーションまたはインタラクティブコンテンツ（プラグイン）のコンテナを定義します。 |
| <object> | HTMLドキュメント内の埋め込みオブジェクトを定義します。この要素を使用して、Webページにマルチメディア（オーディオ、ビデオ、Javaアプレット、ActiveX、PDF、Flashなど）を埋め込むことができます。 |
| <param> | <object>要素で埋め込まれたプラグインのパラメータを定義するために使用されます 。 |
・テーブル
HTML文書内でエクセルのような表やテーブルを表現するためのhtmlタグの一覧です。
| <table> | 行と列の組み合わせによるセルに含まれたデータにより二次元の表（テーブル）を定義します。 |
|---|---|
| <tbody> | 表の一連の行を内包し、その部分が表 (テーブル) の本体部分を構成することを表します。 |
| <tr> | 表のひとつの行で構成されるブロックを内部に持つことを明示します。行の内部で<th>要素および<td>要素が、それぞれ見出しやデータのセルを生成します。 |
| <th> | HTMLテーブル内のヘッダーセルを定義します。テキストは、デフォルトで太字で中央に配置されています。 |
| <td> | HTMLテーブル内の標準セルを定義します。テキストは標準で、デフォルトで左揃えです。 |
| <caption> | 表のキャプション（またはタイトル）を指定するもので、使用する場合は常に <table>の最初の子要素として配置しなければなりません。 |
・htmlフォーム
HTML文書内でお問い合わせフォームなどのフォームを表現する為のhtmlタグの一覧です。
| <form> | ユーザー入力用のHTMLフォームを作成するために使用されます。 |
|---|---|
| <input> | ユーザーがデータを入力できる入力フィールドを指定します。 |
| <textarea> | 複数行のテキスト入力制御を定義します。レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。 |
| <select> | ドロップダウンリストを作成するために使用されます。 |
| <option> | ドロップダウンリスト内のオプションを定義します。<select>タグの内側に入ります。 |
| <button> | クリックできるボタンを表し、フォームや、HTML文書内で単純なボタン機能が必要なあらゆる場所で使用することができます。 |
| <fieldset> | ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。 |
| <label> | ユーザーインターフェイスの項目のキャプションを表します。 |
これで、【HTML入門】HTMLタグ一覧の記事は終わりにしたいと思います。今回は初心者向けのホームページのつくり方の一部として記事を書かせていただいております。まれに使われているようなhtmlタグはホームページ制作上級者の方用に別途記事にしていければ思います。それではまた。
