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.

<!doctype html>
                <html lang="en">
                   <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" %❵
                  <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" %❵
                        ❴% include "/src/_includes/navigation.njk" %❵
                   <div id="main-content" class="main-content">
                       <div class="container">
                           <main class="main-primary">
                              Page content
                  ❴% include "/src/_includes/global-footer.njk" %❵
                  ❴% include "/src/_includes/scripts.njk" %❵

Structural elements