Menu

Div is for the weak

Written by on 3 comments

We’re glad to announce that we, the wolfpack of Studio Wolf, will set a new trend in front-end web development. We are the first company switching completely to list items in our code, and thereby exclusively using <ul> and <li> instead of <div>, <h1>, <p> and so on.

<ul>
   <li>Hello world!</li>
</ul>

Why? The reasons are simple:

  • Let’s be honest, a webpage is nothing more that lists within lists within lists;
  • We have CSS and classes. They style every list item the way you want. No need for extra tags;
  • Google loves lists;
  • It’s just much easier.

Let us show you a perfectly clear example:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>We love UL</title>
        <meta name="description" content="">
        <meta name="author" content="">
    </head>

    <body>

        <ul class="wrappers">

            <li>
                <ul class="containers">
                    <li>
                        <ul class="grid">
                            <li class="navigation">
                                <ul class="items">
                                    <li href="#">Home</li>
                                    <li href="#">Products</li>
                                    <li href="#">About us</li>
                                    <li href="#">Contact</li>
                                </ul>
                            </li>

                            <li class="header">
                                <ul class="slides">
                                    <li>We love lists.</li>
                                    <li>W3C is shitty.</li>
                                    <li>Div is for the weak.</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li>
                <ul class="containers">
                    <li>
                        <ul class="grid">

                            <li class="aside">

                                <ul class="content">
                                    <li class="h2">This is my sidebar.</li>
                                    <li class="p">Aliquam et rutrum tortor, nec pellentesque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec bibendum dui dui, in feugiat nibh posuere ut. Phasellus vel imperdiet sapien.</li>
                                </ul>

                            </li>

                            <li class="article">

                                <ul class="content">
                                    <li class="h2">This is my content.</li>
                                    <li class="p">Aliquam et rutrum tortor, nec pellentesque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec bibendum dui dui, in feugiat nibh posuere ut. Phasellus vel imperdiet sapien.</li>
                                </ul>
                            </li>

                        </ul>
                    </li>
                </ul>
            </li>

        </ul>

    </body>

</html>

We are still flabbergasted that no web guru, no web ninja, no expert has executed this wonderful idea before. Feel free to adopt this new way of coding. We’re pretty sure the rest of the world will follow quickly.

Check how we work — Liked this post? See how we put it to practice.

Reader comments

  • But you already know that the first child is an aside. Why bother with classes, CSS provides you with nth-child() for this.

    by Marten
  • … frog in your ass ;)

    by stffn
  • I was writing a note saying poor devs that have to implement this. But then I saw the post date. Good one.

    by Ibrahim
  • We won't publish your e-mail address, we only use it for verification purposes.

Related blogs

  • Who dares? Workspace for rent at a wolf pack

    by Aljan Scholtens studio-wolf
  • Refresh: the meetup for designers and front end developers

    by Aljan Scholtens studio-wolf
  • Whitespace: the most important design tool

    by Kris de Jong design
  • How social media got our wolf back

    by Tim Sluis studio-wolf
  • Story telling culture

    by Tim Sluis studio-wolf

Dive into history! — Show all 54 posts in 7 years.