HTML要素
| HTML |
|---|
 |
HTML
要素 の構成 [編集 ]
<strong>強調 部分 です。</strong>
<と>で</と>で
「
また、XMLでは、<と/>で<elem></elem>のように
HTML構文 とXML構文 との違 い[編集 ]
HTMLを
HTML
タグの省略 [編集 ]
HTML[編集 ]
HTML 4.01までは、SGMLの
XML[編集 ]
XMLはタグの
空 要素 タグを使 い「<」や「要素 名 /><」を要素 名 />使 う。開始 タグの直後 に終了 タグを記述 する（「<」）。要素 名 ></要素 名 >
なお、/>」の
属性 の省略 [編集 ]
HTML[編集 ]
属性 値 に以下 の文字 を含 まない場合 、属性 値 を括 る引用 符 が省略 可能 [8][9]。- ASCII
空白 文字 - U+0022
二 重 引用 符 - U+0027 アポストロフィー
- U+003D
等号 - U+003C
不等号 (より小 ) - U+003E
不等号 (より大 ) - U+0060 グレイヴ・アクセント
- ASCII
空 属性 :属性 名 が択一 式 である場合 に属性 名 が省略 可能 。
XML[編集 ]
XHL
HTML要素 一覧 [編集 ]
基本 的 な構造 を表 す要素 [編集 ]
html- HTML
文書 のルート要素 (document root element)。 head- HTML
文書 のヘッダ部分 (document head) を指定 する要素 。HTML文書 自身 に関 する情報 （例 ：タイトルやスタイルシートに関 する情報 など）を指定 できる。 body- HTML
文書 の本体 部分 (document body) を指定 する要素 。
HTML
HTML
<html>
<head>
head要素 以下 に取 ることができる要素 群 。
title要素 などをはじめとしたそのHTML文書 自身 に関 する情報 からなる。
</head>
<body>
body要素 以下 に取 ることができる要素 群 。
HTML文書 の本文 となる情報 を記述 する。
</body>
</html>
ヘッダ内 に記述 可能 な要素 [編集 ]
title- タイトル (document title) を
指定 する。多 くのウェブブラウザ実装 系 では、タイトルバーに表示 される。例 えば、このページのタイトルは "HTML要素 - Wikipedia" である。 - HTML
文書 で唯一 必須 かつ省略 のできない要素 。 base相対 パスの基準 URL (document base URI) をhref属性 で指定 する。
ヘッダ内 で複数 記述 できる要素 (repeatable head elements)[編集 ]
link自分 自身 とhref属性 で指定 したファイルとの関係 をrel属性 で定義 する。- rel
属性 はHTML4.01で有効 なものには alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmarkがあり、他 に使 われるものとして、shortcut iconがある。 meta- 「meta
要素 」も参照 文書 の情報 (generic metainformation) を定義 する。object埋 め込 みオブジェクト (generic embedded object) であることを示 す。大抵 の場合 はインライン要素 として使用 する。data属性 にURI、type属性 にMIMEタイプ(image/gif等 )を指定 することでFLASHや音楽 など様々 な種類 のオブジェクトを出力 する事 ができる。内容 には代替 （オブジェクト要素 も可 ）を記述 する。例 えば一 番外 からオブジェクト要素 (FLASH)、オブジェクト要素 （画像 ）、説明 文 、のように入 れ子 にするとFLASHの利用 できない環境 では画像 が、FLASHと画像 の利用 できない環境 では説明 文 が出力 される。これはimg要素 等 のalt属性 と比 べると高性能 な代替 システムであるが、これに対応 しないウェブブラウザも少 なくない。param- プロパティ
値 の設定 (named property value) を行 う。object要素 で使用 するメディアに対 しての初期 値 を設定 するために使用 する。 内容 は空 で終了 タグは存在 しない。style- スタイル
情報 (style info) を記述 する。 - type
属性 の記述 が必要 （text/css等 ）。 script- スクリプト (script statements) を
記述 する。 - type
属性 （text/javascriptなど）とmeta要素 でスクリプトタイプの宣言 が必要 。
文書 の更新 情報 を示 す要素 [編集 ]
ins追加 された文書 (inserted text) であることを示 す。- datetime
属性 に追加 日時 を記載 できる。 del削除 された文書 (deleted text) であることを示 す。- datetime
属性 に削除 日時 を記載 できる。
ブロックレベル要素 [編集 ]
p段落 (paragraph) を構成 する。blockquote引用 文 (long quotation) であることを示 す。- ウェブブラウザによってはインデントして
表示 することがあるが、この要素 はあくまで引用 目的 に用 いるべきであり、単 にインデントするために用 いるのは好 ましくない。また、内容 にクォーテーションマーク（「"」 や 「'」）を用 いるのは避 けるほうが良 い。 - cite
属性 で引用 元 ・出典 を明示 することができる。 pre整形 済 みテキスト (preformatted text) の節 であることを示 す。内容 にはインライン要素 を含 める事 もできるがimg、object、big、small、sub、sup要素 は使用 できない。- ウェブブラウザのサイズによる
折 り返 しがされなくなるため、リキッドレイアウトを行 うには不向 き。 div- ブロックレベルでのスタイルコンテナ。
- この
要素 自体 に意味 は無 い。文書 の構造 を示 すときや、既存 の要素 には含 められない物 の代用 要素 として使用 する。 noscript- スクリプトが
動作 しない環境 での代替 コンテンツ (alternate content container for non script-based rendering) であることを示 す。スクリプトが動作 する環境 では無視 される。 代替 となりうるコンテンツを示 す要素 である。hr水平 線 (horizontal rule) を示 す。内容 は空 で終了 タグは存在 しない。address著者 の情報 ・連絡 方法 (information on author) を示 す。- メールアドレスを
記述 するのが一般 的 。ただし、address要素 内 のメールアドレスがメールアドレス検索 ロボットの標的 になりスパムメールなどの被害 に遭 う可能 性 もある。 form- コントロール
要素 を纏 めた入 れ物 であることを示 す(interactive form)。 - action
属性 が必須 で、入力 されたデータの処理 を行 うURIを指定 する。 fieldset- フォームコントロールのグループ (form control group) を
示 す。 関連 したフォームコントロールを記述 することで利便 性 を高 めることが出来 る。legend- fieldset
要素 の表題 (fieldset legend) を示 す。
<form action="http://...">
<fieldset>
<legend>名前 </legend>
<label>姓 :<input type="text"></label>
<label>名 :<input type="text"></label>
</fieldset>
<fieldset>
<legend>住所 </legend>
<label>県 :<input type="text"></label>
<label>市 :<input type="text"></label>
</fieldset>
</form>
見出 し (heading)[編集 ]
h1〜h6文章 の見出 し (heading) を示 す。h1が最 上位 の見出 しで、h6が最下位 の見出 し。
リスト (list)[編集 ]
ul順序 なしリスト (unordered list) を示 す。一 つ以上 のli要素 を含 む必要 がある。ol順序 付 きリスト (ordered list) を示 す。一 つ以上 のli要素 を含 む必要 がある。li- リストの
項目 (list items) を示 す。ブロック要素 を含 められるため、入 れ子 のリストを作成 することもできる。 dl定義 のリスト (definition list) であることを示 す。dt要素 かdd要素 を1つ以上 含 む必要 がある。dt定義 する用語 (definition term) であることを示 す。dd定義 の説明 (definition description) であることを示 す。
表 を構成 する要素 [編集 ]
また
table表 (table) を構成 する要素 の大枠 を示 す。summary属性 に表 の要約 ・解説 を記述 する。内容 の要素 には細 かく順番 が規定 されていて以下 の通 りである。- 0
個 か1個 のcaption要素 、0個 以上 のcolgroup要素 とcol要素 、0個 以上 のthead要素 、0個 以上 のtfoot要素 、1個 以上 のtbody要素 。 caption表題 (table caption) を示 す。table要素 の直下 に記述 する。thead、tfoot、tbody- それぞれヘッダ (table header)、フッタ (table footer)、
本体 (table body) で、表 内 での節 (table section) を示 す。 内容 はtr要素 のみで、1つ以上 の記述 が必要 である。また、各 要素 内 においての列 の数 は等 しくなくてはならない。colgroup構造 的 な列 のグループ (table column group) を示 す。- グループ
化 させるには2つの方法 があり、span属性 で列 数 を指定 する方法 かcol属性 を列 数 分 記述 する方法 である。 col列 のグループ (table column) を示 す。- colgroup
要素 と違 い、構造 的 なグループを示 さず、スタイルの指定 を主 としたグループ化 を行 う。 - span
属性 でグループ化 する列 数 を指定 する。内容 は空 で終了 タグは存在 しない。 tr表 内 の行 (table row)を示 す。内容 に1つ以上 のth要素 かtd要素 が必要 。th、td- それぞれ、ヘッダのセル (table header cell)、データのセル (table data cell) を
示 す。 視覚 系 でないユーザーエージェントに対応 する為 にいくつかの整形 方法 がある。
- ヘッダ
要素 のid属性 と、データ要素 のheaders属性 を結 びつける (同 じ値 を指定 する)。これによって音声 ブラウザではヘッダとデータの内容 を交互 に読 み上 げることが出来 る。 上記 の省略 系 といえるscope属性 を用 いる。ヘッダ属性 にcolを指定 することで縦 方向 ・rowを指定 することで横 方向 のデータと結 びつけることが出来 る。- ヘッダ
要素 にabbr属性 で短縮 系 を指定 する。例 えば、ヘッダ要素 の内容 が"価格 （円 ）"等 の場合 、逐一 読 み上 げるのは冗長 になる。abbr属性 が"価格 "となっていれば、「価格 100」等 と読 み上 げられ、冗長 さは解消 される。
<table summary="取 り扱 い商品 の一覧 表 。商品 ごとに価格 ・備考 を表記 する。" border="1">
<capthion>商品 一覧 </capthion>
<colgroup class="head" span="1"></colgroup>
<colgroup class="data" span="2"></colgroup>
<thead>
<tr>
<th id="t1">商品 名 </th>
<th id="t2" abbr="価格 ">価格 （円 ）</th>
<th id="t3" abbr="備考 ">備考 （産地 ・在庫 など）</th>
</tr>
</thead>
<tbody>
<tr><td headers="t1">りんご</td><td headers="t2">100</td><td headers="t3">青森 産 </td></tr>
<tr><td headers="t1">みかん</td><td headers="t2">150</td><td headers="t3">在庫 無 し</td></tr>
</tbody>
</table>
インライン要素 [編集 ]
物理 要素 (fontstyle)[編集 ]
i、bなどはHTML5
i文字 を斜体 (italic) にする。（例 ：html）b文字 を太字 (bold) にする。（例 ：html）u文字 に下線 (underline) を引 く。（例 ：html）- HTML 4.01 でCSSで
代用 可能 で非 推奨 となった - HTML5 で
復活 し、意味 が「注釈 自体 は明示 的 に表現 されているものの、その注釈 内容 が具体 的 に明記 されていないもの。」と再 定義 された。 sstrike文字 に中央 線 (strike-through) を引 く。（例 ：html,html）CSSで代用 可能 で非 推奨 strikeはHTML5で廃止 された。sあるいはdelで代替 。big文字 を大 きく(large)する。（例 ：html）- HTML5で
廃止 された。 small文字 を小 さく(small)する。（例 ：html）
論理 要素 (phrase)[編集 ]
em強調 (Indicates emphasis) する。（例 ：html）strong強 く強調 (Indicates stronger emphasis) する。（例 ：html）dfn定義 された用語 (defining) を示 す。code- プログラムなどのソースコード (computer code) を
示 す。 samp- プログラムなどによる
出力 のサンプル (sample output from programs, scripts, etc.) を示 す。 kbd- ユーザが
入力 する文字 (text to be entered by the user) を示 す。 - アプリケーションのチュートリアルなどでユーザが
自由 に入力 できる箇所 であることを示 す際 などに用 いる。 var- プログラムなどに
用 いる変数 (variable or program argument) を示 す。 cite出典 (citation or a reference) を示 すabbr略語 (abbreviated form) を示 す。- title
属性 に略 さない状態 の語 を明示 することができる。 acronym頭字 語 (acronym) を示 す。- abbr
要素 と同様 に、title属性 に略 さない状態 の語 を明示 することができる。 - HTML5より
非 推奨 となっており、代 わりにabbr要素 を使用 することが推奨 されている。
特別 な要素 (special)[編集 ]
a- アンカー (anchor) であることを
示 す。href属性 にリンク先 URIを指定 しハイパーリンクを作成 する。 内容 にはリンク先 の概要 を表記 する。内容 だけを見 てリンク先 が判断 できることが望 ましく、「ここをクリック」等 は使 うべきでないとされる。内容 が冗長 になる場合 はtitle属性 で説明 を付加 することができる。- accesskey
属性 でショートカットキーを設定 することができ、ユーザビリティの向上 が期待 できる。 audio- 「HTML5オーディオ」も
参照 音声 再生 。但 し、ファイルによっては対応 コーデックを導入 しないと再生 が実現 できない場合 がある。詳細 は上記 の内部 リンクを参照 。canvas- 「canvas
要素 」も参照 解像度 に依存 したビットマップキャンバスを表示 。グラフやゲーム用 の表示 画像 を描画 することができる。HTML5で導入 された。かつては Internet Explorer向 けに、Adobe FlashやVMLなどを使 い、canvas タグを実現 するライブラリがあった。img埋 め込 み画像 (Embedded image) であることを示 す。src属性 にURIを指定 し画像 を表示 させる。内容 は空 で終了 タグは存在 しない。- alt
属性 で画像 の説明 を記述 することが必要 である。これは画像 に対応 できないユーザーのため。単 にレイアウト用 の画像 （スペーサー画像 等 ）の場合 にはaltは空 にする。また「画像 が表示 できません」や「画像 」と言 った代替 テキストはユーザにとっては有用 でなく、「犬 の写真 」など簡素 な説明 や「飼 い犬 のポチが…」など情景 が把握 できる説明 が有用 である。説明 が長文 になる場合 longdesc属性 にURIを指定 し、説明 の文書 を示 す事 もできる。 他 のドメインの画像 を指定 することも可能 であるため、著作 権 の観点 から問題 視 されることもある（詳細 は無断 リンクの項目 を参照 ）。video- 「video
要素 」も参照 動画 再生 。前者 のaudio要素 と同様 、ファイルによっては対応 コーデックを導入 しないと再生 が実現 できない場合 がある。
コメント[編集 ]
<!-- ここにコメントを書 く -->- コメントは、
文書 ソースの任意 の場所 に追加 することができる。たとえば doctype の前 にもコメントを記入 できる。しかし、他 のタグ内 に入 れることはできない。ただし、doctype の前 に空白 文字 以外 の文字 があると、Internet Explorer 6 は ブラウザの互換 モードでその文書 をひらく仕様 になっている。
コメント
AttributeとProperty[編集 ]
HTML
定義 [編集 ]
HTMLの
| spec | formal name | formal alt. name | informal name |
|---|---|---|---|
| HTML | attributes | Content attributes | attributes |
| Web IDL | attributes | IDL attributes | properties |
リフレクション[編集 ]
このようにHTML
参考 [編集 ]
脚注 [編集 ]
注釈 [編集 ]
- ^
開始 タグ・終了 タグをあわせてHTMLタグ（もしくはタグ）と呼 ぶこともあるが仕様 で定 められた表現 ではない。
出典 [編集 ]
- ^ “HTML Standard 12.2 Parsing HTML documents”. WHATWG (2019
年 10月 31日 ). 2019年 10月 27日 閲覧 。 - ^ “WHATWG HTML
標準 HTML Standard 12.2. HTML文書 の構文 解析 法 ”. ウェブ関連 仕様 日本語 訳 (2019年 10月 25日 ). 2019年 10月 27日 閲覧 。 - ^ “HTML Standard, Developer's Edition 12.1.2.4 Optional tags”. WHATWG (2019
年 10月 31日 ). 2019年 11月2日 閲覧 。 - ^ “HTML Standard, Developer's Edition
日本語 訳 12.1.2.4任意 のタグ”. 2019年 11月2日 閲覧 。 - ^ “HTML Standard, Developer's Edition 12.1.2 Elements”. WHATWG (2019
年 10月 31日 ). 2019年 11月2日 閲覧 。 “Void elements only have a start tag; end tags must not be specified for void elements.” - ^ “HTML Standard, Developer's Edition
日本語 訳 12.1.2要素 ”. 2019年 11月2日 閲覧 。 “空 要素 に対 して終了 タグは指定 してはならない。” - ^ XHTML 1.0 The Extensible HyperText Markup Language HTML C. Compatibility Guidelines
- ^ “HTML Standard, Developer's Edition 12.1.2.3 Attributes Unquoted attribute value syntax”. WHATWG (2019
年 10月 31日 ). 2019年 11月2日 閲覧 。 - ^ “HTML Standard, Developer's Edition
日本語 訳 12.1.2.3属性 引用 符 で囲 まれない属性 値 構文 ”. 2019年 11月2日 閲覧 。 - ^ “HTML5から
意味 の変 わる要素 <b>、<i>、<em>、<strong>、<small>、<hr>”. HTMLクイックリファレンス. 2021年 3月 9日 閲覧 。 - ^ 3.2.4.1 Attributes
- ^ Content attributes /n A normative list of attributes that may be specified on the element [1]
- ^ 2.1.9 Dependencies / Web IDL / The IDL fragments in this specification must be interpreted as required for conforming IDL fragments, as described in Web IDL. [2]
- ^ A normative definition of a DOM interface that such elements must implement. [3]
- ^ they are referred to as content attributes for HTML and XML attributes, and IDL attributes for those defined on IDL interfaces. HTML Living Standards
- ^ The IDL attribute is also known as a JavaScript property. MDN web docs
- ^ Some IDL attributes are defined to reflect a particular content attribute. [4]
- ^ Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. [5]
 | この |