Markup

General

Use HTML5 for all new projects with the appropriate doctype <!DOCTYPE html>

Tags should be written in all lowercase for readability.

// No

<DIV>
    <P>This is some content</P>
</DIV>

// Yes
<div>
    <p>This is some content</p>
</div>

Headings

Headings should be used as follows:

One unique H1, that describes the content of the page, and the rest of the headings are used meaningful and sequential, without skipping a heading level.

A heading should represent the content below.

// No
<div style="main-heading">News</div>

// Yes<h1>News</h1>

Semantic Elements

At BuiltByCactus we encourage engineers to use semantic HTML5 elements. For example, don’t compose the HTML of meaningless divs and spans when another element may work better and describe the page more.

// No

<section id="wrapper">
    <header>
        <h1>I like Headings</h1>
    </header>

    <section id="main">
        <!-- Main content -->
    </section>

    <section id="secondary">
        <!-- Secondary content -->
    </section>
</section>

// Yes

<div class="wrapper">
    <header>
        <h1>Nymble write great content</h1>
        <!-- Header content -->
    </header>
    <main role="main">
        <!-- Page content -->
    </main>
    <aside role="complementary">
        <!-- Secondary content -->
    </aside>
</div>

Buttons vs Links

Use a link <a> for change of location and use a button <button> to invoke an action.

// No<a href="#" id="js-some-action">Open</a>

// Yes
<button id="js-some-action">Open</button>

Frameworks

We base a lot of builds on Bootstrap 5 this is because it gives us a lot of flexibility with semantic markup and SCSS out of the box.

When using Bootstrap, make sure you don’t load CSS or JavaScript from CDNs. We prefer to have them locally so all requirements are available.

We will sometimes use other frameworks, or not a framework at all but this is usually decided on a project by project basis.

PHP

Try and keep PHP out of the markup as much as possible. When it must be used, stick to the guidelines set out in the PHP in Templates Section.

Indentation

Much like our PHP, we indent markup with 4 spaces.

Engineering Handbook