Pages can be as simple or complex as they need to be. A page that is an overview of a school or program might be formatted with an assortment of content chunks and sections, while a page that is meant to be more basic and functional might only have one or two content chunks in a single section.
Basic page structure
Show/hide markup
<!DOCTYPE html>
<html lang="en">
<head>
<!-- global css from //assets.iu.edu -->
<!-- brand.css, search.css from //assets.iu.edu -->
<!-- site css -->
<!-- modernizr from //assets.iu.edu -->
</head>
<body class="landmarks">
<header id="header">
<!-- skip nav -->
<!-- global branding bar -->
<!-- global toggles and search -->
<!-- offcanvas: includes menu for mobile -->
<div class="site-header">
<!-- site-name -->
</div>
<!-- main navigation -->
<!-- optional: secondary navigation -->
<!-- banner, only if decorative (image only) -->
</header>
<!-- banner, only if informative (includes content as a text overlay over the image) -->
<main class="">
<div class="content-top">
<!-- breadcrumbs -->
<!-- optional: page-title -->
</div>
<div class="main-content">
<div id="content" class="section">
<!-- Page Content -->
</div>
<!-- optional: footer-call-to-action -->
</div>
<!-- section/sidebar navigation -->
</main>
<!-- optional: belt -->
<!-- optional: skirt -->
<!-- footer -->
<!-- jQuery -->
<!-- global js from //assets.iu.edu -->
<!-- global search.js from //assets.iu.edu -->
<!-- search initialization (in separate file or included at top of site.js) -->
<!-- site JavaScript files -->
</body>
</html>A simple page
When giving readers straightforward information, less is more.
A complex page
Use multiple sections and chunk types when you want to tell a complex story.
