Creating HTML structure using lists

[Squeak]

There is a new article on the Madmouse Blog, “Creating structure using Unordered Lists” which introduces a proof of concept of using lists instead of divisions to write down the structure of a website layout. The article shows how it is it to be done, describes its purpose and points out few advantages of using it. It also presents a WordPress theme that fully utilizes this concept so that you can have a look at it in action. Using this method results in code that is very clean and efficient, optimized, light weight and most importantly code that is well formed which can result in better optimization of the HTML code and lead an SEO advantage.

If you are interested in seeing what we are up to with this concept, please click here or visit the Madmouse Blog.

Our new WordPress theme using this concept is called, Golden Age

Looking forward of your feedback.

[cfajohnson]

[indent]
Apart from being semantic nonsense, it requires unnecessarily bloated CSS to style the lists.
[/indent]

[Squeak]

[indent] Apart from being semantic nonsense, it requires unnecessarily bloated CSS to style the lists. [/indent]

It requires three lines which are as follows:

ul {
margin: 0; padding: 0;
list-style-type: none;
}

After that, everything else is styled as would normally be done.

Please explain how or give me an example of why it is nonsense?

[pritaeas]

I think it doesn't make a difference when compared to div's. If he wants to make his point, a good test would be to recreate a 'css zen garden' page. I'm sure it's possible and it would help him explain his point. Then it would be possible to compare them and test the differences (div vs. ul/li).

[Squeak]

I think it doesn't make a difference when compared to div's. If he wants to make his point, a good test would be to recreate a 'css zen garden' page. I'm sure it's possible and it would help him explain his point. Then it would be possible to compare them and test the differences (div vs. ul/li).

My understanding is that CSS Zen Garden themes are about the smart use of CSS, and not about HTML. This concept is about HTML and not CSS. I don't see how coding a CSS Zen Garden theme will prove anything. We believe that the Golden Age theme and its coding delivers our point across.

Please explain how coding a CSS Zen theme will prove our point?

[pritaeas]

in my opinion a lot of coders think of this of a great resource. If you can show you can achieve the same with your concept, you may get more recognition. You state that it is about html, and not css. without css, using ul/li doesn't make sense at all. (your last post shows css, not html)

[MidiMagic]

Remember that lists are not block objects. They can't contain many tags, including img and p tags.

[cfajohnson]

Remember that lists are not block objects. They can't contain many tags, including img and p tags.

[indent]
Listsare block-level objects, but they can only contain elements; elements are also block-level, and they can contain anything.
[/indent]

[MidiMagic]

Sorry, I have that backwards. The p tag can't contain ul or ol.

[Squeak]

in my opinion a lot of coders think of this of a great resource. If you can show you can achieve the same with your concept, you may get more recognition. You state that it is about html, and not css. without css, using ul/li doesn't make sense at all. (your last post shows css, not html)

I have put up a new site using this theme. It has been active since March 1 and has no backlinks or Pagerank. I have choose blog tips and ethical SEO for the main two keywords.
It is ranking #233 for "blog tips" and #50 for "ethical SEO" in Google. It is ranking #1 for spunky jones and spunkyjones in Google as well. about 1/2 of the articles are ranking on the first page of Google as well.

I am a designer and have some basic knowledge in HTML. My coder is the expert in the HTML department and when he approached me with this concept, I listened and decided to try it.

So far it seems to be working very well, and I am very pleased with the results so far. The test site is Spunky Jones Blog tips for Ethical Bloggers.

Yes, you are correct that if I can prove this concept more people will be have more interest to look at it.

[Squeak]

I think it doesn't make a difference when compared to div's. If he wants to make his point, a good test would be to recreate a 'css zen garden' page. I'm sure it's possible and it would help him explain his point. Then it would be possible to compare them and test the differences (div vs. ul/li).

I spoke with my coder and he didn't think that doing that would prove anything. He feels that the code in the template should stand for it's self.
I decided to put up a test site using the theme and see what happens with it. I feel that the proof is in the pudding so I am hoping that the site will help to prove the concept.

Thanks for your suggestion, but I don't think even if we did that, it will prove anything.

[Squeak]

Remember that lists are not block objects. They can't contain many tags, including img and p tags.

I am not following what you are saying, but I have to agree with cfajohnson's comment.

[Squeak]

[indent] Lists are block-level objects, but they can only contain elements; elements are also block-level, and they can contain anything. [/indent]

I am glad that you are knowledgeable in coding and thank you for you comment.

[Squeak]

nice posts. ived been learning a lot of html... from divs to lists.

It is a good thing to learn new things, it helps up to grow and to challenge ourselves.

[cfajohnson]

Sorry, I have that backwards. The p tag can't contain ul or ol.

[indent]
No tag can contain another tag. An element can contain another element. Elements are delimited by tags.

The P element cannot containany block-level element, and since its closing tag is optional, a block level element implicitly closes a preceding P element.
[/indent]

[Squeak]

I am not following what you are saying, but I have to agree with cfajohnson's comment.

Actually, I don't understand you either and I am getting mixed up with your and my comments.