HTML要素の使い方・サンプルコードまとめ
Sara
目次
HTMLについて
HTML の基本
グローバル属性
MIME タイプ
リンク種別まとめ
メインルート
- <!DOCTYPE>：ドキュメントタイプの宣言
- <html>：HTML文書の定義
文書情報・メタデータ
- <base>：相対パスの基準URL
- <head>：HTML文書のヘッダ情報
- <link>：外部ファイルを指定
- <meta>：メタデータを記述
- <style>：スタイル情報を記述
- <title>：HTML文書のタイトルを指定
セクショニングルート
- <body>：HTML文書の本文
コンテンツ
- <address>：連絡先情報を示す
- <article>：独立した記事を示す
- <aside>：補足情報を示す
- <footer>：フッター情報
- <header>：ヘッダー情報
- <main>：主要なコンテンツを示す
- <nav>：ナビゲーションリンク
- <section>：セクションを示す
テキストコンテンツ
- <h1>~<h6>：見出し
- <blockquote>：引用文
- <dd>：用語リストの説明部分
- <div>：特別な意味を持たない範囲
- <dl>：用語リスト
- <dt>：用語リストの用語部分
- <figcaption>：figure要素のキャプション（表題）
- <figure>：図・表などの自己完結型のコンテンツ
- <hr>：段落の区切る水平線
- <li>：リスト項目
- <ol>：順序つきのリスト
- <p>：テキストの段落
- <pre>：整形済みテキスト
- <ul>：順序がないリスト
テキスト装飾
- <a>：ハイパーリンクを作成
- <abbr>：略語や頭字語
- <b>：重要性が低いテキストを太字にする
- <bdi>：テキストの書字方向の区別
- <bdo>：テキストの表示方向を指定
- <br>：テキストの改行
- <cite>：創作物のタイトル
- <code>：コードを表示する
- <data>：読み取り可能なデータ
- <del>：内容が削除されたことを示す
- <dfn>：定義する用語
- <em>：重要性が低いテキストを強調する
- <i>：通常のテキストと区別する
- <ins>：内容の追加を示す
- <kbd>：ユーザーによって入力される内容を示す
- <mark>：ユーザーの行動・操作に関するテキストを目立たせる
- <q>：短い引用文
- <rb>：ルビを振る文字
- <rp>：ルビ文字列
- <rt>：ルビ文字列を囲む記号
- <rtc>：複数のルビを振る
- <ruby>：ルビを振る
- <s>：無効になった内容を示す
- <samp>：プログラムの出力結果を表示する
- <small>：注釈など小さく表示するテキスト
- <span>：汎用的に使うことができる要素
- <strong>：重要性が高いテキスト
- <sub>：下付き文字を表示する
- <sup>：上付き文字を表示する
- <time>：正確な日付を示す
- <u>：文章中のスペルミスや中国語の固有名詞
- <var>：コードや数式内にある変数を示す
- <wbr>：テキストを改行する位置を指定
画像・メディア
- <area>：map要素にホットスポット領域を設定
- <audio>：音声ファイルを読み込む
- <img>：画像ファイルを表示する
- <map>：イメージマップ (クリック可能な領域)を作成
- <track>：字幕・キャプションなどのトラック情報をつける
- <video>：動画ファイルを読み込む
埋め込み要素
- <embed>：外部アプリケーションやコンテンツを埋め込む
- <iframe>：HTML ページを埋め込む
- <object>：外部のリソースやコンテンツを埋め込む
- <param>：object要素の引数
- <picture>：画面サイズや端末に応じて表示するリソースを切り替える
- <source>：画面サイズや端末に応じて切り替えるリソースを指定する
- <svg>：SVG（Scalable Vector Graphics）を埋め込む
スクリプト
- <canvas>：グラフィックやアニメーションを描画する
- <noscript>：JavaScriptが無効時に表示する内容
- <script>：JavaScript コードや外部のファイルの読み込み
テーブル
- <caption>：テーブルのタイトル
- <col>：テーブル列
- <colgroup>：テーブル列のグループ
- <table>：テーブルを作成
- <tbody>：テーブル本体部分の行グループ
- <td>：セル
- <tfoot>：フッターの行グループ
- <th>：見出しセル
- <thead>：ヘッダーの行グループ
- <tr>：テーブル行
フォーム
- <button>：ボタンの作成
- <datalist>：入力候補のリスト
- <fieldset>：入力欄をグループ化
- <form>：フォームの作成
- <input>：フォーム入力欄の作成
- <input type=”button”>：ボタンを作成
- <input type=”checkbox”>：チェックボックスを作成
- <input type=”color”>：色を選択
- <input type=”date”>：年月日を選択
- <input type=”datetime-local”>：年月日と時刻を選択
- <input type=”email”>：メールアドレス入力欄
- <input type=”file”>：ファイルを選択
- <input type=”hidden”>：隠しデータ
- <input type=”image”>：送信ボタンを画像で作成
- <input type=”month”>：年月を選択
- <input type=”number”>：数値の入力欄
- <input type=”password”>：パスワード入力欄
- <input type=”radio”>：ラジオボタンを作成
- <input type=”range”>：スライダーで数値を選択
- <input type=”reset”>：入力リセットボタンを作成
- <input type=”search”>：検索キーワードの入力欄
- <input type=”submit”>：送信ボタンを作成
- <input type=”tel”>：電話番号の入力欄
- <input type=”text”>：テキスト入力欄
- <input type=”time”>：時刻を選択
- <input type=”url”>：URLの入力欄
- <input type=”week”>：年と週を選択
- <label>：ラベルの作成
- <legend>：fieldset要素に見出しをつける
- <meter>：上限・下限がある特定の範囲を表す
- <optgroup>：リストの選択肢をグループ分け
- <option>：リストの選択肢を作成
- <output>：ユーザー操作による結果をJavaScriptで表示する
- <progress>：進捗状況を表すプログレスバー
- <select>：セレクトメニューの作成
- <textarea>：複数行のテキスト入力欄を作成
インタラクティブ要素
ウェブコンポーネント
- <template>：JavaScript で追加・描画する HTML