Q&A
質問はなんでしょう？？
HTML
1<section class="members"> 2 <h1>メンバー紹介</h1> 3 4 <div> 5 <img src="img/member1.png" alt=""> 6 <h1>山田太郎</h1> 7 <p>頑張ります。頑張ります。頑張ります。頑張ります。</p> 8 </div> 9 10 <div> 11 <img src="img/member2.png" alt=""> 12 <h1>山田二郎</h1> 13 <p>頑張ります。頑張ります。頑張ります。頑張ります。</p> 14 </div> 15 16 <div> 17 <img src="img/member3.png" alt=""> 18 <h1>山田花子</h1> 19 <p>頑張ります。頑張ります。頑張ります。頑張ります。</p> 20 </div> 21 22 </section>
divで囲ったのですが、ドットインスールでは<ul>で囲むとのことでした。
まだまだ初心者なのでdivを使いすぎてしまいます。
回答3件
0
極端な事を言ってしまえばコーディングは全てdivタグで行っても、問題ないと言えます。
ですが実際にそれをやるとどうなるかというと、
コードを見たときにそれぞれのブロックが持つ意味合いを理解しにくくなります。
そこでulタグやheaderタグ、footerタグを使えばコードを見ただけで
「これはリストなんだ」とか「ヘッダーなんだ」とかざっくりとでも把握しやすくなります。
そうすると共同作業者やgoogleボットにとって嬉しい状態になるということです。
最初のうちはdivを多用しても問題ないですか、それぞれのタグの意味合いを意識しながらコーディングするとより良くなると思います。
投稿2020/03/25 12:28
総合スコア254
0
ベストアンサー
学習中に分からない用語がでたら、WEB検索して意味を調べましょう。
WEB関係なら、MDNで調べるのが確実です。
div要素は、
<div>: コンテンツ分割要素 - HTML: HyperText Markup Language | MDN
上記内に下記のような記述があります。
<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。
<div> 要素は、他に適切な意味的要素（<article> や <nav> など）がない場合に限り使用してください。
ul要素は、
<ul>: 順序なしリスト要素 - HTML: HyperText Markup Language | MDN
<ul> 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。
リストとしての意味を持たせたかったらulを使い、とくに意味はなく一つのまとまりとしたい場合はdivで囲めばいいということになります。
スタイルをどうするかは、デザイン的な観点ですので、文としての意味とはまた別の視点になります。
投稿2020/03/25 12:40
総合スコア33715
0
テキストをみながらサイトを作っている
「どういう役割があるのか」知りたいのでしたらMDNなどの仕様も記載されているようなリファレンスを参照しましょう。
<div>: コンテンツ分割要素
<section>: 汎用セクション要素
<ul>: 順序なしリスト要素
上記は今回質問に挙げられたタグから抜き出した一例ですが、
一応、それぞれにきちんと本来の役割と言うのがあります。
CSSで何も装飾していない時が最もその役割に近いレイアウトとなります。
もちろん仰っているように、どのタグであってもある程度は同じようなことを表現できます（ブロック要素をインライン要素にしたり、その逆も然り）
ですが、やはりプログラミングをしていくという観点からするとそれぞれの本来の役割にのっとったレイアウトを担当してもらうのが良いと思います。
影響力までは私の方では分かりませんがSEO対策において、正しくHTMLタグを使うことは検索順位を上げるために必須という意見もあります。
※ただ提示した記事にあるようにHTMLタグの使い方間違っているからとペナルティがあるわけではないです
個人的には、どんな素晴らしい見た目であっても全部divで組まれていたら残念な気持ちになりますね（私自身完璧に使い分けられているわけではないけど）
昨今は1から組むことはなく、大抵はCSSフレームワークを利用することになりますが、特にドキュメント参考に要素を突っ込んでいってるとまぁまぁ正しい使い方になるのではないかなと思ってます。
投稿2020/03/25 12:29
総合スコア80850
あなたの回答
tips
プレビュー
