Web Development

3444 readers

3 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Follow the programming.dev site rules
Keep content related to web development
If what you're posting relates to one of the related communities, crosspost it into there to help them grow
If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

[email protected]

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

https://frontendfoc.us/ - [RSS]
https://wesbos.com/blog
https://davidwalsh.name/ - [RSS]
https://www.nngroup.com/articles/
https://sia.codes/posts/ - [RSS]
https://www.smashingmagazine.com/ - [RSS]
https://www.bennadel.com/ - [RSS]
https://web.dev/ - [RSS]

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

snowe

erlingur

Ategon

I need some clarification on ul li vs divs (lemmy.world)

submitted 3 months ago by [email protected] to c/webdev

12 comments fedilink hide all child comments

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.

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 8 points 3 months ago

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.