dl dt ddを定義リストとして利用する

HTML5において、dl要素は用語(dt)を説明(dd)する記述リストとして定義が変更になりました。dl要素を定義リストとして利用する場合は、dt要素にdfn要素を内包させます。

tag06.png

[HTML]

<dl>
<dt><dfn>定義する用語</dfn></dt>
<dd>用語の定義</dd>
</dl>

一般的なブラウザでは定義する用語はイタリックになります。

正しいdl要素でマークアップをしよう

dl要素も含めてul、olなどのリスト系タグは、マーカーを非表示にしたり左寄せにしたりスタイルシートで成形することが可能です。
単純にディスプレイ表示を考えれば、厳格な定義を多少無視しても成り立ってしまうこともあります。
ユーザーインターフェイス(UI)に問題がなくとも、コンピュータによる解析が難しいといった問題が出てきてしまいます。

HTML5策定の目的として、人間にもコンピュータにもやさしい構造を作るということがあります。ここで言うコンピュータとは検索エンジンや検索クローラーなどのサーバサイドの技術です。
実際にGoogleはウェブサイトの「意味」「関連付け」を読解する方向に加速しており、それがそのままSEOに繋がります。
dt要素やdd要素をレイアウト的に使うだけで意味が破綻していれば、Webサイトの信頼性は落ちてしまいます。

一つのdl要素に複数のdt要素を入れることは、文法的には合っています。
しかしきちんとdd要素で説明できていなければ、人間には伝わりにくく、コンピュータにとっても関連付けで戸惑うことになります。

dl要素には、ul、olにはない用語と説明(1対1でなくても良い)の組み合わせ、tableタグに引けをとらないレイアウト性があります。
論理的で美しいマークアップに利用していきましょう。

HTMLについてさらにチェック

非エンジニアも知っておきたい!HTMLとCSSの基礎知識

非エンジニアも知っておきたい!HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS(コンテンツ管理システム)に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。

コーディング初心者こそ知っておきたい便利な「CSS関数」5選

コーディング初心者こそ知っておきたい便利な「CSS関数」5選

コーディング初心者こそ知っておきたい便利な「CSS関数」を紹介します。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用してみましょう。