this post was submitted on 07 Aug 2024
11 points (92.3% liked)

Web Development

3434 readers
1 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

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

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

founded 1 year ago
MODERATORS
[email protected]
[email protected]
[email protected]
11
I need some clarification on ul li vs divs (lemmy.world)
submitted 3 months ago by [email protected] to c/[email protected]
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] 6 points 3 months ago (2 children)

I would refer to MDN documents on whatever features you are attempting. eg:

The general term you are looking for is 'Semantic HTML' i.e. the tags convey their purpose/meaning.

[–] [email protected] 1 points 3 months ago (2 children)

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?

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

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?

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

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.

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

Thank you that semrush guide will be a fun read.