Go to main content
Go to KTH Intranet

Page structure

Ensure usability and accessibility by using a consistent HTML structure across pages

Note

This document does not apply for widgets

HTML metadata and head

HTML body

The body of a KTH page or application should have the following parts:

  1. A11y nav component. Defines links for keyboard users (for example “Skip to main content”)
  2. KPM. Defines the region for the entrances and Personal menu.
    1. Entrances. Link to kth.se, intranet and student web
    2. Personal menu. Links to relevant pages for the user
  3. Header. (<header>) Should be the same across all pages under the same site. It is divided into:
    1. Logotype
    2. Mega-menu. Include dropdowns that opens panels to different places
    3. Tools. Include site-wide tools like search and language switcher.
  4. Content. Everything in between the header and the footer. This content can change between pages in the same site.
    1. Breadcrumbs
    2. Sidebar (<aside>)
    3. Main content (<main>)
  5. Footer. Should be the same across all pages under the same site.

Minimal template

Place the components mentioned before like this:

<body>
  <div class="kth-a11y-nav"></div>
  <div class="kth-kpm"></div>
  <header class="kth-header"></header>
  <div class="kth-main-content">
    <nav class="kth-breadcrumbs"></nav>
    <aside></aside>
    <main></main>
  </div>
  <footer class="kth-footer"></footer>
</body>

CSS

  • Include the reset utility
  • Include all CSS required by all components