Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】kbd要素の使い方

kbd要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

kbdオブジェクトは、キーボードや音声コマンドなどのユーザーからの入力を表すオブジェクトです。ウェブページ上で、ユーザーがシステムに対して入力するべきテキスト、キーボードのキー、キーの組み合わせ、または音声コマンドなどをマークアップするために使用されます。

例えば、『ファイルを開くには Ctrl + O を押してください』のような指示文において、『Ctrl』や『O』、あるいは『Ctrl + O』全体をkbd要素で囲むことで、それがユーザーによる入力であることを明示的に示すことができます。また、『OK Google』のような音声コマンドを示す際にも活用されます。

この要素を使用する主な利点は、単にテキストの見た目を変更するだけでなく、その内容が『入力』であることをセマンティックに、つまり意味的に定義することにあります。これにより、ウェブブラウザや検索エンジン、スクリーンリーダーのような支援技術がコンテンツの構造と意味をより正確に理解できるようになります。結果として、ウェブページのアクセシビリティが向上し、視覚障害を持つユーザーなどにとっても情報が適切に伝わります。さらに、スタイルシート(CSS)を用いてkbd要素に特有のスタイルを適用することで、入力部分を視覚的に強調し、ドキュメント全体の読みやすさを高めることも容易です。HTML Living Standardにおけるkbd要素は、このようなユーザー入力の表現において重要な役割を担っています。

公式リファレンス: <kbd>: The Keyboard Input element

構文(syntax)

1<kbd>text</kbd>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ