このサイトではJavaScriptが必要です。

HTML基本要素集

1. テキストセマンティクス

テキストの意味付け

これは強調テキストとより強い強調のサンプルです。

ハイライトされたテキストや小さいテキストも使えます。

引用には引用元を示したり、インライン引用も使えます。

これはブロック引用です。長い引用を表示するのに適しています。
引用元著者

コードの例: const example = "Hello";


function greet() {
    console.log("Hello, world!");
}
                

変数などは x で表現できます。

キーボード入力は Ctrl+S で表現します。

計算結果は 404 Not Found のように表示します。

編集履歴

これは削除された挿入されたテキストの例です。

これは打ち消し線の例です。

2. グループ化コンテンツ

リスト要素

順序なしリスト

  • リストアイテム 1
  • リストアイテム 2
    • ネストされたリストアイテム 2.1
    • ネストされたリストアイテム 2.2
  • リストアイテム 3

順序付きリスト

  1. 最初のステップ
  2. 2番目のステップ
  3. 3番目のステップ

定義リスト

HTML
Hyper Text Markup Language - Webページを作成するための標準マークアップ言語です。
CSS
Cascading Style Sheets - Webページのスタイルを定義するための言語です。

メディア要素

サンプル画像
図1: サンプル画像の説明
レスポンシブ画像

3. テーブルとフォーム

テーブル

HTML要素の分類
カテゴリ 要素例 説明
セクショニング section, article, nav 文書の構造を定義します
テキストセマンティクス em, strong, code テキストの意味を定義します
フォーム input, button, select ユーザー入力を処理します
詳細は仕様書を参照してください

フォーム

個人情報
アカウント情報
英数字のみ使用可能
興味のある技術
使用デバイス

4. インタラクティブ要素

詳細を表示

これは details/summary 要素の使用例です。クリックで開閉できるアコーディオンを簡単に作成できます。

ダイアログタイトル

これはモーダルダイアログの例です。

5. キャンバスと描画

6. カスタム要素

カスタム要素の例:

これはWeb Componentsを使用したカスタム要素の例です。