• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

HTML5の新しい要素

以下は新しいHTML5要素のリスト タグがどのように使用されているかの説明です


新しい構造要素

HTML5はより優れた文書構造のために新しい要素を提供しています

Tag 説明
<article> 文書内の記事を定義します
<aside> ページコンテンツとは別にコンテンツを定義します
<bdi> それ以外のテキストとは異なる方向にフォーマットされている可能性のあるテキストの一部を分離します
<details> ユーザーが表示または非表示できる追加の詳細を定義します
<dialog> ダイアログボックスまたはウィンドウを定義します
<figcaption> <figure> 要素のキャプションを定義します
<figure> 自己完結型のコンテンツを定義します
<footer> ドキュメントまたはセクションのフッターを定義します
<header> 文書またはセクションのヘッダーを定義します
<main> ドキュメントのメインコンテンツを定義します
<mark> マーク付き/強調表示されたテキストを定義します
<meter> 既知の範囲(ゲージ)内でスカラー測定を定義します
<nav> ナビゲーションリンクを定義します
<progress> タスクの進行状況を表します
<rp> ルビ注釈をサポートしないブラウザーで表示するものを定義します
<rt> 文字の説明/発音を定義します(東アジアのタイポグラフィ用)
<ruby> ルビ注釈を定義します(東アジアのタイポグラフィ用)
<section> ドキュメント内のセクションを定義します
<summary> <details> 要素の表示可能な見出しを定義します
<time> 日付/時刻を定義します
<wbr> 可能な改行を定義します

スポンサーリンク

新しいフォーム要素

Tag 説明
<datalist> 入力コントロールの事前定義オプションのリストを指定します
<output> 計算の結果を定義します

新しい入力タイプ

新しい入力タイプ 新しい入力属性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

スポンサーリンク

HTML5 新しい属性の構文

HTML 5では、属性に4つの異なる構文を使用できます。

この例は <input> タグで使用されるさまざまな構文を示しています。

Type Example
Empty <input type=”text” value=”John” disabled>
Unquoted <input type=”text” value=John>
Double-quoted <input type=”text” value=”John Doe”>
Single-quoted <input type=”text” value=’John Doe’>

HTML 5では、属性に何が必要かに応じて、4つの構文すべてを使用できます。


HTML5 グラフィック

Tag 説明
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics

スポンサーリンク

新しいメディア要素

Tag 説明
<audio> 音声コンテンツを定義します
<embed> 外部(非HTML)アプリケーションのコンテナを定義します
<source> メディア要素の複数のメディアリソースを定義します (<video> や <audio>)
<track> メディア要素 (<video> や <audio>)のテキストトラックを定義します
<video> ビデオまたは映画を定義します

コメントを残す