HTML Docs通読ログ1
HTMLのdocumentをちゃんと見てみた
友達が意外と知らないタグあるなぁといっていたので、自分が知らなかったタグをまとめました。
ここを参考に
文書メタデータ
<base>
全ての相対URLの起点となるURLが指定できる。
一つだけ置ける。
<head>
文書に関する機械可読な情報がある。
<meta>
base,link,script,style,title以外。
コンテンツ区分
書いてないけどh1~h6もここに含まれる。
<address>
これを含んでいるHTMLが個人、団体、組織の連絡先を提供している事を示している。
<article>
HTML の
<article>要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
ちょっと何言ってるかよくわからん。
<aside>
直接メインコンテンツと関係ない部分。
サイドバー、コールアウトボックスを表現するのにつかわれる。
<header>
導入部的なコンテンツ、一般的にはナビゲーション等のグループを表す。
見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。
<main>
bodyの主要な部分
<nav>
現在の文書内の部分やほかの文書へのナビゲーションリンクを提供するためのセクションを表す。
<section>
要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。
テキストコンテンツ
bodyの中にあるやつ。
<blockquote>
引用。
cite属性で引用元のURL,<cite>で引用元タイトルを示せる。
<dl>
説明リスト
キーと値がペアのリストの表示に使われる
<dt>
<dl>内で使われるkey。
<dd>
<dl>内で使われるvalue。
<hr>
段落と段落の間に置かれる。
テーマの意味的な区切り、話題の転換とか。
<menu>
ユーザーが実行、アクティブ化できるコマンドのグループを表す。
コンテキストメニューとか該当する
インラインテキスト意味付け
<abbr>
略語であることを明示できる。
title属性で何の略語なのかをかける。
<b>
重要なものにつける。
太字のためにつけてはならない。
<bdi>
書字方向をブラウザの既定の設定から独立して扱うように指示する。
CSSでやったほうがよくない？。
<bdo>
現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。
CSSでやったほうがよくない？その2。
<dfn>
定義要素。
定義区や文脈の中で定義している用語。
<dfn> の直近の祖先である p 要素、 dt/dd の組み合わせ、 section 要素が用語の定義とみなされる。
<i>
他と区別するテキストの範囲を示す。
けしてイタリック帯のために使ってはならない。
<mark>
周囲の文脈の中でマークを付けた部分の関連性や重要性のために、参照や記述の目的で目立たせる文字列。
<ruby>
ルビ
<rp> <rt>
ルビの表示に対応していないブラウザの場合の物。
もうそんなんないだろうしつかわんくてよくね？
<s>
取り消し線だけどもう違うみたい。使用禁止。
<samp>
コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用される。
<small>
著作権表示とか、法的表記のような注釈や小さく表示される分のこと。
<strong>
重要性、緊急性が高いテキスト。
<sub>,<sup>
下付き文字要素と上付き文字要素。
<time>
特定の字の区間
datetime属性に機械可読な形式の日付を記述できる
<u>
非言語的注釈要素。
非言語的に注釈があることを示す。
<var>
数式やプログラムコード内の変数の名前を示す。
wbr
改行可能位置。
改行が必要でない場合は改行しない。
画像とマルチメディア
<area>
イメージマップの中でクリック可能な領域をあらかじめ定義する。
<track>
<audio>と<video>の子として使われる。
字幕とか時間指定されたテキストトラックを指定できる。
トラックには.vtt(WebVTT形式)が扱われる。
埋め込みコンテンツ
<embed>
外部のコンテンツを文書中の指定された場所に埋め込みます。
<object>
プラグインによって扱われるリソースなどのように扱われる外部リソース。
<picture>
0個以上のsourceと一つのimgを含む。
画面や端末に応じた画像を提供する。
<portal>
他のHTMLページを現在のページに埋め込み新しいページへの移動がスムーズにできるようにできる。?(スムーズにできるか？)
SVG MathML
<math>
MathMLの最上位要素。
スクリプティング
<noscript>
script未対応(or javascriptオフ)の場合に表示される内容を書き込める。
<script>
javascript以外でもwebGLのGLSL shaderプログラミング言語や、JSONなども使用できる。
編集範囲の特定
<del>
文書から削除された文字列の範囲を表す。
<ins>
文章中に追加されたテキストの範囲を表す。
テーブル
<colgroup>
表内の列のグループを定義する。
フォーム
<datalist>
他のコントロールで利用可能な値を表現する一連の option 要素
セレクトボックスと違い自分でも値を入力できる。
あくまで入力補助のためのタグ
<fieldset>
labelなどのいくつかのコントロールをグループ化できる
<legend>
fieldsetの内容のキャプション
<meter>
吉の範囲内のスカラー地、又は小数値
<optgroup>
select要素内の選択肢のグループ。
<potion>
- select
- optgroup
- datalist
内で項目を定義するのにつかわれる。
<output>
サイト側が出力を表示する場所。
<progress>
プログレスバー。
インタラクティブ要素
<details>
ウィジェットが開いた状態になった時のみ情報が表示される折り畳みウィジェットを作成する。
概要やラベルはsummaryで提供する必要がある。
<dialog>
ダイアログボックスや消すことが出来るアラートとか。
<summary>
detailsの折りたたまれた状態の説明。
クリックすると親のdetails要素の開閉状態を切り替えることが出来る。
ウェブコンポーネント
独自の要素を作成して通常のHTML要素であるかのように使用できる。
独自版の標準 HTML 要素を作成することもできる。
ただだいぶjsと組み合わせる必要があるみたい。
参考
Discussion