タグとタグ

<ul class="scroll-list">
        <li class="scroll-item">
          <a href="#">
            <time class="date" datetime="2015-08-23">2015.08.23 SUN</time>
            <span class="category news">NEWS</span>
            <span class="title">WORKSを更新しました。</span>
          </a>
        </li>

これはタグが使われていますが、タグでも大丈夫なのでしょうか？
それともタグが使われているのには意味があるのでしょうか？

m.ts10806

2018/04/18 06:57

どこでこのコードを拾ってきたのでしょうか？自身が書かれたものか、それとも何かで見たものなのか、背景は必要に思います。（自身が書かれたものであれば意味を分からず書いていることになるので問題です）

yuuun

2018/04/18 11:40

質問の説明が不足しておりすみませんでした。本で勉強しており、本の解説のコードをそのまま載せました。タグは文中に変化が欲しい時やロゴや画像を入れ込む時に使うとばかり思っていたので、、、タグの使い方がいまいちわかっておらず質問させてもらいました。

yuuun

2018/04/18 11:40

yuuun

2018/04/18 11:40

行動規範の内容に同意します

回答4件

spanタグには明確な役割はなくスタイル付けなどに用いる便宜上のもので, 一方のpタグには段落という意味上の役割があります.

従ってこの例では, タグが囲われた部分が段落か否かで判断して下さい. もちろん, newsは段落であるとあなたが判断したのであれば, pタグを使ってもなんら差し支えはありません.

投稿2018/04/18 06:40

defghi1977

総合スコア4756

yuuun

2018/04/18 11:49

画像を追加で載せました。この場合タグを使うのが一番いいですか？

defghi1977

2018/04/18 12:00

(投げやりにお感じになるかもしれませんが)それはあなたが判断することです. HTMLには多面的な切り口(文書としての妥当性, レイアウトのしやすさ, 運用のやりやすさ等)があり, それにより「正しさ」の判定基準は変わりますし, 最終的に同じ見た目をもたらしたとしても, HTML構造やCSS記述が同じとは限りません. 従って, span要素を選択されたことに意義はありませんが, それが最適かについては判断できません. (とは言え, 大体そんな感じじゃね？とは思いますが)

yuuun

2018/04/18 12:36

正解を求めすぎました、、、ありがとうございます！

行動規範の内容に同意します

意味論

論理構造には製作者の意図が込められるものなので、意味論は質問者が決めるべきですが、いくつか気になる部分はあります。

.category は mark 要素でも良い
リンクではないa要素は構造として正しくない
.scroll-list, .scroll-item のような物理的な機能を表す名前は相応しくない
time.date は意味が重複している
.title は論理的に「タイトル」なのか疑問([WORKS] のページで<title>WORKSを更新しました。</title>でマークアップして違和感がないのならOK)