ToDo

Docs: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

View models: https://www.integer-net.com/view-models-in-magento-1-and-2/ https://firegento.com/blog/2017/12/07/better-blocks-magento-2-php-view-models/

List of all XML container names: https://gist.github.com/joshfortyfour/11d0f7dbc7be9e85bf4e9c62c668f465

XML tree

The empty layout

The base page layout empty defines the container structure that most Magento pages use. Most layout handles extend this structure:

File: module-theme/view/base/page_layout/empty.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <container name="root">
        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>

        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>

            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">
                <container name="columns.top" label="Before Main Columns"/>

                <container name="columns" htmlTag="div" htmlClass="columns">
                    <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main"/>
                </container>
            </container>

            <container name="page.bottom.container" as="page_bottom_container" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"/>

            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
        </container>
    </container>
</layout>

Other layouts

Other page layouts “update” (extend) the empty handle:

module-theme/view/frontend/page_layout/1column.xml
module-theme/view/frontend/page_layout/2columns-left.xml
module-theme/view/frontend/page_layout/2columns-right.xml
module-theme/view/frontend/page_layout/3columns.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>

    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>

        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
    </referenceContainer>
</layout>

Actual tree

<root>
    <after.body.start>
    </after.body.start>

    <page.wrapper>
        <global.notices>
        </global.notices>

        <header.container>
        </header.container>

        <page.top>
        </page.top>

        <main.content>
            <columns.top>
            </columns.top>

            <columns>
                <main>
                </main>

                <div.sidebar.main>
                    <sidebar.main>
                    </sidebar.main>
                </div.sidebar.main>

                <div.sidebar.additional>
                    <sidebar.additional>
                    </sidebar.additional>
                </div.sidebar.additional>
            </columns>

            <footer-container>
            </footer-container>
        </main.content>

        <page.bottom.container>
        </page.bottom.container>

        <before.body.end>
        </before.body.end>
    </page.wrapper>
</root>