<div class="profileAttribute">
    <label>Account Name</label>
    <span>
        <span data-bind="text: accountName"></span>
        <span data-bind="if: hasDefaultFlag" class="commentGrayed">
              |  Default for 
            <span data-bind="text: defaultAccountString"></span>
        </span>
    </span>
</div>

<p>
    <label for="Amount">Amount</label>
    $<input data-bind="value: amountMin"
        name="AmountMin" type="text" placeholder="min" class="formInputShort inline" />
    $<input data-bind="value: amountMax"
        name="AmountMax" type="text" placeholder="max" class="formInputShort inline" />
</p>

<span>
    <button onclick="submitTo('/EmailPreview/SendEmailPreview')"
        class="btn btn-default">
            Send
        </button>
    </span>
<span style="float: right">
    <button type="button" onclick="toggleViewModelForm()"
        style="width: 160px" class="btn btn-default" id="toggleModelData">
        Show ViewModel
    </button>
</span>

<div>
    <br/>
</div>

Semantic Structure

"What is everything?"

- Socrates, probably

The EAV Model 

• Entity - the item being described
• Attribute - what of the entity is being described
• Value - the value of the specified attribute

Shamelessly taken from Wikipedia

Introducing ANTES*.

* I just wanted a catchy name.

<button
    class="vp-button primary">
</button>

This changes everything. Again.

• Anterior
• Nomenclature for
• Terse and
• Expressive
• Selectors

The world's most efficient HTML.

• Entity prefixed with vp-
• Traits unprefixed
• Attribute-Traits dashed
• 35% better

<div class="vp-modal">

 16.9 mm ------ [

<div class="vp-panel text-center">
    <h2>You have useless Feebies.</h2>
    <p>Lorem ipsum dolor sit amet, carpe diem. Amen.</p>

    <button class="vp-button primary block">
        <span>I agree.</span>
    </button>
</div>

Entity

Attribute-Value

(Attribute)-Values