タイトル: 要素一覧

要素とタグについて

HTMLの文書内の各構成要素のことを要素（element）と言います。

要素（element）は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成されます。

開始タグ→<h1>内容</h1>←終了タグ

「要素」と「タグ」はこのような関係にあり、混合しないように要注意です。

タグ内で更に属性とよばれるものを付与できます。

属性を付与することで、タグ対して更に詳細な情報を付与することが出来ます。

以下の例では、ファイルの選択ボタンに対して.jpgしか許容しないようにaccept属性で制限しています。

用途別にHTMLの主要要素を整理しています。子ページからカテゴリーを選択してください。

カテゴリ	対象要素の例
構造	`<html>`, `<head>`, `<body>`, `<div>`
セクション	`<section>`, `<article>`, `<header>`, `<footer>`
テキスト・フォント	`<h1>`〜`<h6>`, `<p>`, `<strong>`, `<em>`
リスト	`<ul>`, `<ol>`, `<li>`, `<dl>`
リンク・ボタン	`<a>`, `<button>`
ルビ	`<ruby>`, `<rt>`, `<rp>`
画像	`<img>`, `<picture>`
オブジェクト	`<object>`, `<embed>`, `<iframe>`
動画・音声	`<video>`, `<audio>`, `<source>`
フォーム	`<form>`, `<input>`, `<select>`, `<textarea>`
その他	特殊な要素・廃止予定要素など

セマンティック（意味）を意識する: 同じ見た目でも、<header> と <div> ではブラウザ・スクリーンリーダー・SEOへの伝わり方が違う
ブロック要素とインライン要素の区別: HTML5以降は厳密な区分は消えたが、ブロック・インラインの感覚は今もレイアウトに影響する
属性は引用符で囲む: accept=".jpg" のように常に引用符を入れる
非推奨要素を使わない: <font>, <center> 等の旧要素は CSS で代替する