Edent, (edited )
@Edent@mastodon.social avatar

A poll for all my
friends!

Suppose you have comments on your website. They all have a valid <time> element in them.

Comments are displayed in a nested list, with the oldest first.

Should you use:

tomayac,
@tomayac@toot.cafe avatar

@Edent The second example in the article section of the HTML spec got you there: https://html.spec.whatwg.org/multipage/sections.html#the-article-element.

Edent,
@Edent@mastodon.social avatar

@tomayac you don't expect me to actually read do you?!!?
😆

kagan,
@kagan@wandering.shop avatar

@Edent I'm going with "the order is immaterial to the semantics" specifically because of the phrasing "a nested list". I take that to mean, replies are nested underneath the thing they reply to. In that case, a later (sibling) reply is independent of previous ones.

If everything were in strictly chronological order, with no nesting/threading, then I'd say <ol>.

Edent,
@Edent@mastodon.social avatar

@kagan that's a good point!

zack,
@zack@toot.cafe avatar

@Edent Per MDN:

> To determine which list to use, try changing the order of the list items; if the meaning changes, use the &lt;ol&gt; element — otherwise you can use &lt;ul&gt;

So I'd go with &lt;ol&gt;

bartvandebiezen, (edited )
@bartvandebiezen@mastodon.social avatar

@Edent I would only use ol or ul for lists that look like a bulleted or numbered list. Almost everything on a webpage is some sort of ‘list’, but that doesn’t mean they should be ol or ul. I would use a collection of articles.

Edent,
@Edent@mastodon.social avatar

@bartvandebiezen That's a fair point.

For nested comments, would you do <article>s within <article>s?

bartvandebiezen,
@bartvandebiezen@mastodon.social avatar

Yes

westbrook,
@westbrook@mastodon.social avatar

@Edent <article><header>Comment meta, etc. <time>…</time></header><section>Comment</section><footer>reply/share/etc</footer></article>?

tomw,
@tomw@mastodon.social avatar

@Edent Controversial but I think "everything that is a list or list-like should be <ul> or <ol>" was a wrong step when it became fashionable (15 years or so now) - for example the use of <ul> for menus, which you still see even though <nav> now exists.

I think it's better - more semantic, even! - to use <ul> for bullet lists, <ol> for numbered lists, and some other element for other page elements, even if they look like a bit like lists if you squint

Edent,
@Edent@mastodon.social avatar

@tomw so which element for (a list of?) comments?

tomw,
@tomw@mastodon.social avatar

@Edent This is a deathly unfashionable answer but probably <div class="comments">

kolya,
@kolya@social.cologne avatar

@Edent OL with list-style-type: none

Edent,
@Edent@mastodon.social avatar

@kolya pretty much what I'm using now. Thanks 🙂

superflippy,
@superflippy@mastodon.xyz avatar

@Edent The time is for ordering them. An ol would only get in the way.

Edent,
@Edent@mastodon.social avatar

@superflippy Some comments are replies to other comments, so they need to be nested.

That's why I use <li>.

So, if I understand you, using <ul> is better? Or do you mean no lists at all?

200ok,
@200ok@mastodon.social avatar

@Edent tricky because reply threads mean the times can be mixed, so the structure seems more important than the order.

iamdtms,
@iamdtms@mas.to avatar

@Edent <s>&;ol&;</s> 🥲

Edent,
@Edent@mastodon.social avatar

@iamdtms calm down, Satan!

Phil_Tanner,
@Phil_Tanner@mastodon.philtanner.com avatar

@Edent I would probably use an OL of BLOCKQUOTEs with CITE tags.

Edent,
@Edent@mastodon.social avatar

@Phil_Tanner interesting.
I currently use an <ol> full of <article>s.

owenblacker,
@owenblacker@dataare.cool avatar

@Edent I think ULs make more sense to me. I'm conscious that Wikimedia talk pages are a DIVtastic mess of nested DLs (!!), though

Edent,
@Edent@mastodon.social avatar

@owenblacker

<dl>
<dt>Definition List</dt>
<dd>A semantic boondoggle that no one has ever used successfully 😉</dd>
</dl>

  • All
  • Subscribed
  • Moderated
  • Favorites
  • webdev
  • ngwrru68w68
  • DreamBathrooms
  • khanakhh
  • magazineikmin
  • InstantRegret
  • tacticalgear
  • thenastyranch
  • Youngstown
  • rosin
  • slotface
  • modclub
  • everett
  • kavyap
  • Durango
  • JUstTest
  • osvaldo12
  • normalnudes
  • cubers
  • ethstaker
  • mdbf
  • provamag3
  • GTA5RPClips
  • cisconetworking
  • Leos
  • tester
  • megavids
  • anitta
  • lostlight
  • All magazines