What are some useful HTML tags?

HTMLには多くの便利なタグがあります。以下にそれぞれのタグの説明と例を示します。

fieldset & legend

<fieldset> タグは関連する要素をグループ化するために使用されます。 <legend> タグは <fieldset> のタイトルを定義します。

<fieldset> <legend>Personal Information</legend> Name: <input type="text" name="name"><br> Email: <input type="email" name="email"> </fieldset>

Personal Information Name:
Email:

ruby & rt

<ruby> タグはルビ注釈（漢字の読み仮名）を表示するために使用されます。 <rt> タグはルビテキストを定義します。

<ruby> 漢<rt>かん</rt>字<rt>じ</rt> </ruby>

漢かん字じ

datalist

<datalist> タグは入力フィールドに提案リストを提供します。これにより、ユーザーは候補の中から選択できます。

<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> </datalist>

sub & sup

<sub> タグは下付き文字を定義し、 <sup> タグは上付き文字を定義します。

H<sub>2</sub>O (水の化学式) <br> E = mc<sup>2</sup> (アインシュタインの質量エネルギー等価の式)

H2O (水の化学式)
E = mc2 (アインシュタインの質量エネルギー等価の式)

abbr

<abbr> タグは略語または頭字語を定義し、省略形の意味を提供します。

<abbr title="HyperText Markup Language">HTML</abbr>

HTML

details & summary

<details> タグは折りたたみ可能なコンテンツを作成し、 <summary> タグはその要約または見出しを定義します。

<details> <summary>More Information</summary> HTMLはウェブページを構築するための標準マークアップ言語です。 </details>

More Information HTMLはウェブページを構築するための標準マークアップ言語です。

optgroup

<optgroup> タグは選択リスト内のオプションをグループ化します。

<select> <optgroup label="Web Browsers"> <option>Chrome</option> <option>Firefox</option> </optgroup> <optgroup label="Text Editors"> <option>VS Code</option> <option>Sublime</option> </optgroup> </select>

progress

<progress> タグは進行状況を示すために使用されます。

<progress value="70" max="100"></progress>

ins & del

<ins> タグは挿入されたテキストを示し、 <del> タグは削除されたテキストを示します。

彼は <del>古いバージョンを使用していました</del> <ins>最新のバージョンを使用しています</ins>

彼は 古いバージョンを使用していました 最新のバージョンを使用しています