Ako spravne pouzit HTML5 elementy

23. 7. 2015 09:53:47

Ahojte,

mam nasledovnu sablonu a chcem do nej zakomponovat nove HTML5 prvky, hlavne teda header, footer, main, aside, section.

<div id="page-wrapper">
    <div id="page">
        {% if page.maxima %}
            <div id="maxima-wrapper">
                <div id="maxima" class="row">{{ page.maxima }}</div>
            </div>
        {% endif %}
        {% if page.header or page.secondary_menu %}
            <div id="header-wrapper">
                <div id="header" class="row">
                    {% if page.secondary_menu %}{{ page.secondary_menu }}{% endif %}
                    {% if page.header %}{{ page.header }}{% endif %}
                </div>
            </div>
        {% endif %}
        {% if page.top %}
            <div id="top-wrapper">
                <div id="top" class="row">{{ page.top }}</div>
            </div>
        {% endif %}
        {% if page.primary_menu %}
            <div id="menu-wrapper">
                <div id="primary-menu" class="row">{{ page.primary_menu }}</div>
            </div>
        {% endif %}
        <div id="main-wrapper">
              <div id="main" class="row">
                <div id="center" class="small-24 large-{{ content_grid_width }} large-push-{{ content_grid_push }} columns">
                  {% if page.breadcrumb %}
                    <div id="breadcrumb">{{ page.breadcrumb }}</div>
                  {% endif %}
                  {% if page.highlighted %}
                    <div id="highlighted">{{ page.highlighted }}</div>
                  {% endif %}
                  {% if page.help %}
                    <div id="help">{{ page.help }}</div>
                  {% endif %}
                  {% if title %}
                    {{ title_prefix }}<h1 class="page-title">{{ title }}</h1>{{ title_suffix }}
                  {% endif %}
                  {% if tabs %}
                    {{ tabs }}
                  {% endif %}
                  {% if page.above %}
                    <div id="above-wrapper">
                      <div id="above">{{ page.above }}</div>
                    </div>
                  {% endif %}
                  <div id="content-wrapper">
                    <div id="content">{{ page.content }}</div>
                  </div>
                  {% if page.below %}
                    <div id="below-wrapper">
                      <div id="below">{{ page.below }}</div>
                    </div>
                  {% endif %}
                </div>
                {% if page.left %}
                    <div id="left-wrapper" class="small-24 large-5 large-pull-{{ content_grid_width }} columns">
                        <div id="left">{{ page.left }}</div>
                    </div>
                {% endif %}
                {% if page.right %}
                    <div id="right-wrapper" class="small-24 large-5 columns">
                        <div id="right">{{ page.right }}</div>
                    </div>
                {% endif %}
            </div>
        </div>
        {% if page.bottom %}
            <div id="bottom-wrapper">
                <div id="bottom" class="row">{{ page.bottom }}</div>
            </div>
        {% endif %}
        {% if page.footer %}
            <div id="footer-wrapper">
                <div id="footer" class="row">{{ page.footer }}</div>
            </div>
        {% endif %}
        {% if page.minima %}
            <div id="minima-wrapper">
                <div id="minima" class="row">{{ page.minima }}</div>
            </div>
        {% endif %}
    </div>
</div>

Co mi nie je uplne jasne, je ci mam pouzit znacky, v mojom pripade, namiesto wrapperov, alebo mam touto znackou obalit wrappery, alebo ma ist znacka medzi wrapper a row alebo ma byt samotny row zmeneny na znacku.

Konkretne teda neviem ktory z tychto sposobov je ten spravny:

23. 7. 2015 09:53:47