あなたが存在さえ知らないかもしれない3つの便利なHTMLタグ

ヤチェク・ルジーク

プロダクトデザイナー

今日、アクセシビリティ（A11y）は、カスタムソフトウェア製品を構築するすべての段階において極めて重要である。UX/UIデザインの部分から始まり、コードで機能を構築する高度なレベルにまで踏み込んでいる。アクセシビリティは、DXの向上に取り組む開発者にとって多くのメリットをもたらしますが、エンドユーザーにとってはより重要です。HTMLにおけるそのようなa11y部分の一つがセマンティックタグであり、ここで取り上げたいのはそれである。

フロントエンド開発者は、以下のことに精通していなければならない。 HTMLタグ これが彼らの日常的な自然環境なのだから。皆さんは次のような基本的なタグを知っているに違いない。 、、<フッター などなど。しかし、例えば、次のように単語を区切る瞬間を提案できることをご存知だろうか。 HTMLCSSなしで？

無指定ビットレート

あなたがドイツ人のクライアントのためにウェブサイトやアプリを作っているとしよう。ご存知のように、ドイツ語の単語はとても長い。そのため、デザインにいくつかのテキストコンテンツを追加し、それをドイツ語で再現する必要があります。コードそして、このコンテンツは非常に特定の瞬間にブレークしなければならない。ここで 。 のタグを付ける。

ゲバートスターグ・クーヘン

これだけだ！こんな簡単なタグで、テキストの内容を思いのままに操ることができる。

しかし、ブラウザのサポートはどうだろう？正直なところ、かなり良好だ。ほとんどのブラウザはこのタグを理解できるが、AndroidのOperaとiOSのSafariは問題があるかもしれない。

メーター

あなたがディスク・ストレージ・マネージャー・アプリケーションを作っているとしよう。まだ利用可能なストレージの容量をUIで表示する必要があり、可能な限りアクセスしやすいようにしたい。これはまさに <メーター タグを使用します。このタグは、定義された範囲内の値だけを表示する。このタグのもうひとつのクールな点は、その属性だ：

Low →電流値が設定Low値より低い場合、メーターのバーが赤くなります；
最適→電流値が最適属性値より高い場合、メーターのバーが緑色になる；
high → highの値が最大値より低く、最適値より高い場合、メーターのバーがオレンジ色になる。それ以外は緑色。

また、似たようなタグとしてプログレス（progress）をご存じかもしれない。では、この2つの違いは何でしょうか？progressタグは進行中のタスクに使うべきです。つまり、progressタグは特定のタスクを処理するときに使う。meterタグは、ディスクやメモリーの使用量を表示するときに使います。もう1つの違いは、meterタグはIEでサポートされていないことで、実はこれがこのタグの唯一の欠点です。

DELとINS

削除されたコンテンツや追加されたコンテンツ (GitHub の diff や、チケットが更新されたときの Jira からのメール通知) のアクセス可能なインジケータを構築する方法を考えたことはありますか？削除されたコンテンツをタグを使用します。例えば <del><p>削除されたコンテンツ</p></del>.コンテンツの追加部分のみを表示するにはタグもまったく同じように使用できる。このタグには2つの属性もある：

cite → この部分が追加された理由を説明するリソースのuri；
datetime → データと変更時刻。

もちろん、もっと便利なものもある。タグ .可能で適切であれば、これらすべてを使うことを強くお勧めする。あなたのクライアントやアプリのユーザーは、そのようなアプローチに感謝するでしょう。しかし、タグの中には非推奨のものもあるので注意してください。あなたが使いたいあまり一般的でないタグがまだ有効で、次のような良いサポートがあることをいつでも確認できます。 MDNドキュメント.