HTML5 Semantic in livesite

Dear Team,

We are planning to implement the HTML5 Semantic in our livesite application i.e., <header role="banner"> , <footer role="contentinfo"> , <main role="main"> tags. Kindly suggest me a best approach to implement Semantic tag using livesite.

Thanks,

Dharshak Sagar

Find more posts tagged with

Comments

Garth McMillan

It really depends on your situation with your template use.

Assuming you are using components, you can either:

edit the existing components and change the relevant elements and add the relevant attributes, or
create new components that output the HTML you want and use them.

There is plenty of information on how to do that in the documentation as well as these forums.

dsagar

Thanks for you suggestion.

My requirement is to implement the following type of structure. Kindly help me to generate the below structure using livesite.

<body>
<header>
        (Component)
    </header>
    <nav>
        (Component)
    </nav>
    <div>
        (Component)
    </div>
    <div class="row">
        <main role="main" class="col-xs-12 col-md-9">
            (Component)
        </main>
        <div role="complementary" class="col-xs-12 col-md-9">
            (Component)
        </div>
        <div role="complementary" class="col-xs-12 col-md-3">
            (Component)
        </div>
    </div>
    <footer>
        (Component)
    </footer>
</body>

Thanks,

Dharshak Sagar

Rick Poulin

You're gonna have to change the top-level layout XSL to make this happen -- you should alter the pagetype-config.xml and override the default fixed-layout.page.xsl stylesheet.

Beyond that, you're gonna have to do a bit of legwork on your own.