Wikibooks

HTML/要素一覧

< HTML
ラベル HTML
要素一覧 		テーブル

HTMLとは

編集

いま見ているこのページもHTMLを返しています。基本的にはウェブページはHTMLを返します。 静止画・動画・スクリプトやスタイルシートなどの他の構成要素もありますが、多くはHTMLから間接的に参照されます。

例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    <h1>レベル１の見出し</h1>
    コンテンツ
  </body>
</html>

HTML基本構成

編集 
<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <link href="style.css" rel="stylesheet">
      <meta name="description" content="ページの概要">
   </head>
   <body>
      <h1>テストHTML</h1>
      <p>このページはテストHTMLです。</p>
      <p>pタグで囲った文章</p>
   </body>
</html>
表示
 
テストHTMLの表示


ブラウザなどの環境によって異なりますが、概ね上記のように表示されます。

DOCTYPE

編集

<!DOCTYPE html>は、HTML Living Standard に従って書かれたHTML文書を示すものです。HTML Living Standardは、廃止されたHTML5の後継で、常に進化しているHTMLの最新の状態を表現しています。そのため、<!DOCTYPE html>を使用することで、HTML Living Standardに準拠した文書であることを示すことができます。

HTML Living Standardは、WHATWG（Web Hypertext Application Technology Working Group）によって管理されています。HTML Living Standardは、Web技術の進化や新しい機能の追加に対応するため、非定期に更新されています。

HTML Living StandardのDOCTYPEには、文書型宣言（DTD; Document Type Declaration）が含まれていないので、もはやSGMLではありません。

html要素

編集

html要素はHTML文書のルート要素であり、全体のHTML構造を定義します。html要素は以下のように記述されます： 

<html lang="ja">
    <!-- ここにHTML文書の他の要素が入ります -->
</html>

lang属性は、要素内のテキストがどの言語で書かれているかを指定します。lang属性の値は、対象の言語を表す言語コードで指定されます。例えば、jaは日本語を表し、enは英語を表します。lang属性は主にアクセシビリティや検索エンジンのインデックスなどに使用され、ブラウザーが文書の言語を適切に解釈するのに役立ちます。

したがって、<html lang="ja">という記述は、このHTML文書が日本語で書かれていることを示しています。このようにして言語を指定することで、ブラウザーや検索エンジンが適切に文書を処理し、ユーザーにとってより使いやすい環境を提供することができます。

head要素 とは

編集

head要素は、HTML文書内で文書のメタデータやリソースへのリンク、スタイルシートの設定、JavaScriptの埋め込みなど、文書の構造や表示方法に関する情報を含むセクションです。head要素は文書の開始タグ <html> の直後に配置され、終了タグ </head> で終わります。

以下はhead要素が含むことができる主な要素です：

  • <title>: ページのタイトルを定義します。
  • <meta>: 文書のメタデータ（文字エンコーディング、キーワード、説明など）を指定します。
  • <link>: 外部リソース（CSS、アイコン、スタイルシートなど）へのリンクを定義します。
  • <style>: 文書内で使用されるスタイルシートを定義します。
  • <script>: JavaScriptコードを埋め込むための要素です。

head要素内のコンテンツは、ブラウザーに直接表示されるものではなく、ページのタイトルや検索エンジンの索引、ページの外観や挙動を制御するために使用されます。

title要素

編集

title要素は、HTML文書内でページのタイトルを定義するための要素です。ブラウザーのタブやブラウザーのウィンドウのタイトルバーに表示されるページのタイトルを設定します。

エンコーディング

編集

UTF-8でエンコードされたHTML文書を正しく解釈するためには、以下のように<meta charset="UTF-8">を使用します。 

<head>
    <meta charset="UTF-8">
    <!-- 他のメタ情報やスタイルシートやスクリプトのリンクなどもここに配置 -->
</head>

このメタタグによって、ブラウザーは文書の文字エンコーディングがUTF-8であることを知り、そのように文書を解釈します。文字エンコーディングが正しく指定されていない場合、特定の文字が正しく表示されない、または文字化けが発生する可能性があります。

HTML5では、<meta charset="UTF-8">のようにcharset属性の値としてエンコーディングを直接指定することが推奨されています。

外部スタイルシート

編集

link要素は、HTML文書内で外部リソースへのリンクを定義するための要素です。link要素を使用して外部のスタイルシートファイルをHTML文書にリンクする場合、以下のように記述します： 

<link href="style.css" rel="stylesheet">

ここでの各属性の意味は以下の通りです：

  • href="style.css": リンク先の外部スタイルシートファイルのURLまたは相対パスを指定します。この例では、style.cssという名前のスタイルシートファイルが同じディレクトリ内に存在することを前提としています。
  • rel="stylesheet": リンクされているリソースがスタイルシートであることを示します。

このようにしてlink要素を使用すると、ブラウザーは指定されたスタイルシートファイルをダウンロードし、HTML文書に適用します。これにより、外部のスタイルシートファイルに記述されたスタイルがHTML文書に適用され、ページの外観が変更されます。

body要素

編集

body要素は、HTML文書内で実際のコンテンツ（テキスト、画像、リンク、動画、音声など）を含むセクションを定義します。ブラウザーが表示するページの実際のコンテンツは、通常はbody要素内に配置されます。

以下はbody要素が含むことができる主な要素です：

  • テキストコンテンツ（段落、見出し、リストなど）
  • 画像 <img>
  • リンク <a>
  • 動画 <video> や音声 <audio>
  • フォーム要素（入力フォーム、ボタン、ラベルなど）
  • スクリプトやスタイルシートの埋め込み（通常は<script>やstyle要素を使用）

body要素はHTML文書内で1つだけ使用される必要があり、ページの実際のコンテンツが表示されるメインエリアとなります。

ブロック要素

編集

HTML5のブロック要素の一覧を表形式で示します。以下の表は、主要なブロック要素の名前、説明、および使用例を提供します。

ブロック要素!要素名
説明 用例
<address> 連絡先情報を定義 <address>Email: info@example.com</address>
<article> 独立したコンテンツを定義 <article><h1>記事タイトル</h1><p>記事本文...</p></article>
<aside> メインコンテンツに間接的に関連するコンテンツを定義 <aside><h3>関連記事</h3><ul>...</ul></aside>
<blockquote> 長い引用を定義 <blockquote><p>引用文...</p></blockquote>
<details> 追加の詳細を定義（開閉可能） <details><summary>詳細を表示</summary><p>追加情報...</p></details>
<dialog> ダイアログボックスやモーダルウィンドウを定義 <dialog open><p>ダイアログの内容</p></dialog>
<div> 汎用的なコンテナー要素 <div class="container">...</div>
<dl> 説明リストを定義 <dl><dt>用語</dt><dd>説明</dd></dl>
<fieldset> フォーム要素をグループ化 <fieldset><legend>個人情報</legend>...</fieldset>
<figure> 自己完結型のコンテンツを定義 <figure><img src="image.jpg"><figcaption>説明</figcaption></figure>
<footer> 文書またはセクションのフッターを定義 <footer><p>© 2024 Example Corp.</p></footer>
<form> ユーザー入力のためのフォームを定義 <form action="/submit" method="post">...</form>
<h1>-<h6> 見出しを定義（h1が最上位、h6が最下位） <h1>メインタイトル</h1>
<header> 文書またはセクションのヘッダーを定義 <header><h1>ウェブサイト名</h1><nav>...</nav></header>
<hr> 主題の区切りを定義 <p>セクション1</p><hr><p>セクション2</p>
<main> 文書の主要なコンテンツを定義 <main><h1>記事タイトル</h1><p>本文...</p></main>
<nav> ナビゲーションリンクのセットを定義 <nav><ul><li><a href="#">ホーム</a></li>...</ul></nav>
<noscript> スクリプトが無効な場合に表示する代替コンテンツを定義 <noscript>JavaScriptが無効です。</noscript>
<ol> 順序付きリストを定義 <ol><li>第一項目</li><li>第二項目</li></ol>
<p> 段落を定義 <p>これは段落のテキストです。</p>
<pre> 整形済みテキストを定義 <pre>function example() {}</pre>
<section> 文書の一般的なセクションを定義 <section><h2>セクションタイトル</h2><p>セクション内容...</p></section>
<table> 表を定義 <table><tr><th>ヘッダー</th></tr><tr><td>データ</td></tr></table>
<ul> 順序なしリストを定義 <ul><li>項目1</li><li>項目2</li></ul>

これらの要素は、Webページの構造を定義するために使用され、それぞれが異なる役割を果たします。各要素の詳細な使用方法や属性については、HTML5の公式仕様やリファレンスを参照することをお勧めします。

インライン要素

編集

HTML5のインライン要素の一覧を表形式で示します。以下の表は、主要なブロック要素の名前、説明、および使用例を提供します。

インライン要素
要素名 説明 用例
<a> ハイパーリンクを定義 <a href="https://example.com">リンク</a>
<abbr> 略語を定義 <abbr title="HyperText Markup Language">HTML</abbr>
<b> テキストを太字で表示（視覚的な強調） これは<b>重要な</b>ポイントです。
<bdi> 双方向テキストの分離 ユーザー名: <bdi>إيان</bdi>
<bdo> テキストの方向を上書き <bdo dir="rtl">This text will go right to left</bdo>
<br> 改行を挿入 一行目<br>二行目
<cite> 作品のタイトルを引用 <cite>源氏物語</cite>は日本の古典文学です。
<code> コンピューターコードを表示 関数は<code>function()</code>で定義します。
<data> 機械可読なデータを定義 <data value="398">ミニ・クーパー</data>
<dfn> 定義する用語を指定 <dfn>HTML</dfn>はウェブページを作成するための言語です。
<em> テキストを強調（意味的な強調） これは<em>非常に重要な</em>ポイントです。
<i> イタリック体で表示（異なる声や雰囲気を表現） 彼は<i>心の中で</i>つぶやいた。
<kbd> キーボード入力を表示 保存するには<kbd>Ctrl+S</kbd>を押してください。
<mark> マーカーで強調表示されたテキスト 最も<mark>重要な</mark>部分を強調します。
<q> 短い引用を定義 彼は<q>明日また来ます</q>と言った。
<rp> ルビをサポートしないブラウザ用の括弧 <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
<rt> ルビテキストを定義 <ruby>漢字<rt>かんじ</rt></ruby>
<rtc> ルビのコンテナを示す要素 <ruby><rb>漢字</rb><rtc><rt>かんじ</rt><rt>カンジ</rt></rtc></ruby>
<ruby> ルビ注釈を定義 <ruby>漢字<rt>かんじ</rt></ruby>
<s> 取り消し線を表示 <s>旧価格: 1000円</s> 新価格: 800円
<samp> プログラムの出力例を表示 エラーメッセージ: <samp>ファイルが見つかりません</samp>
<small> 小さな文字で表示（著作権表示など） <small>© 2024 Example Corp.</small>
<span> インラインテキストをグループ化 <span style="color: red;">赤いテキスト</span>
<strong> テキストを強く強調 これは<strong>非常に重要な</strong>警告です。
<sub> 下付き文字を表示 H<sub>2</sub>O
<sup> 上付き文字を表示 2<sup>3</sup> = 8
<time> 日付や時刻を定義 <time datetime="2024-01-01">元旦</time>
<u> 下線を表示（非推奨、スタイリングに使用） <u>下線付きテキスト</u>
<var> 変数を表示 方程式 <var>x</var> + <var>y</var> = 10
<wbr> 任意の改行位置を指定 This<wbr>Is<wbr>A<wbr>VeryLongWord

これらの要素は、HTML文書内で行内要素として使用され、ブロックレベル要素の中には配置できますが、直接他の行内要素の中には配置できません。

HTMLの書き方

編集

ここまで説明してきましたが、重要な「HTMLの書き方」について説明していなかったので、説明します。

「<」と「>」,「</」「>」で挟む

編集 
<開始タグ> ・・・ </終了タグ>

という順番を意識して、次の解説をお読みください。

今まで、「<body>」とか、「<link>」とか、とにかくタグを「<」「>」ではさみまくっていますが、この「<」で始まり、「>」で終わるタグを、「開始タグ」。

「</」で始まり、「>」で終わるタグを、「終了タグ」と言います。HTMLのタグは、「終了タグ」が無いものもありますが、(例えば「<link>」や「<input>」)絶対に「開始タグ」はあります。

id と classをつける

編集

idとclassをつけると、いいことがたくさんあります。例えば、CSSで特定の修飾をつけることができます。

idとclassの付け方

編集

id名は少しルールがありますが、自分でつけることができます。

名前のルール

編集

ルールは、

  • 空白(スペース)を入れない
  • 英数字とハイフン( - ) とアンダースコア( _ )で記述
  • 最初の文字は必ずアルファベット

idとclass どこに書く?

編集

説明が難しいので、HTMLコードで説明します。

<!DOCTYPE html>
<html>
    <head>
        <title>id class</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <p id="time">2022/11/1/12:00</p>
        <p class="when">編集時の時刻を教えて</p>
        <p class="when">日付も教えて</p>
    </body>
</html>

上を見たら分かる通り、「id」は使える回数が一つのページで一回。「class」は使える回数が無いのでどこでも使うことができます。

idとclassは、開始タグの「>」の前にスペースを入れて記述します。

idはなぜ一回しか使えないの?

編集

よく、ページでリンクを見かけることがあると思います。その中でも「目次」とかでまとめられているものは、同じページの中で「スー」と移動しています。これは、a要素のhref属性を「#id名」にしているからです。もしリンクを作って同じid名が複数存在したら、どこにリンクしたらいいのかブラウザは判別できないから、「id名を使うのは一回」と決まっているわけです。

<!-- ページ内のリンク -->
<a href="#idはなぜ一回しか使えないの?">idはなぜ一回しか使えないの?</a>

複数使う場合は、「class」を使用してください。

よく使うHTML要素(body要素内)

編集

HTML5では、<aside>, <main>, <section>, <header>, <footer>などが<body>要素の直接の子要素として使用されることが推奨されています。これらの要素はセマンティックなマークアップを促進し、ウェブページの構造をより意味深く、明確に表現するために設計されています。

ここでそれぞれの要素の役割と使用方法を説明します:

  1. <main>
    役割
    ページの主要なコンテンツを表す。一つのページには一つだけ使用すべきであり、通常はページ全体を包括する。
    例
         <body>
         <header>
             <!-- ヘッダーのコンテンツ -->
         </header>
         <main>
             <!-- ページの主要なコンテンツ -->
         </main>
         <footer>
             <!-- フッターのコンテンツ -->
         </footer>
     </body>
  2. <header>
    役割
    セクションやページ全体のヘッダーを表す。通常はブランドロゴやサイトのタイトル、ナビゲーションなどが含まれる。
    例
         <body>
         <header>
             <h1>サイトのタイトル</h1>
             <nav>
                 <!-- ナビゲーションのリンク -->
             </nav>
         </header>
         <main>
             <!-- ページの主要なコンテンツ -->
         </main>
         <footer>
             <!-- フッターのコンテンツ -->
         </footer>
     </body>
  3. <section>
    役割
    文書内で論理的に関連するコンテンツのグループを表す。見出し（<h1>〜<h6>）と共に使用されることが多い。
    例
         <body>
         <header>
             <!-- ヘッダーのコンテンツ -->
         </header>
         <main>
             <section>
                 <h2>セクションの見出し</h2>
                 <!-- セクションのコンテンツ -->
             </section>
         </main>
         <footer>
             <!-- フッターのコンテンツ -->
         </footer>
     </body>
  4. <aside>
    役割
    サイドバーや余談を表す。メインコンテンツから関連する情報や補足情報を分離して表示するために使用される。
    例
         <body>
         <header>
             <!-- ヘッダーのコンテンツ -->
         </header>
         <main>
             <!-- ページの主要なコンテンツ -->
         </main>
         <aside>
             <!-- サイドバーのコンテンツ -->
         </aside>
         <footer>
             <!-- フッターのコンテンツ -->
         </footer>
     </body>
  5. <footer>
    役割
    セクションやページ全体のフッターを表す。通常は著作権情報、連絡先情報、サイトマップなどが含まれる。
    例
         <body>
         <header>
             <!-- ヘッダーのコンテンツ -->
         </header>
         <main>
             <!-- ページの主要なコンテンツ -->
         </main>
         <footer>
             <p>&copy; 2024 サイト名. All Rights Reserved.</p>
         </footer>
     </body>

これらの要素を適切に使用することで、ウェブページの構造が明確になり、コンテンツの理解が容易になります。また、SEO（検索エンジン最適化）にも有利です。それぞれの要素は、それぞれが持つ役割と意味に従って使用することが重要です。

典型的なウェブページの構成例

編集

これらのHTML5要素を使った典型的なウェブページの構成例を以下に示します。各要素はセマンティックな意味を持ち、ページの構造化やコンテンツの意味付けに役立ちます。

典型的なウェブページの構成例
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>典型的なウェブページ</title>
    <style>
        /* CSS スタイルはここに記述 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }
        nav {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        nav a:hover {
            background-color: #555;
        }
        main {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            padding: 20px;
        }
        section {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 8px;
        }
        aside {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 8px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>サイトのタイトル</h1>
        <nav>
            <a href="#">ホーム</a>
            <a href="#">サービス</a>
            <a href="#">会社概要</a>
            <a href="#">お問い合わせ</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>最新のニュース</h2>
            <article>
                <h3>記事タイトル1</h3>
                <p>記事の本文...</p>
            </article>
            <article>
                <h3>記事タイトル2</h3>
                <p>記事の本文...</p>
            </article>
        </section>
        
        <aside>
            <h2>お知らせ</h2>
            <ul>
                <li>イベントのお知らせ</li>
                <li>新製品の発売情報</li>
                <li>重要なお知らせ</li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 サイトの著作権情報. All Rights Reserved.</p>
    </footer>
</body>
</html>
解説
  1. <header>
    サイトのタイトルとナビゲーションメニューを含む。
  2. <main>
    ページの主要なコンテンツを包括する。
    1. <section>
      最新のニュースなどのコンテンツをグループ化する。
    2. <article>
      各ニュース記事を表す。見出し (<h3>) と本文 (<p>) を含む。
    3. <aside>
      サイドバーにお知らせや重要な情報を表示する。
      <ul> と <li> を使用してリスト形式で情報を表現。
  3. <footer>
    サイトの著作権情報や必要なリンクを含む。

この例では、<header>、<main>、<section>、<aside>、<footer>がそれぞれ適切な役割を果たしています。これらの要素を使うことで、ページの構造が明確になり、検索エンジンやアクセシビリティにも良い影響を与えます。また、CSSを使ってそれぞれの要素に適切なスタイルを適用することで、ページ全体の見た目と使いやすさを向上させることができます。

HTML5の要素とその子要素について

編集

HTML5の要素とその子要素についての表を以下に示します。各要素が持つ子要素は多岐にわたるため、一部の代表的な子要素のみを挙げています。なお、実際に使用する際には詳細な仕様を確認することを推奨します。

HTML5の要素とその子要素
要素 子要素
<a> テキスト、画像、<abbr>, <audio>, <b>, <br>, <canvas>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <ins>, <mark>, <object>, <picture>, <q>, <s>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<abbr> テキスト
<address> テキスト、<a>, <abbr>, <b>, <br>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, 他
<article> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <figure>, <footer>, <header>, <i>, <iframe>, <img>, <ins>, <mark>, <nav>, <p>, <q>, <s>, <section>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<aside> テキスト、<a>, <abbr>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <figure>, <footer>, <header>, <i>, <iframe>, <img>, <ins>, <mark>, <nav>, <p>, <q>, <s>, <section>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<audio> <source>, テキスト
<b> テキスト
<blockquote> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<body> <article>, <aside>, <footer>, <header>, <main>, <nav>, <section>, テキスト
<br> -
<button> テキスト、<a>, <abbr>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<canvas> テキスト、<a>, <abbr>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<caption> テキスト、<colgroup>, <col>, <tr>, 他
<cite> テキスト
<code> テキスト
<col> -
<colgroup> <col>
<data> テキスト
<dd> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<del> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<details> <summary>, テキスト
<dfn> テキスト
<dialog> テキスト
<div> テキスト、<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <blockquote>, <br>, <button>, <canvas>, <caption>, <cite>, <code>, <data>, <dd>, <del>, <details>, <dfn>, <dialog>, <em>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <nav>, <ol>, <p>, <pre>, <q>, <s>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <tr>, <u>, <ul>, <var>, <video>, 他
<dl> <dt>, <dd>
<dt> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<em> テキスト
<embed> -
<fieldset> <legend>, テキスト
<figcaption> テキスト
<figure> <figcaption>, <img>, テキスト
<footer> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<form> <button>, <fieldset>, <input>, <label>, <legend>, <optgroup>, <option>, <select>, <textarea>, テキスト
<h1> - <h6> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<head> <base>, <link>, <meta>, <script>, <style>, <title>, テキスト
<header> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <nav>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<hr> -
<i> テキスト
<iframe> テキスト
<img> -
<input> -
<ins> テキスト
<kbd> テキスト
<label> テキスト、<abbr>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<legend> テキスト
<li> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<main> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<map> <area>, テキスト
<mark> テキスト
<meta> -
<nav> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<noscript> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<object> <param>, <embed>, テキスト
<ol> <li>, テキスト
<optgroup> <option>
<option> テキスト
<output> テキスト
<p> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<param> -
<picture> <source>, <img>
<pre> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<q> テキスト
<rp> テキスト
<rt> テキスト
<ruby> <rb>, <rt>, <rp>, テキスト
<s> テキスト
<samp> テキスト
<script> テキスト
<section> テキスト、<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <blockquote>, <br>, <button>, <canvas>, <caption>, <cite>, <code>, <data>, <dd>, <del>, <details>, <dfn>, <dialog>, <em>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <nav>, <ol>, <p>, <pre>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <tr>, <u>, <ul>, <var>, <video>, 他
<select> <optgroup>, <option>, テキスト
<small> テキスト
<source> -
<span> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <q>, <s>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<strong> テキスト
<style> テキスト
<sub> テキスト
<summary> テキスト
<sup> テキスト
<table> <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, テキスト
<tbody> <tr>
<td> テキスト、<a>, <abbr>, <address>, <audio>, <b>, <br>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <img>, <ins>, <mark>, <p>, <q>, <s>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <video>, 他
<textarea> テキスト
<tfoot> <tr>
<th> テキスト
<thead> <tr>
<time> テキスト
<title> テキスト
<tr> <td>, <th>
<track> -
<u> テキスト
<ul> <li>, テキスト
<var> テキスト
<video> <source>, <track>, テキスト

この表は、HTML5で定義されている主要な要素と、それぞれが持つ子要素を一部抜粋して示したものです。各要素が実際に持つ子要素はさまざまであり、具体的な使用方法についてはHTMLの仕様書やドキュメントを参照することが重要です。

参考文献等

編集

HTML

編集
 
Wikipedia
 ウィキペディアにHTMLの記事があります。

その他

編集

ページのHTMLを確認するには

編集

Google chrome

編集
  1. 右上の「︙」を選択
  2. 「その他のツール」から、「デペロッパーツール」を選択
  3. 「要素」を選ぶ

Microsoft Edge

編集
  1. 右上の「…」を選択
  2. 「開発者ツール」を選択
  3. 「要素」を選ぶ

Firefox

編集
  1. 右上の「ハンバーガーボタン」を選択
  2. 「ウェブ開発」を選択
  3. 「インスペクター」を選択

Internet Explorer

編集
  1. 右上の「⚙」みたいなマークを選択
  2. F12 開発者ツールを選択
  3. DOM Explorerを選択

(ただし、最近のWindowsには「Microsoft Edge」が搭載されています)

Safari

編集
  1. 「Safari」の「環境設定」を選択
  2. 「詳細」を選択
  3. 「メニューバーに”開発”メニューを表示」を選択
  4. 「⌘ + ⌥ + C」でJavaScriptコンソールを表示させる
  5. 要素を選択


  ラベル HTML
要素一覧 		テーブル  
"https://ja.wikibooks.org/w/index.php?title=HTML/要素一覧&oldid=251533" より作成