I need some clarification on ul li vs divs
I need some clarification on ul li vs divs
Hello,
I'm a Sr Dev who mostly has done back-end work but I'm "dangerous enough" in front end frameworks to get things done in my job.
I have another Sr Dev on my team who is ADAMANT on using ul/ol's everywhere. And I mean EVERYWHERE.
Navigation menu items will get done as a list.
Say I have a list of key value pairs or tags describing an item on a page, that's a list. If there are two sections on a page that's also a list. Even forms are built as lists of inputs and buttons. To the point where I'm positive if I told them to recreate the google front page I'm 100% they'd make a ul and a li for the image, another for the box and a separate li for the buttons.
My frustration is that every piece of documentation regarding ordered lists and unordered lists are for literally listings out items as numbered or bulleted lists, not logically grouping things on a page. Also our code is littered with extra css to strip out the bullet points and numbers on a basic li item.
I've worked on several projects and this is the first time I've ever seen lists so overused. Is this normal on some projects? It feels wrong but I don't know the exact terminology to use to explain why, given my inexperience in front end development.
Test in screen readers and see how content is being announced.
Lists have certain semantics which are very useful. Definitely good in navigation (aka nav > ul > li).
Grids are also useful BTW—we don't have specific "grid" tags in HTML, but using ARIA attributes you can set up grids which might map onto div tags or even custom elements.
Personally, I'm much less concerned about ul/li than I am "div tag soup" which is a plague upon modern web development. Use div tags sparingly, and almost always see if you can reach for either (a) a more semantic HTML tag (e.g., key/val pairs should probably be dl/dt/dd tags, not list tags), or (b) custom elements…yes, authoring tags with one or more hyphens which are purely for developer comprehension and hanging CSS off of is perfectly fine—recommended in fact—and in some cases if you need some JS component logic as well, then boom you have web components.
I would refer to MDN documents on whatever features you are attempting. eg:
- Navigation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
- Forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The general term you are looking for is 'Semantic HTML' i.e. the tags convey their purpose/meaning.
He mentions how semantically a list is a group of items, I've told him several times it's for a bullet list or a numbered list.
Am I in the wrong here?
Try not to look too much at what the default browser styles are, just think purpose.
- Nav items are ultimately a list of links for other pages.
- a list of tags for an item matches intent.
- Form inputs: IDK, list items feels like stretching the meaning (eg https://v1.tailwindcss.com/components/forms#form-grid)
- Sections: why not just
<section>1...</section><section>2...</section><section>3...</section>
Maybe your coworker possibly suffers from list-itis, after tying too hard to prevent div-itis?
What do you mean about littered with css? Do you have a default reset style, or a simple util class to remove these? Or is your html littered with style="" everywhere?Have a look at the MDN link about the Nav tag. MDN is probably the best source on html standard, aside from reading the W3C html spec.
There you’ll see that the main example is using an unordered list. There is another example explicitly saying you don’t have to use a list in a nav tag.
I’d say your coworker might know what they are talking about.
Thank you that semrush guide will be a fun read.
This is an old standard, long ago when CSS wasn't a big thing, and even when it was when it was much less featureful, tables where the only way to properly position things. This is no-longer the case and is now bad practice and has been for more than a decade. This is due to defailt styling added to list elements along with a few other issues with speed and consistancy
Don't know them, but this seems an older Dev who learned something one way and is entirely unable to adapt with changing technology. This is a danger, and has been the reason for quite a few major, very expensive, issues at companies I've been contracted at. Sure, using tables and lists is not a big issue, but what else will he do and defend aggressively? I've seen the same with a person arguing SQL injections are fixed because he took out all comment characters before concatenating a string for an SQL query.
There's quite a bit in this project that's very unorthodox mostly because a decision was made early on that most frameworks were too "opinionated", so now we have a mish mash of shit that barely works together and I'm sure that once this app is handed over to a client they will likely not understand it and rewrite it from scratch.
HTML is open, you could easily scrape websites and generate some stats about how often they're used.
But no, ul and ol are for exactly what you'd expect them to be used for.
Incidentally the Mozilla docs for ol say:
Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS
list-style-typeproperty instead.It does sound like lists may be a little overused but it would be hard to say without specific examples.
Using lists in the nav situation seems reasonable. But if he's advocating that everything on a web page should be a list, that's a bit extreme.