class vs data attribute selector performance

JavaScript performance comparison

Test case created by Philip Walton

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>

        <section>
            <h1>Heading 1 (in section)</h1>
            <h2>Heading 2 (in section)</h2>
            <h3>Heading 3 (in section)</h3>
            <h4>Heading 4 (in section)</h4>
            <h5>Heading 5 (in section)</h5>
            <h6>Heading 6 (in section)</h6>
        </section>

        <article>
            <h1>Heading 1 (in article)</h1>
            <h2>Heading 2 (in article)</h2>
            <h3>Heading 3 (in article)</h3>
            <h4>Heading 4 (in article)</h4>
            <h5>Heading 5 (in article)</h5>
            <h6>Heading 6 (in article)</h6>
        </article>

        <header>
            <hgroup>
                <h1>Heading 1 (in hgroup)</h1>
                <h2>Heading 2 (in hgroup)</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">navigation item #1</a></li>
                    <li><a href="#">navigation item #2</a></li>
                    <li><a href="#">navigation item #3</a></li>
                </ul>
            </nav>
        </header>

        <h1>Text-level semantics</h1>

        <p hidden>This should be hidden in all browsers, apart from IE6</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>

        <address>Address: somewhere, world</address>

        <p>
        The <a href="#">a element</a> example<br>
        The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
        The <b>b element</b> example<br>
        The <cite>cite element</cite> example<br>
        The <code>code element</code> example<br>
        The <del>del element</del> example<br>
        The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
        The <em>em element</em> example<br>
        The <i>i element</i> example<br>
        The img element <img src="http://lorempixel.com/16/16" alt=""> example<br>
        The <ins>ins element</ins> example<br>
        The <kbd>kbd element</kbd> example<br>
        The <mark>mark element</mark> example<br>
        The <q>q element <q>inside</q> a q element</q> example<br>
        The <s>s element</s> example<br>
        The <samp>samp element</samp> example<br>
        The <small>small element</small> example<br>
        The <span>span element</span> example<br>
        The <strong>strong element</strong> example<br>
        The <sub>sub element</sub> example<br>
        The <sup>sup element</sup> example<br>
        The <u>u element</u> example<br>
        The <var>var element</var> example
        </p>

        <h1>Embedded content</h1>

        <h3>audio</h3>

        <audio controls></audio>
        <audio></audio>

        <h3>img</h3>

        <img src="http://lorempixel.com/100/100" alt="">
        <a href="#"><img src="http://lorempixel.com/100/100" alt=""></a>

        <h3>svg</h3>

        <svg width="100px" height="100px">
            <circle cx="100" cy="100" r="100" fill="#ff0000" />
        </svg>

        <h3>video</h3>

        <video controls></video>
        <video></video>

        <h1>Interactive content</h1>

        <h3>details / summary</h3>
        <details>
            <summary>More info</summary>
            <p>Additional information</p>
            <ul>
                <li>Point 1</li>
                <li>Point 2</li>
            </ul>
        </details>

        <h1>Grouping content</h1>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>

        <h3>pre</h3>

        <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>

        <pre><code>&lt;html>
    &lt;head>
    &lt;/head>
    &lt;body>
        &lt;div class="main"> &lt;div>
    &lt;/body>
&lt;/html></code></pre>

        <h3>blockquote</h3>

        <blockquote>
            <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
        </blockquote>

        <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>

        <h3>ordered list</h3>

        <ol>
            <li>list item 1</li>
            <li>list item 1
                <ol>
                    <li>list item 2</li>
                    <li>list item 2
                        <ol>
                            <li>list item 3</li>
                            <li>list item 3</li>
                        </ol>
                    </li>
                    <li>list item 2</li>
                    <li>list item 2</li>
                </ol>
            </li>
            <li>list item 1</li>
            <li>list item 1</li>
        </ol>

        <h3>unordered list</h3>

        <ul>
            <li>list item 1</li>
            <li>list item 1
                <ul>
                    <li>list item 2</li>
                    <li>list item 2
                        <ul>
                            <li class="foobar">list item 3</li>
                            <li data-foo="bar">list item 3</li>
                        </ul>
                    </li>
                    <li>list item 2</li>
                    <li>list item 2</li>
                </ul>
            </li>
            <li>list item 1</li>
            <li>list item 1</li>
        </ul>

        <h3>description list</h3>

        <dl>
            <dt>Description name</dt>
            <dd>Description value</dd>
            <dt>Description name</dt>
            <dd>Description value</dd>
            <dd>Description value</dd>
            <dt>Description name</dt>
            <dt>Description name</dt>
            <dd>Description value</dd>
        </dl>

        <h3>figure</h3>

        <figure>
            <img src="http://lorempixel.com/400/200" alt="">
            <figcaption>Figcaption content</figcaption>
        </figure>

        <h1>Tabular data</h1>

        <table>
            <caption>Jimi Hendrix - albums</caption>
            <thead>
                <tr>
                    <th>Album</th>
                    <th>Year</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Album</th>
                    <th>Year</th>
                    <th>Price</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Are You Experienced</td>
                    <td>1967</td>
                    <td>$10.00</td>
                </tr>
                <tr>
                    <td>Axis: Bold as Love</td>
                    <td>1967</td>
                    <td>$12.00</td>
                </tr>
                <tr>
                    <td>Electric Ladyland</td>
                    <td>1968</td>
                    <td>$10.00</td>
                </tr>
                <tr>
                    <td>Band of Gypsys</td>
                    <td>1970</td>
                    <td>$12.00</td>
                </tr>
            </tbody>
        </table>

        <h1>Forms</h1>

        <form>
            <fieldset>
                <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
                <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
                <p><label>Email input <input type="email"></label></p>
                <p><label>Search input <input type="search"></label></p>
                <p><label>Tel input <input type="tel"></label></p>
                <p><label>URL input <input type="url" placeholder="http://"></label></p>
                <p><label>Password input <input type="password" value="password"></label></p>
                <p><label>File input <input type="file"></label></p>

                <p><label>Radio input <input type="radio" name="rad"></label></p>
                <p><label>Checkbox input <input type="checkbox"></label></p>
                <p><label><input type="radio" name="rad"> Radio input</label></p>
                <p><label><input type="checkbox"> Checkbox input</label></p>

                <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
                <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
            </fieldset>

            <fieldset>
                <legend>Inputs as siblings of labels</legend>
                <p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
                <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
                <p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
                <p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
                <p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
                <p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
                <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
                <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>

                <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
                <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
                <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
                <p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>

                <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
                <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
            </fieldset>

            <fieldset>
                <legend>Clickable inputs and buttons</legend>
                <p><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></p>
                <p><input type="reset" value="Reset (input)"></p>
                <p><input type="button" value="Button (input)"></p>
                <p><input type="submit" value="Submit (input)"></p>
                <p><input type="submit" value="Disabled (input)" disabled></p>


                <p><button type="reset">Reset (button)</button></p>
                <p><button type="button">Button (button)</button></p>
                <p><button type="submit">Submit (button)</button></p>
                <p><button type="submit" disabled>Disabled (button)</button></p>
            </fieldset>

            <fieldset id="boxsize">
                <legend>box-sizing tests</legend>
                <div><input type="text" value="text"></div>
                <div><input type="email" value="email"></div>
                <div><input type="search" value="search"></div>
                <div><input type="url" value="http://example.com"></div>
                <div><input type="password" value="password"></div>

                <div><input type="color" value="#000000"></div>
                <div><input type="number" value="5"></div>
                <div><input type="range" value="10"></div>
                <div><input type="date" value="1970-01-01"></div>
                <div><input type="month" value="1970-01"></div>
                <div><input type="week" value="1970-W01"></div>
                <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
                <div><input type="datetime-local" value="1970-01-01T00:00"></div>

                <div><input type="radio"></div>
                <div><input type="checkbox"></div>

                <div><select><option>Option 01</option><option>Option 02</option></select></div>
                <div><textarea cols="30" rows="5">Textarea text</textarea></div>

                <div><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></div>
                <div><input type="reset" value="Reset (input)"></div>
                <div><input type="button" value="Button (input)"></div>
                <div><input type="submit" value="Submit (input)"></div>

                <div><button type="reset">Reset (button)</button></div>
                <div><button type="button">Button (button)</button></div>
                <div><button type="submit">Submit (button)</button></div>
            </fieldset>
        </form>
    

Preparation code output

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <section> <h1>Heading 1 (in section)</h1> <h2>Heading 2 (in section)</h2> <h3>Heading 3 (in section)</h3> <h4>Heading 4 (in section)</h4> <h5>Heading 5 (in section)</h5> <h6>Heading 6 (in section)</h6> </section> <article> <h1>Heading 1 (in article)</h1> <h2>Heading 2 (in article)</h2> <h3>Heading 3 (in article)</h3> <h4>Heading 4 (in article)</h4> <h5>Heading 5 (in article)</h5> <h6>Heading 6 (in article)</h6> </article> <header> <hgroup> <h1>Heading 1 (in hgroup)</h1> <h2>Heading 2 (in hgroup)</h2> </hgroup> <nav> <ul> <li><a href="#">navigation item #1</a></li> <li><a href="#">navigation item #2</a></li> <li><a href="#">navigation item #3</a></li> </ul> </nav> </header> <h1>Text-level semantics</h1> <p hidden>This should be hidden in all browsers, apart from IE6</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> <address>Address: somewhere, world</address> <p> The <a href="#">a element</a> example<br> The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br> The <b>b element</b> example<br> The <cite>cite element</cite> example<br> The <code>code element</code> example<br> The <del>del element</del> example<br> The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br> The <em>em element</em> example<br> The <i>i element</i> example<br> The img element <img src="http://lorempixel.com/16/16" alt=""> example<br> The <ins>ins element</ins> example<br> The <kbd>kbd element</kbd> example<br> The <mark>mark element</mark> example<br> The <q>q element <q>inside</q> a q element</q> example<br> The <s>s element</s> example<br> The <samp>samp element</samp> example<br> The <small>small element</small> example<br> The <span>span element</span> example<br> The <strong>strong element</strong> example<br> The <sub>sub element</sub> example<br> The <sup>sup element</sup> example<br> The <u>u element</u> example<br> The <var>var element</var> example </p> <h1>Embedded content</h1> <h3>audio</h3> <audio controls></audio> <audio></audio> <h3>img</h3> <img src="http://lorempixel.com/100/100" alt=""> <a href="#"><img src="http://lorempixel.com/100/100" alt=""></a> <h3>svg</h3> <svg width="100px" height="100px"> <circle cx="100" cy="100" r="100" fill="#ff0000" /> </svg> <h3>video</h3> <video controls></video> <video></video> <h1>Interactive content</h1> <h3>details / summary</h3> <details> <summary>More info</summary> <p>Additional information</p> <ul> <li>Point 1</li> <li>Point 2</li> </ul> </details> <h1>Grouping content</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> <h3>pre</h3> <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre> <pre><code>&lt;html> &lt;head> &lt;/head> &lt;body> &lt;div class="main"> &lt;div> &lt;/body> &lt;/html></code></pre> <h3>blockquote</h3> <blockquote> <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p> </blockquote> <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote> <h3>ordered list</h3> <ol> <li>list item 1</li> <li>list item 1 <ol> <li>list item 2</li> <li>list item 2 <ol> <li>list item 3</li> <li>list item 3</li> </ol> </li> <li>list item 2</li> <li>list item 2</li> </ol> </li> <li>list item 1</li> <li>list item 1</li> </ol> <h3>unordered list</h3> <ul> <li>list item 1</li> <li>list item 1 <ul> <li>list item 2</li> <li>list item 2 <ul> <li class="foobar">list item 3</li> <li data-foo="bar">list item 3</li> </ul> </li> <li>list item 2</li> <li>list item 2</li> </ul> </li> <li>list item 1</li> <li>list item 1</li> </ul> <h3>description list</h3> <dl> <dt>Description name</dt> <dd>Description value</dd> <dt>Description name</dt> <dd>Description value</dd> <dd>Description value</dd> <dt>Description name</dt> <dt>Description name</dt> <dd>Description value</dd> </dl> <h3>figure</h3> <figure> <img src="http://lorempixel.com/400/200" alt=""> <figcaption>Figcaption content</figcaption> </figure> <h1>Tabular data</h1> <table> <caption>Jimi Hendrix - albums</caption> <thead> <tr> <th>Album</th> <th>Year</th> <th>Price</th> </tr> </thead> <tfoot> <tr> <th>Album</th> <th>Year</th> <th>Price</th> </tr> </tfoot> <tbody> <tr> <td>Are You Experienced</td> <td>1967</td> <td>$10.00</td> </tr> <tr> <td>Axis: Bold as Love</td> <td>1967</td> <td>$12.00</td> </tr> <tr> <td>Electric Ladyland</td> <td>1968</td> <td>$10.00</td> </tr> <tr> <td>Band of Gypsys</td> <td>1970</td> <td>$12.00</td> </tr> </tbody> </table> <h1>Forms</h1> <form> <fieldset> <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend> <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p> <p><label>Email input <input type="email"></label></p> <p><label>Search input <input type="search"></label></p> <p><label>Tel input <input type="tel"></label></p> <p><label>URL input <input type="url" placeholder="http://"></label></p> <p><label>Password input <input type="password" value="password"></label></p> <p><label>File input <input type="file"></label></p> <p><label>Radio input <input type="radio" name="rad"></label></p> <p><label>Checkbox input <input type="checkbox"></label></p> <p><label><input type="radio" name="rad"> Radio input</label></p> <p><label><input type="checkbox"> Checkbox input</label></p> <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p> <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p> </fieldset> <fieldset> <legend>Inputs as siblings of labels</legend> <p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p> <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p> <p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p> <p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p> <p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p> <p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p> <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p> <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p> <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p> <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p> <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p> <p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p> <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p> <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p> </fieldset> <fieldset> <legend>Clickable inputs and buttons</legend> <p><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></p> <p><input type="reset" value="Reset (input)"></p> <p><input type="button" value="Button (input)"></p> <p><input type="submit" value="Submit (input)"></p> <p><input type="submit" value="Disabled (input)" disabled></p> <p><button type="reset">Reset (button)</button></p> <p><button type="button">Button (button)</button></p> <p><button type="submit">Submit (button)</button></p> <p><button type="submit" disabled>Disabled (button)</button></p> </fieldset> <fieldset id="boxsize"> <legend>box-sizing tests</legend> <div><input type="text" value="text"></div> <div><input type="email" value="email"></div> <div><input type="search" value="search"></div> <div><input type="url" value="http://example.com"></div> <div><input type="password" value="password"></div> <div><input type="color" value="#000000"></div> <div><input type="number" value="5"></div> <div><input type="range" value="10"></div> <div><input type="date" value="1970-01-01"></div> <div><input type="month" value="1970-01"></div> <div><input type="week" value="1970-W01"></div> <div><input type="datetime" value="1970-01-01T00:00:00Z"></div> <div><input type="datetime-local" value="1970-01-01T00:00"></div> <div><input type="radio"></div> <div><input type="checkbox"></div> <div><select><option>Option 01</option><option>Option 02</option></select></div> <div><textarea cols="30" rows="5">Textarea text</textarea></div> <div><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></div> <div><input type="reset" value="Reset (input)"></div> <div><input type="button" value="Button (input)"></div> <div><input type="submit" value="Submit (input)"></div> <div><button type="reset">Reset (button)</button></div> <div><button type="button">Button (button)</button></div> <div><button type="submit">Submit (button)</button></div> </fieldset> </form>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
data-attribute matching selector
$("[data-foo='bar']");
pending…
data-attribute presence selector
$("[data-foo]");
pending…
class selector
$(".foobar");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

3 Comments

matan commented :

Looks terribly slow for data attributes...... :(

ninest123 commented :

mt0303 http://www.canadagoosejacketssale.com.co http://www.outletcoachoutlet.us.com http://www.uggscanadaugg.ca http://www.converseshoes-outlet.us.com http://www.kate-spade.us.com http://www.canadagooseoutletjackets.us http://www.polooutlet.in.net http://www.coachfactory-outlet.us.com http://www.coachoutletstoreonlineclearances.in.net http://www.christianlouboutinshoes.us.org http://www.nikeoutlet.in.net http://www.michael-korshandbags.me.uk http://www.nikeoutlet.us.com http://www.katespadeonlineoutlet.us.com http://www.cheapuggs.net.co http://www.coach-outlets.us.com http://www.michaelkorsoutletonlineclearance.in.net http://www.polooutlets.us.org http://www.katespadeoutletstoreonline.us.com http://www.mbtshoessale.us.com http://www.coachfactoryonlineoutlet.com.co http://www.supreme-clothing.us.com http://www.ugg.net.co http://www.longchamphandbagsuk.org.uk http://www.red-bottoms.us.com http://www.coachoutletstoreonline.com.co http://www.christianlouboutinoutlet.us http://www.burberry-outlet-canada.ca http://www.pandorajewelry.in.net http://www.pandora.us.com http://www.supremeclothing.us.org http://www.ralph-laurenoutlet.org.uk http://www.canadagoosesoutlet.ca http://www.adidasoriginals.in.net http://www.ultraboost.us http://www.oakley--sunglasses.us.org http://www.fitflops-saleclearance.us.org http://www.michaelkorsoutletclearance.in.net http://www.guccihandbagsoutlet.us.com http://www.katespade.in.net http://www.oakleysunglassessalecheap.us.com http://www.outletcanadagooseoutlet.us.com http://www.catboots.us http://www.uggsboots.name http://www.pumashoesoutlet.us.com http://www.air-max2018.us.com http://www.coachcanadaoutlet.ca http://www.eccoshoesstore.us.com http://www.vans-shoesoutlet.us.com http://www.ralphlaurensale-clearance.me.uk http://www.coach-outletonline.us.org http://www.pandora-charms.us.org http://www.burberryoutlet.in.net http://www.nikeshoes.us.com http://www.nike-store.us.com http://www.adidascampusshoes.us http://www.pandoracharms-uk.org.uk http://www.pandorastore.us.com http://www.pandora-jewelryoutlet.us.com http://www.birkenstocksandalsuk.co.uk http://www.ralphlauren-outletonline.us.com http://www.uggbootsoutletstores.us.com http://www.adidasyeezyshoes.us.com http://www.raybanssunglassesoutlet.us.com http://www.cheapmlbjerseyschina.us.com http://www.nfljerseyscheapwholesale.us.com http://www.canadagoosejacketsofficial.us.com http://www.redbottomsshoes.us.com http://www.michael-korsoutlet.us.com http://www.fitflopssale.us.com http://www.oakleysunglassesforwomen.us.com http://www.cheapnfljerseysnflwholesale.us.com http://www.adidasnmdr1.us.com http://www.canadagooseoutletjackets.com.co http://www.pandoracharmssale-clearance.us.com http://www.coachfactoryoutletsonlines.us.com http://www.ralphlaurenoutletpolo.org.uk http://www.adidasoutlet.us.com http://www.airmax-2018.com http://www.columbiasportswear.us.com http://www.thenorthfacejacketsoutlet.us.com http://www.mulberry-bags.me.uk http://www.birkenstocks.us http://www.adidas-superstar.us.com http://www.vuittonlouis.us.com http://www.adidas.us.com http://www.ralph-laurenuk.org.uk http://www.doudounemonclerpascher.fr http://www.coachoutletstore-online.us.com http://www.jacketscanadagoose.org.uk http://www.uggsoutletofficials.us.com http://www.cheapnfljerseysofficial.us.com http://www.michaelkorsfactoryoutletsale.us.com http://ugg.bootsoutlet.us.com http://www.moncleroutlet.me.uk http://www.michaelkors-outlet.ca http://www.cheapoakleysunglassesofficial.us.com http://www.birkenstockshoesoutlet.us.com http://www.airmax-97.us.com http://www.northface-jackets.us.com http://www.raybansunglasses.net.co http://www.coach-factory-outlet.us.org http://www.polo-ralphlauren.in.net http://www.adadassuperstar.com http://www.cheapnbajerseys-wholesale.us.com http://www.coach-outletonlines.us.com http://www.poloralphlaurenoutletonline.us.com http://www.outletcoachonline.us.com http://www.timberlandbootsoutlets.us.com http://www.canadagoosesaleoutlet.us.com http://www.reebokshoes.us.org http://www.skechersshoes-outlet.us.com http://www.raybansunglassessalecheap.us.com http://www.michaelkorsoutlet.us.org http://www.ralphlauren.me.uk http://www.pandoracharmssaleclearance.uk http://www.coachoutletonlinecoachfactoryoutlet.us.com http://www.yeezyboost-350.us.com http://www.pandoracharms.us.com http://www.ralphlauren-outletpolo.us.com http://www.cheapuggs.com.co http://www.coachoutletus.us.com http://www.pandorajewelryoutlet.in.net http://www.valentinoshoesoutlets.us.com http://www.suprashoes.name http://www.coachfactoryoutlet-online.in.net http://www.oakley.nom.co http://www.canadagooseukjackets.org.uk http://www.hermesbirkin.in.net http://www.hermesbag.us.com http://www.nikeshoes.in.net http://www.newbalance-outlet.us.com http://www.fredperrypoloshirts.us http://www.mbtshoes.name http://www.canadagooseoutletonlines.us http://www.moncler-outlet.us.org http://www.cheapoakleysunglasses.com.co http://www.canadagooseoutlet-jackets.us http://www.monclerjacketsuk.org.uk http://www.coachfactory-outletonline.us.org http://www.adidasnmd-shoes.us http://www.adidas-yeezyshoes.us.com http://wwwcanadagoose-jacketsuk.com.co http://www.moncler-outlets.us.com http://www.2017nikeairmax.us http://www.supremenewyork.us.com http://www.canada-goose-jackets.ca http://www.poloralphlaurenoutletpolo.us.com http://www.korsmichaeloutlet.us.com http://www.airjordanshoes.in.net http://www.coachoutletmalls.us.com http://wwwcanadagoose-uk.com.co http://www.pradaoutlets.us.com http://www.cheapjordans.us.com http://www.canadagooseoutletus.us.com http://www.canadagooseoutletjackets.us.com http://www.airmax-97.us http://www.adidasnmd.us.org http://www.harden-vol1.com http://www.canadiangoose.us.com http://www.coachoutletsonlines.us.com http://www.yeezyboost-350.co.uk http://www.adidas-shoes.us.com http://www.birkenstockoutlets.us.org http://www.nikeairmax.in.net http://www.philippplein-outlet.com http://www.mcm-outlet.us.org http://www.pandora-outlet.us.com http://www.canadagoosejacketscoats.org.uk http://www.moncleroutlets.us.org http://www.cheapjordans.in.net http://www.ralphlauren-outlet.me.uk http://www.louisvuitton-outlet.us.com http://www.cheapjordans.com.co http://www.jordanretro.name http://www.uggs.net.co http://www.ralph-laurenoutlet.com.co http://www.adidasyeezyboost-350.us.com http://www.philipppleinshirt.com http://www.adidas-nmd.us.com http://www.monclerjacketsoutlet.in.net http://www.pandorajewelrypandora.us.com http://www.uggsaustralia.fr http://www.birkenstocksandalsuk.org.uk http://www.burberry.us.com http://www.timberlandbootsoutlet.us.com http://www.air-jordans.us.com http://www.uggbootssales.us.com http://www.timberland-outlets.us http://www.canadagooseoutletcheap.us.com http://www.michaelkorsoutletshopping.us.com http://www.cheapjordanshoes.in.net http://www.toryburchoutletonline.com.co http://www.michael-korsoutlets.us.com http://www.mulberryoutlet.org.uk http://www.ugg-boots.net.co http://www.longchamp-outlet.us.com http://www.michael-korsoutlet.ca http://www.canadagoosejackets-outlet.us http://www.michaelkorsoutlets.us.com http://www.ralphlaurenoutletmalls.us.com http://www.canadagooseukjackets.me.uk http://www.adidasshoe.us.com http://www.fitflops-sale-clearance.us.com http://www.hermes.us.org http://www.uggs-boots.fr http://www.raybansunglasse.com http://www.katespadehandbagsclearance.us.com http://www.airmaxoutletsaleus.com http://www.cheapraybans.com.co http://www.michaelkorsoutlet.co.uk http://www.katespadeoutletclearance.us.com http://www.louboutinshoes.in.net http://www.airmax90.org http://www.ralphlaurensale-clearance.org.uk http://www.michaelkorshandbags.eu.com http://www.coachoutletcanada.ca http://www.coachfactory-outletstore.us.com http://www.ferragamo-outlet.us.com http://www.cheapjordans-shoes.us.com http://www.pandoracharms.name http://www.coachoutlet-onlinesale.us.com http://www.canadagooseoutlet.name http://www.longchampoutletus.us.com http://www.pandoracharms.com.co http://www.guccioutlets.us.org http://www.yeezyboost.org.uk http://www.adidas-outlet.us.com http://www.ralphlaurenoutletsale.us.com http://www.salvatoreferragamoshoes.us.com http://www.uggsoutlet-clearance.us.com http://www.coachfactoryoutlet-storeonline.us.com http://www.asicsshoes-outlet.us.com http://www.monclerjacketssale.us.com http://www.nikezoom.us http://www.canadagoose-outlet.name http://www.suprashoes.us.org http://www.canadagoosesalejackets.us.com http://www.toryburch-outletstores.us.com http://www.uggsbootscanada.ca http://www.uggs-boots.us http://www.hermes-handbags.us http://www.airjordans.us.com http://www.cheapmlbjerseys-wholesale.us.com http://www.adidas-yeezyboost.us.com http://www.moncleroutletonlines.us.com http://www.rayban-sunglasseoutlet.us.com http://www.supremeclothing.org.uk http://www.yeezyboost.us.com http://www.fitflopssale-clearance.us.org http://wwwmonclerjacketsuk.com.co http://www.nikeoutletonline.us.com http://www.ralphlauren.net.co http://www.jordanshoesforsale.us.com http://www.coach-factoryoutletonline.us.org http://www.cheapjordan-shoes.in.net http://www.outletlouisvuitton.us.com http://www.uggsoutletstoress.us.com mt0303

xukaimin commented :

adidas zx

skechers shoes

nike free

longchamp bags

vans shoes

burberry outlet online

nike outlet

ralph lauren

jordan 1

nike store

nike free

nike air force

asics

nike tn

mac cosmetics

nike air max

dansko shoes

burberry outlet

true religion outlet

roshe run

nike air

hermes outlet

burberry outlet

para jumpers

sac longchamp

prada outlet

nike air force

michael kors

links of london

nike mercurial

nike air max 2018

nike air max

mulberry outlet

jordan 12

coach purse

jordan xx9

salvatore ferragamo

nike outlet

air max

adidas flip-flops

bcbg max

replica watches

rolex

sac burberry

tommy hilfiger

softball bats

lebron james shoes

nike air max

nike air max

balenciaga shoes

fivefingers

nike air max 95

nike air force

nike air max

coach outlet

tods shoes

fitflops

stuart weitzman

mont blanc

supra

ray ban sunglasses

louboutin

air max

nike air huarache

belgium world cup jerseys

new balance trainer

fitflops outlet

vans

jordan 6

louboutin

kate spade outlet

nike air max

red bottoms

oakley sunglasses

air max 90

furla handbags

celine

oakley

nike

new balance

cheap nfl jerseys

nike outlet

longchamp

timberland boots

louboutin

michael kors

beats by dre

jordan

ralph lauren outlet

pandora charms

mac makeup

lebron 11

flip flops

portugal world cup jersey

omega watches

mac makeup

polo lacoste

oakley sunglasses

ray ban outlet

air max

pandora jewelry

rolex

nike air max

kenzo clothing

iphone x case

manolo blahnik

roshe run

iphone cases

karen millen uk

longchamp

puma shoes

longchamp handbags

england world cup jersey

jordans

jordans

ghd

jordans

converse

oakley vault

dolce and gabbana

goyard handbags

huarache

reebok

longchamp

nike blazer

jordan 3

chloe handbags

ray ban sunglasses

jordan

jordans

hermes

jordan shoes

mulberry

giuseppe zanotti

kevin durant shoes

adidas superstar

timberland

thomas sabo

cartier love bracelet

pandora

jordan retro

prada outlet

ralph lauren

fendi

air max

louboutin

tommy hilfiger

swarovski uk

chrome hearts

wedding dresses

nike roshe run

nike air max

nike free

sac michael kors

oakley sunglasses cheap

ralph lauren

air jordan

pandora

kate spade

ed hardy

kate spade outlet

baseball bats

tory burch outlet

adidas outlet

montre

salomon shoes

argentina world cup jersey

nike mercurial

oakley sunglasses

roshe run

hogan

nike shoes

jordan shoes

wedding dresses

true religion

bottega veneta

beats by dre

adidas uk

fitflop

asics

nike free

mac cosmetics

kobe 10

reebok

roty burch outlet

asics

ray ban

rolex watches

nike air max

jimmy choo

kobe 9

birkin bag

ray ban

asics gel

timberland

brazil world cup jersey

adidas outlet

basketball shoes

air jordan

adidas trainers

wedding dresses

converse

ray ban

reebok

nike roshe run

dansko

michael kors outlet

air max 2017

mizuno

coach outlet

prada

oakley

marc jacobs

bottega

roty burch outlet

free run

michael kors

herve leger

louboutin

versace handbags

air max 97

michael kors

new balance

spain world cup jersey

converse shoes

cheap eyeglasses

bcbg

hogan shoes

jordan 11

mizuno running shoes

ray ban

hogan outlet

michael kors outlet online

boy london clothing

vanessa bruno

valentino

nike store

michael kors canada

new balance

barbour

jordan

converse

polo ralph lauren

converse

michael kors

michael kors outlet

adidas outlet

true religion jeans

pandora jewelry

guess

michael kors outlet

montre homme

louboutin

beats headphones

adidas outlet store

coach outlet online

ralph lauren outlet

mizuno wave

soccer shoes

nike vapor max

oakley sunglasses

montre pas cher

tommy hilfiger

adidas

ray ban sunglasses

timberland

sac guess

nike kyrie 2

nike store

nike blazer

miu miu shoes

yves saint laurent

oakley sunglasses

lebron shoes

air max

burberry outlet

wedding dresses

michael kors outlet

adidas running shoes

swarovski

true religion jeans

jordan

vans

rolex watches

jordan 4

oakley vault

adidas outlet

nike free

louboutin pas cher

oakley

montblanc

adidas soccer cleats

iphone 7 cases

dolce and gabbana

guess

polo ralph lauren

polo ralph lauren

nike air

france world cup jersey

new balance shoes

adidas slides

nike free run

converse chuck taylor

nike shoes

jerseys

lacoste shoes

roshe run

supra

jordan 5

new balance

nike air

longchamp

ralph lauren uk

christian louboutin

adidas clothing

ralph lauren

instyler ionic styler

fendi

air max 95

air max 2017

nike clothing

ferragamo

timberland boots

germany world cup jersey

michael kors borse

ferragamo

swarovski crystal jewelry

true religion outlet

jordan shoes

ray ban

nike air max

clarks shoes

replica watches

marc jacobs

nike roshe run

stuart weitzman

true religion jeans

adidas outlet

vans shoes

ray ban sunglasses

yeezy shoe

cheap nfl jerseys

pandora

soccer jerseys

michael kors outlet

nike pas cher

nike blazer pas cher

swarovski

nike air max plus

2018.5.5xukaimin

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 (in section)

Heading 2 (in section)

Heading 3 (in section)

Heading 4 (in section)

Heading 5 (in section)
Heading 6 (in section)

Heading 1 (in article)

Heading 2 (in article)

Heading 3 (in article)

Heading 4 (in article)

Heading 5 (in article)
Heading 6 (in article)

Heading 1 (in hgroup)

Heading 2 (in hgroup)

Text-level semantics

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Address: somewhere, world

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example

Embedded content

audio

img

svg

video

Interactive content

details / summary

More info

Additional information

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html>
      <head>
      </head>
      <body>
          <div class="main"> <div>
      </body>
  </html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

unordered list

description list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

figure

Figcaption content

Tabular data

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Forms

Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

Inputs as siblings of labels

Clickable inputs and buttons

box-sizing tests