Hi
I was Curious, the idea of using the <li></li> tags for almost everything on your website like some people do.
Is it bad to use them a lot?
Can it clutter the web page load time?
Is it bad practice?
Because I use them a lot like that website for all my designs, in fact I nest them inside each other a lot, it helps me to cut down on using too many div’s and does help me keep content grouped together.
List tags are for ‘lists of things’ so if you have consecutive elements that are related in some way and constitute a list then a list is the semantic tag to use.
Generally things like menus are good for lists because they are a list of links for navigation or a list of products would suit a list structure. However, it is easy to go overboard and use a list for everything so you have to be careful that you keep a close eye on the semantics.
Some people code their forms using lists but I think that’s a step too far as we have labels and fieldsets for identifying the data so we don’t need to call it a list as well.
In the end it can be debated that everything is a list of some sort and then the semantics of the html become downgraded. There was a craze a few years ago to put everything in lists but that soon died out when people realised it wasn’t the best thing to do.
What do you mean by that would it be something like this:
<ul>
<li><form method="">
Some content
</form>
</li>
<ul>
Or something like this:
<form method="">
<ul>
<li>Name</li>
<li>Surname</li>
<li>Message</li>
<li>Submit</li>
</ul>
</form>
Or is it something else totally?
What about listing paragraphs is that alright or do you think that is bad semantics?
What I mean is most of the time when I am using listing it would either be for paragraphs or sections of a page for instance like this:
<ul>
<li>one section</li>
<li>Another section</li>
<li>Final section</li>
</ul>
End results:
------------------------|
|
------------------------|
One Section |
|
|
------------------------|
Another Section |
|
|
------------------------|
Final section |
|
|
------------------------|
I’m not sure whether this is wholly semantic, but I built this Minesweeper game out of <li></li> tags, 256 of them. I’ve never noticed any particular speed issue to rendering it, though it may not be too mobile friendly (never tested it tbh - that wasn’t its purpose).
But anyway, at this point, I think we may have strayed somewhat off topic…
The topic came up when I took a look at that site the guy mentioned and yes he uses li tags alot so i thought if it was really alright because Alot of my idea or designs use them to divide sections of my page kind of like a grid.
as long as they are responsive they won’t break but that’s where I get problems applying min-width to elements.
anyway the topic came up after looking at how the website was coded with just li and I mean their website is all about listing.
I’ve moved the topic to this new thread so it doesn’t detract from the OPs original question.
Since @PaulOB has said it’s not a good idea, I’m not sure why you’re asking about doing a form using a list! 
but your 2nd option is the way people sometimes do it, albeit with an ordered list rather than an unordered list.
Yes some people put the labels and controls inside a list element but that adds unnecessary mark up in my mind (although there is no real right or wrong here as opinions will vary).
No paragraphs are not lists and their semantics are controlled by their headings. The headings shouldn’t be in a list either as headings are section headings on their own. They are not a list of specific things even though they may be a list of headers.
If you have a list of quotes from someone then you might use a list for those. If you have a list of items you purchased then that would be a list. If you have a list of links they would be a list. However a paragraph is not a list of words as such.
In the end you have to make your own mind up as some items could be classed as lists but they may have inherent semantics of their own and don’t need to be in a list.
I believe that was my fault as I mentioned it in an earlier post that some people started do it like that but I find it unnecessary 
I’m not sure that would have ever occurred to me to construct a form that way - it seems a lot of unnecessary markup.
It was the next thing after using tables 
Paragraphs should be marked up as paragraphs:-
<p>This is a paragraph.</p>
Sections can be marked up as sections:-
<section>
<h2>This is a section</h2>
<p>This is a paragraph within a section.</p>
</section>
Nothing at all wrong with using lists, for anything that may be considered a list. You just need to consider how you define what is a list. I would think maybe a series of singular, related items.
In the topic the site has lists of events, so yes, I would call them lists.
It’s just that they are displayed in a “card” style rather than a traditional (default) bulleted list style. And that’s fine, it’s the beauty of css that you can style elements any way you wish while retaining semantic meaning in the html.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.