htmlタグの要素別インデックスです。これらのタグはhtmlにおいて原則<〇〇>と</〇〇>で囲むことによって機能します。（このページの”記号欄”を除く）
ホームページ（ウェブサイト）を構築する上で、HTMLはすべての基礎となります。以前は「HTML5」という規格が新基準として広く認知されていましたが、現在HTMLはWHATWGが策定する「Living Standard」として、常に最新の状態へとアップデートされ続けています。
現代のブラウザ環境や規格に準拠した主要なHTMLタグを整理し、ホームページ（ウェブサイト）制作における実用的なリファレンスとしてまとめました。事業の情報を検索エンジンやユーザーへ正確に伝えるために、ぜひご活用ください。
HTML Hyper Text Markup Language
HTMLは、ホームページ制作の基本タグで、ホームページ（ウェブサイト）、 ウェブページを作成するための基本的なマークアップ言語です。
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）を略してHTMLと呼んでいます。
プレーン状態のテキストデータにHTMLでマークアップしていくことによって、ホームページ（ウェブサイト）を構成するHTMLファイルを生成することができます。
スタイルシート（Style Sheets）,CSSが、ウェブページの装飾や配置などを指定するのに対して、htmlは、html文書のタイトル・見出し・段落など、文書構造を定義します。
ホームページ（ウェブサイト）制作・作成に役立つCSSのプロパティ一覧は
⇒css property reference index ホームページ制作の装飾プロパティ
html tag index ホームページ制作の基本タグ
ホームページ制作の基本タグ、htmlタグのインデックスです。
htmlタグ｜address（アドレス）連絡先・所在地情報 活用とSEO効果
htmlタグ｜article（アーティクル、記事）・aside（アサイド、補足）
htmlタグ｜audio（オーディオ）・video（ビデオ）・source
htmlタグ｜base（ベース）相対パスの基準URL指定 aタグとの違い
htmlタグ｜code・samp・kbd・var・pre｜listing（廃止）
htmlタグ｜dfn・dl・dt・dd（定義）｜abbr・acronym（略語）
htmlタグ｜div（汎用ブロック要素）・span（汎用インライン要素）
htmlタグ｜DOCTYPE ドキュメントタイプ・html文書宣言
htmlタグ｜fieldset・legend｜keygen（廃止）
htmlタグ｜figure（フィギュア）・figcaption｜画像や図表と説明文
htmlタグ｜form・input・output・label・button・textarea｜フォーム
htmlタグ｜header・footer・section・hgroup
htmlタグ｜iframe（インラインフレーム）・frame・frameset・noframes
htmlタグ｜ins（追加情報）・del（削除情報）・s（打ち消し線）
htmlタグ｜li（リスト）・ul（順不同）・ol（番号順）
htmlタグ｜nav（ナビ）・menu（メニュー）｜command（廃止）
htmlタグ｜object・embed・noembed・param・applet｜埋め込み
htmlタグ｜progress（プログレス）・meter（メーター）
htmlタグ｜select・datalist・option・optgroup
htmlタグ｜small｜ big・strike・spacer・center・marquee・blink（html5で廃止）
htmlタグ｜strong・b・em・mark（強調・太字・ハイライト）
htmlタグ｜style（スタイル）とCSSによるスタイル指定の優先順位と運用
htmlタグ｜table（テーブル）・tr・th・td・tbody・thead・tfoot・caption
ブロック要素とインライン要素
廃止・非推奨タグ
htmlタグ｜font（フォント）・basefont・tt（廃止）
htmlタグ｜layer（レイヤー）・ilayer・nolayer・multicol（NN独自仕様・廃止）
htmlタグ｜plaintext・comment・xmp html5で廃止
表記における(IE)はInternet Explorerを、NNはNetscape Navigatorにおける独自採用を意味しています。
現在も有効なHTMLタグ
| 頭文字 | タグ一覧 |
|---|---|
| A | <a>, <abbr>, <address>, <area>, <article>, <aside>, <audio> |
| B | <b>, <base>, <bdi>, <bdo>, <blockquote>, <body>, <br>, <button> |
| C | <canvas>, <caption>, <cite>, <code>, <col>, <colgroup> |
| D | <data>, <datalist>, <dd>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <dt> |
| E | <em>, <embed> |
| F | <fieldset>, <figcaption>, <figure>, <footer>, <form> |
| H | <h1>～<h6>, <head>, <header>, <hgroup>, <hr>, <html> |
| I | <i>, <iframe>, <img>, <input>, <ins> |
| K | <kbd> |
| L | <label>, <legend>, <li>, <link> |
| M | <main>, <map>, <mark>, <menu>, <meta>, <meter> |
| N | <nav>, <noscript> |
| O | <object>, <ol>, <optgroup>, <option>, <output> |
| P | <p>, <picture>, <pre>, <progress> |
| Q | <q> |
| R | <rp>, <rt>, <ruby> |
| S | <s>, <samp>, <script>, <search>, <section>, <select>, <slot>, <small>, <source>, <span>, <strong>, <style>, <sub>, <summary>, <sup> |
| T | <table>, <tbody>, <td>, <template>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <track> |
| U | <u>, <ul> |
| V | <var>, <video> |
| W | <wbr> |
廃止・非推奨のHTMLタグ
| 頭文字 | タグ一覧 |
|---|---|
| A | <acronym>, <applet> |
| B | <basefont>, <bgsound>, <big>, <blink> |
| C | <center> |
| D | <dir> |
| F | <font>, <frame>, <frameset> |
| I | <image>, <isindex> |
| K | <keygen> |
| M | <marquee>, <menuitem> |
| N | <nobr>, <noembed>, <noframes> |
| P | <param>, <plaintext> |
| R | <rb>, <rtc> |
| S | <shadow>, <spacer>, <strike> |
| T | <tt> |
| X | <xmp> |
ホームページ（ウェブサイト）の適切なHTMLマークアップ
ホームページ（ウェブサイト）を構成する一般的なウェブページは、html文書のため、プレーンテキスト（純粋な文、文字列）や画像などをhtmlによって文章の論理構造を示しながら設定し、cssで外観的な装飾を施すことで生成されています。
ホームページ（ウェブサイト）全体や、それぞれのページの適切なHTMLマークアップは、SEOの基本的な要素のひとつです。
同じ文章であっても、ページ中に適切に見出しなどが付けられ、文章の論理構造が示されている場合は、検索エンジンもそのページの主題を理解しやすくなります。
より優れたホームページ（ウェブサイト）づくりには、適切なHTMLマークアップが欠かせません。
適切なHTMLマークアップを行うことが、SEOの大前提となる基本的な方法です。
文書構造を明確にするセマンティックタグ
現代のHTMLにおいて特に重要視されているのが、タグ自体に意味を持たせるセマンティックなマークアップです。これにより、検索エンジンがページの内容を正しく理解しやすくなります。
header と footer
ページの導入部やナビゲーションを含む領域にはheaderを使用し、著作権情報や関連リンクなどをまとめる領域にはfooterを使用します。これらはページ全体の上下だけでなく、articleなどの独立したコンテンツ内でも使用できます。
main と article
mainタグは、そのページで最も中心となる独自のコンテンツを囲むために使用します。1つのページにつき原則1回のみ配置します。一方、articleタグは、それ単体で独立して読めるコンテンツ（ブログ記事やニュースの1件など）を示します。
section と nav
sectionタグは、見出しを伴う意味的なまとまりを示します。単なるデザイン上の区切りには使用せず、必ず内容の区切りとして機能させます。navタグは、主要なナビゲーションリンクのまとまりを示す際に使用し、サイト内の回遊を助けます。
テキストの意味付けと情報伝達のタグ
文章の構造を正しくマークアップすることは、ユーザーの読みやすさだけでなく、事業が発信する情報の正確性を担保する上でも重要です。
見出し（h1からh6）と段落（p）
h1からh6は見出しを表し、数字が小さいほど上位の階層を示します。階層構造を飛ばさずに順番に使用することが基本です。また、文章のひとまとまりはpタグで囲み、適切な段落分けを行います。
リンク（a）と画像の代替テキスト（img）
aタグは他のページや外部サイトへのリンクを作成します。imgタグで画像を配置する際は、alt属性を用いて画像の内容をテキストで説明することが推奨されます。これにより、画像が表示されない環境や音声読み上げソフトを利用するユーザーにも情報が伝わります。
より高度なHTML設計とマークアップの最適化
ここからは、より専門的にはどのようにHTMLを設計し、ホームページ（ウェブサイト）の品質を底上げしていくかについて解説します。具体的な編集や操作手順ではなく、HTMLの構造そのものが持つ検索エンジンやブラウザへの影響力について掘り下げていきます。
セマンティックHTMLとアクセシビリティツリー
ブラウザはHTMLを読み込むと、視覚的な描画のためのDOMツリーとは別に、支援技術（スクリーンリーダーなど）向けのアクセシビリティツリーを構築します。divやspanといった意味を持たないタグを多用するのではなく、適切なセマンティックタグを用いることで、このツリーが正確に形成されます。結果として、あらゆるユーザーにとって情報を取得しやすいホームページ（ウェブサイト）となります。
WAI-ARIA属性による意味の補完
複雑なユーザーインターフェースを構築する際、標準のHTMLタグだけでは状態や役割を伝えきれない場合があります。そのような場面ではWAI-ARIA属性を付与することで、要素の役割（role）や現在の状態（aria-expandedなど）を補完します。ただし、基本はHTMLの標準タグを優先し、ARIAはあくまで補助として使用することが最適な設計手法です。
DOMの深さとレンダリングパフォーマンス
HTMLのタグが何層にも深くネスト（入れ子）されている状態は、ブラウザの計算処理に負荷をかけ、ページの表示速度を低下させる原因になります。事業の成果を最大化するためには、ページの表示速度に関する指標を意識し、不必要なラッパー要素（装飾のためだけの囲みタグなど）を減らして、DOMツリーを浅くシンプルに保つマークアップを心がけることが重要です。
マシンリーダブルな構造化データの連携
HTMLタグによる文書構造の定義に加えて、JSON-LDなどを用いた構造化データを記述することで、検索エンジンに対してページの意味をより直接的に伝達できます。パンくずリストや事業の基本情報などを検索結果の拡張表示（リッチリザルト）として反映させるためには、土台となるHTMLのクリーンな設計と構造化データの連携が大きな効果を発揮します。
ホームページ制作・SEO・Web集客・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社 株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正・LP制作はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、SNSマーケティングとの連携、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいております。軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
