Heading Tags – Best Practices

Normally we use only one H1 tag for a page, and you’ll most likely find it for the heading.
H1 to H3 tags should suffice on most pages. H4 – H6 tags may be stretching it a bit, unless the page is really text heavy.
Maintain hierarchy while using the heading tags, meaning use the tags in numerical order H2, followed by H3, H4… Don’t skip a level.
Ensure that your keyword is included in H2. This is because Google looks for keyword presence in the title and keyword density in the content while searching and ranking content. There’s no necessity for exact keyword match.
Keep a limit for the number of words that you cram between the header tags. Don’t pack in whole sentences or paragraphs.
It’s not advisable to use the same keywords in heading tags across different webpages on your site.
Do not use header tags simply to make some elements standout. To style any specific element on your website, use CSS.

This is an example of Heading 1

This is an example of Heading 2

This is an example of Heading 3

This is an example of Heading 4

This is an example of Heading 5

This is an example of Heading 6

Columns

Do you want to add multi-column content in your website pages or posts? Columns can be used to create engaging layouts for your posts and pages.

Traditional print media, like newspapers and magazines, have been using multi-column layouts since the very early days of printing. Their goal was to make it easier for users to read the smaller text while utilizing the available space economically.

Single column layouts are more commonly used on the web. However, multi-column grids are still useful for highlighting content and making it easier to scan and read.

At Brandicoot use simple code to create evenly spaced columns. Use <div class=”even-columns”></div> to wrap all the article content. Then use <div class=”col”></div> to contain each column.

2 Column Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac facilisis nulla. Mauris faucibus arcu tellus, quis luctus augue ultricies at. Etiam a lectus condimentum, sollicitudin eros ut, aliquet tortor. In sodales augue est, vel faucibus dolor volutpat ut. Praesent ligula nisl, ullamcorper vel facilisis nec, accumsan sed odio. Pellentesque in est porta, volutpat leo ut, aliquam tortor. Fusce accumsan velit at dictum auctor. Curabitur nec malesuada nisi.

In convallis tristique neque, at finibus quam elementum vitae. Curabitur tincidunt sapien massa, id dapibus libero pretium id. Nulla quis sagittis ex. Mauris tempus vel nunc in condimentum. Duis porta ut felis dictum ornare. Duis tristique semper ullamcorper. Quisque eu rhoncus ligula. Maecenas non tempor dui. Aliquam nec neque eros. Nullam ultrices, nisl sed aliquam pharetra, magna dui pharetra enim, quis dapibus arcu mauris vitae justo.

3 Column Example:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer luctus hendrerit odio, in tempor lacus luctus quis. Aenean molestie justo at efficitur gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur non neque varius, hendrerit libero a, molestie leo. Morbi tristique lectus ut mi viverra, facilisis fermentum mauris sagittis. Sed egestas maximus augue, ut lobortis lectus sodales a. Proin euismod nisl felis, sed eleifend velit ornare a. Donec accumsan efficitur ullamcorper.

4 Column Example:

Buttons

To turn a link into a button you just need head over to the text editing screen and class=”btn” to the link html.

On the text editing screen the code will look like this:

<a class=”btn” href=”https://brandicoot.com.au/”>test button</a>

Example:

test button

Logo farm

To add a logo farm to your page post or widget content use the class “logofarm”

Add the logo images to the post page or widget content. Note: when adding the images insert them with alignment “none” and separate them with a couple of spaces.
Edit logos to be the same height. the example below has them set to 100px high.
head over to the text edit screen and wrap the logos in the following code: <p class=”logofarm”> </p>

The code in the text editing page will look like this:

The logo farm will look like this:

Icons

Find icons on fontawesome.com

paste HTML to text editing screen: <i class=”fab fa-facebook”></i>

Looks like this:
Looks like this with a link:

Images

Left Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus. Accumsan tortor posuere ac ut consequat. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Rutrum quisque non tellus orci ac auctor. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. In arcu cursus euismod quis viverra nibh cras.

Sed pulvinar proin gravida hendrerit lectus a. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Tincidunt eget nullam non nisi est sit amet. Ipsum faucibus vitae aliquet nec ullamcorper sit. Maecenas sed enim ut sem viverra aliquet. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Sed ullamcorper morbi tincidunt ornare massa eget. Tortor id aliquet lectus proin. Neque vitae tempus quam pellentesque nec nam. Vitae nunc sed velit dignissim. Augue mauris augue neque gravida in. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel.

Style Cheat