Markup has a hierarchy, which creates parent/child relationships between elements. Maintaining an accurate hierarchy is essential for readability and avoiding validation issues.

Prerequisites

• Code: HTML: Nesting

Single-line nesting

Child elements may be most readable without line breaks. Example:

• Each line is under 80 characters.
• Each line has no children.

<!-- Good -->
<action method="removeItem">
    <type>skin_js</type>
    <name>js/prototype.js</name>
</action>

<!-- Bad -->
<action method="removeItem"><type>skin_js</type><name>js/prototype.js</name></action>

Multi-line nesting

Use a single blank line to break up complex hierarchies. Separate child elements with a single blank line.

<catalog_product_compare_index>
    <reference name="head">
        <action method="setHeaderTitle" translate="title" module="catalog">
            <title>Compare Products</title>
        </action>

        <action method="removeItem">
            <type>js_css</type>
            <name>scriptaculous/scriptaculous.js</name>
        </action>
    </reference>

    <remove name="gravdept.page.html.meta-viewport" />
</catalog_product_compare_index>

Hybrid nesting

In practice, single-line and multi-line syntaxes are both used. The goal is optimum readability for the given content. This is more important than strictly following a single syntax.

Grouping elements

Complex markup can take hundreds of lines to describe relatively simple content. From an authoring perspective, this can be difficult to scan and read. Adding several line-breaks between large sets of markup improves readability for developers. Whitespace between elements is ignored, and the additional bytes are negligible.