The Webflow rulebook

HTML rules

Markup that maps cleanly onto Webflow's own elements, and class names a designer can work with afterwards.

Semantic elements

Use <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>. Use <button> for clicks, <a> for links, and <img> with alt for images.

These are the elements Webflow has natives for. A <div> pretending to be a button arrives as a div.

Classes, never ids

Every element that is styled or scripted needs a class. Ids are not used for styling or for JavaScript.

Names follow BEM inside the section's own block: block, block__element, block--modifier. All class names inside a section belong to that section's block.

html

<section class="features">
  <div class="features__grid">
    <article class="features__card features__card--highlighted">
      <h3 class="features__title">Fast</h3>
    </article>
  </div>
</section>

No ul/li lists

Lists are div-based flex or grid layouts instead. Webflow's list elements carry their own styling assumptions that fight imported CSS.

Rejected

<ul class="features__list">
  <li>Fast</li>
  <li>Compatible</li>
</ul>

Correct

<div class="features__list">
  <div class="features__item">Fast</div>
  <div class="features__item">Compatible</div>
</div>

Images and icons

Foreground <img> with position: absolute and object-fit: cover, never a CSS background image.
Photography from Unsplash only (https://images.unsplash.com/…).
Inline SVG for every icon. No emoji characters anywhere in the markup.

Behaviour binds to attributes

Anything scripted is found through a data-ht-* attribute, not through its class. Classes are for styling and a designer may rename them in Webflow; attributes survive that.

html

<button class="hero__cta" data-ht-open-modal>Get started</button>