Skip to main content

Page structure

MWF page markup requires a specific HTML structure and order of elements to define how styling, behaviors and assets are included or loaded. Modules and components are programmatically positioned based on their relationships to one another.

For 95% of users, implementing modules will be the fastest way to a tuned and stable final product. Advanced users can use smaller building blocks to create page modules.

Here is an example of MWF page structure.


<!doctype html>
    <html class="no-js" lang="en" dir="ltr">
        <head>
            <title>Homepage - title</title>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="Example page structure on Microsoft Web Framework">
            <meta name="keywords" content="Development Site">
            <meta name="author" content="Microsoft Corporation">
            <!-- Meta additions -->

            <!-- Stylesheet requirements -->
            <!-- Visit the CDN documentation to learn about versions. -->
            <link rel="stylesheet"
                href="//assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.26.0/css/mwf-west-european-default.min.css">

            <!-- Stylesheet additions -->
            <!-- Include as a single optimized css file on CDN. -->
            <!-- ... -->
        </head>
        <body>
            <!-- Accessibility requirement -->
            <a class="m-skip-to-main" href="#mainContent" tabindex="0">Skip to main content</a>
             
            <!-- Universal header -->

            <!-- Main page content should be wrapped with semantically meaningful html elements (e.g.: article, main) whenever possible. A div element can be used as long as it also contains a role="main" for Accessibility. -->
            <main id="mainContent" data-grid="container">
                <!-- Modules should be stacked with a sibling relationship in order to programmatically adjust their position, margins, and padding. -->
                <div class="m-hero"> ... </div>
                <div data-grid="col-12 stack-3" class="m-hyperlink-group-content-placement"> ... </div>
                <div data-grid="col-12" class="m-product-placement f-device"> ... </div>
                <div data-grid="col-12" class="m-product-placement f-app"> ... </div>
            </main>

            <!-- Universal footer -->

            <!-- JavaScript requirements -->
            <!-- Include before </body>. Use the script file based on preference (UMD, AMD, CommonJS, Auto, etc.) -->
            <script async="async"
                src="//assets.onestore.ms/cdnfiles/external/mwf/short/v1/latest/scripts/mwf-auto-init-main.var.min.js"></script>
            <noscript></noscript>

            <!-- JavaScript dependencies -->
            <!-- ... -->

            <!-- JavaScript additions -->
            <!-- ... -->
        </body>
    </html>

NOTE: For CDN specifications read documentation.