Guidelines

In case you want short and clear explanation of good habits when building a website.

Disclaimer: Do not use components from this website (except titled as "Correct usage"). It was slightly redesigned and new styling was added to help present you some examples of HTML layout.

Layout/grid

To set layout for website use <article> (for rows) and <section> (for columns in row) tags.

Single column article:

Multi column article:

After specified requirements are met the layout changes, and columns (sections) are not presented side by side, but underneath each other.

Check by using inspection tool F12 and preview this website with device toolbar to check responsive behavior.

Correct usage:

<article>
    <section>
        <p>This is a blank section. Put website content here.</p>
    </section>
    <section>
        <p>This is a blank section. Put website content here.</p>
    </section>
    <section>
        <p>This is a blank section. Put website content here.</p>
    </section>
</article>

You may ask yourself Why do I need to use these to make my website look clean?. Well, these tags like article and section are guidelines for HTML and CSS how to modify layout with multiple @media tags in CSS. Without it your website might not look good and layout can break if you use multiple columns in your website.

Tables

These are used to present data in organized way with ability to compare to each other.

For responsive behavior (your table won't overflow the website) put your table inside div.

Table headers (th) are automatically marked with slightly darker background and bolded text.

Summary

To summary any data (such as topic description, FAQ section etc.) use summary tag.

Dropdown menu

It uses one class toggler for <a> element to allow javascript detect dropdown menu.

Dropdowns are used to hide some of the options so they do not take up space on the page.

Important note: Dropdowns can be used anywhere on the website as long as the component structure follows the template. (Dropdowns may be used in navbars, inside aside, inside summary etc. as long as component structure is kept.)

Correct usage:

Navbar

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="guidelines.html">guidelines</a></li>
        <li>
            <div class="dropdown">
                <a class="toggler">Dropdown toggler</a>
                <ul>
                    <li><a href="#">Redirect to top of website</a></li>
                    <li><a href="index.html">Index page</a></li>
                    <li><a href="guidelines.html">Guidelines page</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

Any other part of website

<div class="dropdown">
    <a class="toggler"><b>Dropdown toggler</b></a>
    <ul>
        <li><a href="#">Redirect to top of website</a></li>
        <li><a href="index.html">Index page</a></li>
        <li><a href="guidelines.html">Guidelines page</a></li>
    </ul>
</div>

Dialog

Dialogs are website elements to reveal content hidden under a button description (e.g. cookies files management, privacy policy etc.)

Correct usage:

• Remember to assign proper, unique for single page, ID (<dialog id="dialog1">, <button class="dialog-close" data-dialog_id="dialog1">×</button>) for every dialog so javascript will know which dialog is needed to be shown.
• Use proper structure of dialog HTML element (which can be found in index page)