Page structure

Ensure usability and accessibility by using a consistent HTML structure in pages and apps

Note

This document does not apply for widgets

Metadata and head

Write the page language in the <html> tag. Use sv for Swedish and en for English. Read more about guidelines for page language in webbriktlinjer.se (in Swedish)
```
<html lang="sv"></html>
```
Write a relevant page title using the <title> tag. Read more about guidelines for page titles in webbriktlinjer.se (in Swedish).
Include the reset utility.

Body

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

A11y nav component. Defines links for keyboard users (for example “Skip to main content”)
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
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.
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>)
Footer. Should be the same across all pages under the same site.

Minimal template

The components above are expected to be placed like this:

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