便利と感じたHTMLタグ一覧

個人的に便利だと感じたHTMLタグを紹介します！（これからも見つけ次第更新していこうと思います！）

details, summary (IEのみ非対応)

HTMLのみでアコーディオンが実装できる！

<details> <!-- ← open属性をつけることで初期表示可能！ -->
    <summary>Summary</summary>
    <p>
        これはテキストです。
    </p>
</details>

<details>
    <p>
        summaryタグはなくてもOK!
    </p>
</details>

↓プレビュー（Summary・詳細部分をクリックしてみてください！）

Summary

これはテキストです。

summaryタグはなくてもOK!

CSS(summary::marker)を用いれば「▶」部分もいろいろいじれます！

datalist (全ブラウザ対応!)

HTMLのみで検索予測のようなものを実装できる！

<input type="text" list="animals"> <!-- datalistのIDを入れること！ -->
<datalist id="animals">
    <option>dog</option>
    <option>cat</option>
    <option>hamster</option>
    <option>rabbit</option>
    <option>lion</option>
</datalist>

↓プレビュー（表示できなかったため、画像 + CodePenで...）
フォーカスすると以下のように選択肢が現れ、

入力すると選択肢が絞り込まれます！（もちろん選択肢はクリック可能ですよ！）

See the Pen datalistタグ by raratyurara (@raratyurara) on CodePen.

便利だけど選択肢にCSSを適用できないのが難点...

progress (全ブラウザ対応!)

ローディング + 進捗をHTMLのみで表すことができる！

<progress></progress>
<!-- value / max %だけ進捗として表示されます！(以下だと80%) -->
<progress value=".8" max="1"></progress>

↓プレビュー

See the Pen Progressタグ by raratyurara (@raratyurara) on CodePen.

CSSで

progress {
    /* 左右に動かなくなります + 上記のスタイルとかなり変わります */
    -webkit-appearance: none;
}

を指定した際に限り、progressはCSSでデザイン修正可能です！(meterタグと似てる...?)

diglog (IEのみ非対応)

簡単なJSでモーダルを実装できる！

html

<button id="openButton">OPEN</button>
<button id="closeButton">CLOSE</button>

<dialog id="modal"> <!-- ← open属性をつけることで初期表示可能！ -->
  これはモーダルですよ!
</dialog>

javascript

const openButton = document.getElementById('openButton');
const modal = document.getElementById('modal');
openButton.addEventListener('click', () => {
  modal.show();
});
closeButton.addEventListener('click', () => {
  modal.close();
});

↓プレビュー（表示できなかったため、画像 + CodePenで...）

初期ではボタンしか表示されていませんが...

OPENボタンをクリックで上記のようにモーダルが表示されます！（closeを押すと消えますよ！）

See the Pen Dialogタグ by raratyurara (@raratyurara) on CodePen.

変にクラス・スタイルを付け外ししなくてよいのはとても使いやすいなと思いました！

まとめ

最近のHTMLってこんなに便利なんですね...
もっと勉強 + アウトプットしなくては！
次はCSSについて勉強しようかなぁ...

もし間違っている点・見づらい点などございましたら、お手数ですがご教示いただければ幸いです！