Structure

Structural components form the basic structure of a website that uses the State Web Template. This structure contains elements that connect the web pages together.

Webpage structure

There are six main structural components in the State Web Template.

Example
Source code

Example

Web Page Template Structure: Global Header (which includes Utility header, Setting, Site Header, Navigation and Search), Main Content and Footer.

HTML Source code

<!doctype html>
                <html lang="en">
                <head>
                   <meta charset="utf-8">
                   <title>State Template</title>
                   <meta name="Author" content="State of California" />
                   <meta name="Description" content="State of California" />
                   <meta name="Keywords" content="California, government" />
                   ❴% include "/src/_includes/head-css-js.njk" %❵
               </head>
               <body>
                  <header role="banner" id="header" class="global-header fixed">
                  <div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div>
                  ❴% include "/src/_includes/utility-header.njk" %❵
                  ❴% include "/src/_includes/site-header.njk" %❵
                  ❴% include "/src/_includes/mobile-controls.njk" %❵
                  <div class="navigation-search full-width-nav container">
                    <div id="head-search" class="search-container search-container featured-search">
                    ❴% include "/src/_includes/search.njk" %❵
                    </div>
                        ❴% include "/src/_includes/navigation.njk" %❵
                     </div>
                   </header>
                   <div id="main-content" class="main-content">
                       <div class="container">
                           <main class="main-primary">
                              Page content
                           </main>
                      </div>
                  </div>
                  ❴% include "/src/_includes/global-footer.njk" %❵
                  ❴% include "/src/_includes/scripts.njk" %❵
               </body>
             </html>