HTML要素の使い方・サンプルコードまとめ

Sara

HTMLについて

HTML の基本
グローバル属性
MIME タイプ
リンク種別まとめ

メインルート

  • <!DOCTYPE>:ドキュメントタイプの宣言
  • <html>:HTML文書の定義

文書情報・メタデータ

  • <base>:相対パスの基準URL
  • <head>:HTML文書のヘッダ情報
  • <link>:外部ファイルを指定
  • <meta>:メタデータを記述
  • <style>:スタイル情報を記述
  • <title>:HTML文書のタイトルを指定

セクショニングルート

  • <body>:HTML文書の本文

コンテンツ

テキストコンテンツ

  • <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>:テーブル行

フォーム

インタラクティブ要素

  • <details>:折りたたみ式のウィジェットを作成
  • <dialog>:ダイアログを作成
  • <summary>:details 要素にキャプションをつける

ウェブコンポーネント

  • <template>:JavaScript で追加・描画する HTML
記事URLをコピーしました