実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。

知っておくと便利なHTMLの使い方をまとめて紹介します。

HTML can do that?
by Ananya Neogi

先日紹介した「CSSでここまでできるのか！」の続編です。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 1. datalist -フォームに入力候補を表示
• 2. dialog -ダイアログ ボックス
• 3. progress -プログレスバー
• 4. detailsとsummary -開閉パネル
• 5. inputmode -スマホで入力時に適したキーパッドを表示
• 6. input type="color" -カラーピッカー
• 7. mark -テキストにマーカーを引く
• 8. href="tel:" -電話発信用のリンク
• 9. insとdel -追加・削除されたテキストの明示
• 10. contenteditable -コンテンツを編集可能に

1. datalist -フォームに入力候補を表示

<datalist>タグは入力候補となるデータリストをHTMLで定義できます。入力候補をoptionで定義するだけで、オートコンプリート機能を簡単に実装できます。

2. dialog -ダイアログ ボックス

ダイアログ ボックスの実装に迷っていた人は、<dialog>タグで実装してみてください。当初は、Chromeのみのサポートでしたが、現在ではFirefox, Operaにもサポートされています。IE, Edgeはサポート外ですが、ポリフィル（dialog-polyfill）も用意されています。
参考: HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点

3. progress -プログレスバー

プログレスバーを簡単に実装できる<progress>タグのスタイルは、少し難しいかもしれません。どのようにスタイルできるのかは、The HTML5 progress Elementが参考になります。

4. detailsとsummary -開閉パネル

情報を折りたたみ・展開する開閉パネルは、HTMLだけで簡単に実装できます。開閉状態を示す三角形もラベルの横に配置されます。

5. inputmode -スマホで入力時に適したキーパッドを表示

フォームの入力欄にinputmode属性を与えると、スマホでその入力に適したキーパッドを表示します。属性の値には、tel, email, url, numericなどがあります。
※デモは、スマホでチェックしてみてください。

6. input type="color" -カラーピッカー

input要素のtypeにcolorがあることを知っていましたか？
typeにcolorを定義すると、カラーピッカーを簡単に使用できます。

7. mark -テキストにマーカーを引く

<mark>タグは、テキストを目立たせる要素です。<strong>や<em>のように強調させることが目的ではなく、目立たせるのが目的です。例えば、関心を引きたいワードや検索結果で検索ワードをハイライト表示にする場合に適しています。

8. href="tel:" -電話発信用のリンク

mailto:のメール用リンクと似ています。デバイスが電話機能を備えていれば、tel:の後に電話番号を記述すると、直接電話をかけるリンクを実装できます。

9. insとdel -追加・削除されたテキストの明示

<ins>タグは追加されたテキスト、<del>タグは削除されたテキストを明示します。datetime属性は、その日時を示します。

10. contenteditable -コンテンツを編集可能に

通常ページ上のコンテンツをユーザーは編集できませんが、contenteditable属性を与えると編集可能になります。デモは、div要素にcontenteditable属性を与えたものです。