表 (英語: table) 作成を目的としているタグは<table>タグですが、下記のURLでは、レスポンシヴが容易との理由で表作成に<dl>タグを推奨しております。近年、こういったチュートリアルを見かけます。
・まだtable使ってるの!? dlで1ランク上の表テーブル作成をしてみよう
https://yatteq.com/htmlcss-dltable
しかし、これはマークアップとして適切なのでしょうか? あくまでも<dl>タグは定義リストのためのタグであって、表作成のためのタグは<table>タグです。
dlの仕様: https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl
tableの仕様: https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
確かにレスポンシヴは容易ですが、マークアップとして誤りなのかどうか‥‥仕様確認をしても判断が難しく、表作成としての使用をためらっております。
マークアップが正解か不正解か、主観によるジャッジでも構いませんのでご教示いただけると幸いです。
※BAやご回答への返答には約1週間程度を要します。また、本注釈の削除はできかねます。何卒ご容赦ください。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/29 00:21
回答5件
0
セマンティクス
https://momdo.github.io/html/dom.html#elements-in-the-dom
DOM内の要素は概念を表す。これは、要素がセマンティックとして知られる固有のセマンティックスを持つ。
Example: たとえば、ol要素は順序つきリストを表す。
上記仕様から、セマンティクス上のtable要素、dl要素は下記になります。
- table要素は「表」を表す
- dl要素は「定義リスト」を表す
セマンティクス上で「表」を表すコンテンツを <dl>
でマークアップする事は出来ません。
※ここで、セマンティクス上の「定義リスト」を <dl>
でマークアップし、CSSで「表」のように見せるのは構いません。
見た目を変えるのはCSSの領分であり、セマンティクス(HTML)には影響しません。
(デザイン上の観点が別にありますが、余談なので、ここでは省略します)
文法
https://yatteq.com/htmlcss-dltable で例示されているHTMLは <dt>
に対応する <dd>
が存在しない為、文法違反です。
先述の判断基準と違い、文法には絶対的な基準がありますので、必ず守る事をお勧めします。
HTMLの文法は https://validator.w3.org/ でチェックできます。
返答
BAやご回答への返答には約1週間程度を要します。また、本注釈の削除はできかねます。何卒ご容赦ください。
megu9859さんは回答に+評価を入れる程度には、回答文を読む時間があるようですが、返答には大変な時間を要する、と理解しました。
読み応えのある返答を期待しています。
※回答者も一人の人間ですので、質問者の対応次第では怒ることもあれば、苦言を呈することもあります。
無視をもって質問者への返答とする場合もあります。
あしからず、ご了承下さい。
更新履歴
- 2019/04/29 18:03 返答を追記
- 2019/04/29 18:35 仕様に則り、表現の修正(論理構造→セマンティクス)
Re: megu9859 さん
投稿2019/04/29 07:22
編集2019/04/29 10:16総合スコア18156
0
ベストアンサー
参考にしているサイトのdl
の使い方が意味論として全く通じないものになっています。仕様書もろくに読んでいないようなレベルが低いサイトを見て論じても意味がありません。正しいdl
の使い方をしていて、かつ、テーブルを作る場合はdl
を使うことを推奨しているというサイトを見つけてから、再度ご質問ください。
【おまけ】
以下は、詳しく知りたいって人に向けたおまけです。
まずは、HTML標準の仕様書を読んでみましょう。HTML標準の仕様書は常に変化するため、2019年4月29日時点のものを参考にしています。
ここからdl
要素とは「名前-値グループ(name-value group)」のリストであることがわかります。しかし、その構成には制限があります。
dl
要素には0個以上の「名前-値グループ(name-value group)」から構成される。- 「名前-値グループ」は1個以上の
dt
要素(「名前」を表す)とその後に続く1個以上のdd
要素(「値」を表す)から構成される。このとき、dt
要素とdd
要素、および、div
要素の子であるdt
要素とdd
要素以外は全て無視される。 - 一つの
dl
要素の中に同じ名前のdt
要素があってはならない。
また、dl
要素での「名前-値グループ」がどのように決定づけられるかのアルゴリズムも書いてあります。以下は、そのJavaScriptでの実装です。
JavaScript
1const getNameValueGroupList = dl => { 2 const processDtOrDd = node => { 3 if (node.nodeName.toLowerCase() === "dt") { 4 if (seedDd === true) { 5 groups.push(current); 6 current = { name: [], value: [] }; 7 seedDb = false; 8 } 9 current.name.push(node); 10 } else if (node.nodeName.toLowerCase() === "dd") { 11 current.value.push(node); 12 seedDd = true; 13 } 14 }; 15 const groups = []; 16 let current = { name: [], value: [] }; 17 let seedDd = false; 18 let child = dl.firstChild; 19 let grandchild = null; 20 while (child !== null) { 21 if (child.nodeName.toLowerCase() === "div") { 22 grandchild = child.firstChild; 23 while (grandchild !== null) { 24 processDtOrDd(grandchild); 25 grandchild = grandchild.nextSibling; 26 } 27 } else { 28 processDtOrDd(child); 29 } 30 child = child.nextSibling; 31 } 32 if (!(current.name.length === 0 && current.value.length === 0)) { 33 groups.push(current); 34 } 35 return groups; 36};
これを踏まえて 【コピペでOK】まだtable使ってるの!? dlで1ランク上の表テーブル作成をしてみよう のコードを見ています。後から記事が変更されたり、削除されたときのために、2019年4月29日時点でのHTMLを全文引用しておきます。
HTML
1<div class="dltable"> 2 <dl> 3 <dt class="row1">見出し1</dt> 4 <dt class="row2">見出し2</dt> 5 <dt class="row3">見出し3</dt> 6 <dt class="row4">見出し4</dt> 7 <dt class="row5">見出し5</dt> 8 </dl> 9 <dl> 10 <dd class="row1">内容1-1</dd> 11 <dd class="row2">内容2-1</dd> 12 <dd class="row3">内容3-1</dd> 13 <dd class="row4">内容4-1</dd> 14 <dd class="row5">内容5-1</dd> 15 </dl> 16 <dl> 17 <dd class="row1">内容1-2</dd> 18 <dd class="row2">内容2-2</dd> 19 <dd class="row3">内容3-2</dd> 20 <dd class="row4">内容4-2</dd> 21 <dd class="row5">内容5-2</dd> 22 </dl> 23</div>
アルゴリズムに従えば、三つのdl
がありますので、「名前-値グループ」のリストが三つあります。三つは次のようになります。
- 一つ目の
dl
は、『見出し1』『見出し2』『見出し3』『見出し4』『見出し5』という5個の名前を持ち、値が空である「名前-値グループ」が1個だけです。 - 二つ目の
dl
は、名前が空で、『内容1-1』『内容2-1』『内容3-1』『内容4-1』『内容5-1』という5個の値を持つ「名前-値グループ」が1個だけです。 - 三つ目の
dl
は、名前が空で、『内容1-2』『内容2-2』『内容3-2』『内容4-2』『内容5-2』という5個の値を持つ「名前-値グループ」が1個だけです。
dl
同士は独立して「名前-値グループ」のリストを持ちます。それらがdl
をまたがって関連づけれることはありません。そして、dd
の前にdt
が無ければ名前が無い「名前-値グループ」になってしまいます。最も気をつけなくてはならないのは、名前と値はそれぞれ1個以上なければならないということです。よって、HTMLとして正しくないとなってしまいます。
たぶん、記事の著者は『見出し1』を『内容1-1』『内容1-2』と関連付けたかったのでしょう。もし、そのように書きたければ、HTMLは次のような形で書くべきでしょう。
HTML
1<div class="dltable"> 2 <dl> 3 <div class="col"> 4 <dt class="row">見出し1</dt> 5 <dd class="row">内容1-1</dd> 6 <dd class="row">内容1-2</dd> 7 </div> 8 <div class="col"> 9 <dt class="row">見出し2</dt> 10 <dd class="row">内容2-1</dd> 11 <dd class="row">内容2-2</dd> 12 </div> 13 <div class="col"> 14 <dt class="row">見出し3</dt> 15 <dd class="row">内容3-1</dd> 16 <dd class="row">内容3-2</dd> 17 </div> 18 <div class="col"> 19 <dt class="row">見出し4</dt> 20 <dd class="row">内容4-1</dd> 21 <dd class="row">内容4-2</dd> 22 </div> 23 <div class="col"> 24 <dt class="row">見出し5</dt> 25 <dd class="row">内容5-1</dd> 26 <dd class="row">内容5-2</dd> 27 </div> 28 </dl> 29</div>
class名についてですが、元記事のコードでは"row*"というクラスが列を表していましたが、「列」は英語で"colunmn"です。**なぜ列の番号付けに「行」である"row"と付けていたのかはわかりません。**上のコードでは「行」と「列」が"row"と"col"のクラスを付けるようにしました。また、将来増えることも考え、クラス名に無意味に番号を付けることもやめました。
今度はこれをテーブルっぽいレイアウトしたいとき、素直にスタイルを調整しようとすると、横では無く縦に見出しが並ぶ形になってしまいます。では、記事のように横並びにするにはどうしたらいいのかというと、(...来週に続く)
※回答の続きには約1週間程度を要します。また、本注釈の削除はできかねます。何卒ご容赦ください。
※回答者はこのまま失踪する可能性があります。一週間音沙汰が無く、調べてもどうすれば良いのかわからない、そもそもできるのかすらわかっていない場合は、別途質問として投稿していただければ、親切な方が答えてくれるかもしまれん。回答者自身がそのような質問をこっそり投稿していた場合は、色々と察していただきますようお願いします。
【続き】
SCSS
1.dltable { 2 width: 90%; 3 margin: 15px; 4 dl { 5 display: flex; 6 flex-flow: row nowrap; 7 border: 1px solid #cccccc; 8 border-radius: 4px; 9 text-align: center; 10 justify-content: left; 11 font-size: 12px; 12 .col { 13 display: flex; 14 flex: auto; 15 flex-flow: column nowrap; 16 +.col { 17 border-left: 1px solid #cccccc; 18 } 19 .row { 20 margin: 0; 21 padding: 10px 0; 22 +.row { 23 border-top: 1px solid #cccccc; 24 } 25 } 26 dt.row { 27 background: #f2f2f2 none repeat; 28 color: #333; 29 } 30 } 31 } 32}
かなりやっつけでつくりましたが、元記事とほぼ同じように見せるようにはできたと思います。普段はBootstrapで誤魔化している私には、一から作るのは面倒くさいきついです。flexを(フレームワークではなく生で)初めて使ったので、私には解説できません。まだよくわかってなくて、無駄なことをしている部分もあるかも知れません。テーブルとは違って、改行が入ると縦は高さがズレていきます。そういう所の調整は私にはわからないので、別途質問でも上げてください。
投稿2019/04/29 04:42
編集2019/05/06 00:00総合スコア21733
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/05 13:12
2019/05/06 00:28
2019/05/06 07:59
0
個人的には、「使用してOK」
理由:
区別が難しい部分もありますが、<table>の中には、<dl>・<ul>を「複数集めただけ」のものもあるため、HTML5でのセマンティックwebとして見れば、内容によっては「より良い」と言えるかと思います。
投稿2019/04/29 00:17
総合スコア3521
0
作れるなら作って良いかと。
「主観のジャッジでいい」なら尚更ですね。お好きにどうぞ。
どこかに「技術的にNG」という根拠資料があるなら躊躇うのもわかりますけど、ないなら勝手にやったらいいです。
見た目に違和感なければ使う人には影響は全くないです。
作る側の都合のみ。
なお、同様の質問を見かけますが全て同様の回答で済むので今後同じような質問は遠慮していただきたく。
組んでみて運用してみて不都合が起きてないならこの質問は実際に問題、課題が起きていないので非推奨と思います。
投稿2019/04/29 00:08
編集2019/05/08 07:42総合スコア80765
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/05 13:24 編集
2019/05/05 23:00
2019/05/06 06:51 編集
2019/05/06 07:42
2019/05/06 07:57
2019/05/06 07:58
2019/05/06 08:25 編集
2019/05/06 08:45
2019/05/06 08:51
2019/05/06 08:58
2019/05/06 09:01
2019/05/07 23:13 編集
2019/05/07 23:13
2019/05/07 23:17 編集
2019/05/07 23:20
2019/05/07 23:32
2019/05/08 00:20 編集
2019/05/08 00:35
2019/05/08 07:41
0
文法や、セマンティクスのことなどは他の回答者様が、答えておられるので、
SEOの観点から申し上げます。
おそらく、掲示していただいたURLの投稿者さんは、セマンティクスやSEOのことを考慮していない方なのでしょう。
SEOにおいて有利になるには、
正しい文法、セマンティクスでHTMLを書かれるのが最低条件となります。
内容によっては、多少正しい文法でなくても、検索上位になることはなりますが、
やはり、正しい文法、セマンティクスで書いた方が、有利になります。
また、SEOの観点だけでなく、重要なのは、誰かに情報を伝えるときに、正しい情報を伝えられるかが大事になってきます。
これはブラウザ、検索エンジンに対してもそうなのですが
(ブラウザ、検索エンジン対しては正しい文法、セマンティクスで書かないと、正しく伝わりません。なぜなら、見た目が大丈夫とか関係ないからです)
たとえば、目の不自由な方がサイトを閲覧するときにどうでしょうか。
見た目が大丈夫と間違った文法で記述したら、目の不自由な方々には情報が正しく伝わらなく、その方々の閲覧を逃すものになってしまいます。
これは、SEOの観点からも重要視されております。
また、ブラウザの機能として、目の不自由な方でもサイト閲覧できるような、読み上げ機能などが備わっており、その機能を正しく使うには、
正しい文法、セマンティクスが必要になります。
(ブラウザが解釈して読み上げするので、正しい文法の必要があるわけですね)
つまり、そういった、相手に正しく伝える必要がない、見た目良ければ別にいい、って思われるのなら、別にやってもいいと思いますよ。
ただ、正しい文法でセマンティクスで書こうとしているエンジニアによるコーディングの方が、全体的に完成度の高いサイト構築をされておりますし、
見た目も同時に担保するために、様々な創意工夫が生まれ、そうした方が、エンジニアとしての実力が上がるような気がしますけどね。
要は、気にしないなら、好きにすればいいけど、気にした方が、周りすべての人の、そしてなにより自身のためになるってことです。
投稿2019/04/30 00:45
総合スコア9528
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。