diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 7bff76e..fb0db18 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2763,10 +2763,6 @@ function template_preprocess_page(&$variables) {
     $variables['main_menu'] = array(
       '#theme' =>'links__system_main_menu',
       '#links' => $variables['main_menu'],
-      '#attributes' => array(
-        'id' => 'main-menu',
-        'class' => array('links', 'inline', 'clearfix'),
-      ),
       '#heading' => array(
         'text' => t('Main menu'),
         'class' => array('visually-hidden'),
@@ -2777,10 +2773,6 @@ function template_preprocess_page(&$variables) {
     $variables['secondary_menu'] = array(
       '#theme' =>'links__system_secondary_menu',
       '#links' => $variables['secondary_menu'],
-      '#attributes' => array(
-        'id' => 'secondary-menu',
-        'class' => array('links', 'inline', 'clearfix'),
-      ),
       '#heading' => array(
         'text' => t('Secondary menu'),
         'class' => array('visually-hidden'),
diff --git a/core/modules/config/lib/Drupal/config/Tests/ConfigEntityListTest.php b/core/modules/config/lib/Drupal/config/Tests/ConfigEntityListTest.php
index 7917731..f97d6cf 100644
--- a/core/modules/config/lib/Drupal/config/Tests/ConfigEntityListTest.php
+++ b/core/modules/config/lib/Drupal/config/Tests/ConfigEntityListTest.php
@@ -166,11 +166,11 @@ function testListUI() {
     $this->assertTitle('Test configuration | Drupal');
 
     // Test for the table.
-    $element = $this->xpath('//div[@id="content"]//table');
+    $element = $this->xpath('//div[@class="l-content"]//table');
     $this->assertTrue($element, 'Configuration entity list table found.');
 
     // Test the table header.
-    $elements = $this->xpath('//div[@id="content"]//table/thead/tr/th');
+    $elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
     $this->assertEqual(count($elements), 3, 'Correct number of table header cells found.');
 
     // Test the contents of each th cell.
@@ -180,7 +180,7 @@ function testListUI() {
     }
 
     // Check the number of table row cells.
-    $elements = $this->xpath('//div[@id="content"]//table/tbody/tr[@class="odd"]/td');
+    $elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
     $this->assertEqual(count($elements), 3, 'Correct number of table row cells found.');
 
     // Check the contents of each row cell. The first cell contains the label,
diff --git a/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationSettingsTest.php b/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationSettingsTest.php
index 80c5a45..b428ffe 100644
--- a/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationSettingsTest.php
+++ b/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationSettingsTest.php
@@ -63,7 +63,7 @@ function testSettingsUI() {
       'settings[comment][comment_node_article][translatable]' => TRUE,
     );
     $this->assertSettings('comment', 'comment_node_article', FALSE, $edit);
-    $xpath_err = '//div[@id="messages"]//div[contains(@class, "error")]';
+    $xpath_err = '//div[contains(@class, "error")]';
     $this->assertTrue($this->xpath($xpath_err), 'Enabling translation only for entity bundles generates a form error.');
 
     // Test that the translation settings are not stored if a non-configurable
diff --git a/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationUITest.php b/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationUITest.php
index 1e21d53..bccaca6 100644
--- a/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationUITest.php
+++ b/core/modules/content_translation/lib/Drupal/content_translation/Tests/ContentTranslationUITest.php
@@ -190,7 +190,7 @@ protected function assertAuthoringInfo() {
       'content_translation[created]' => '19/11/1978',
     );
     $this->drupalPost($path, $edit, $this->getFormSubmitAction($entity));
-    $this->assertTrue($this->xpath('//div[@id="messages"]//div[contains(@class, "error")]//ul'), 'Invalid values generate a list of form errors.');
+    $this->assertTrue($this->xpath('//div[contains(@class, "error")]//ul'), 'Invalid values generate a list of form errors.');
     $this->assertEqual($entity->translation[$langcode]['uid'] == $values[$langcode]['uid'], 'Translation author correctly kept.');
     $this->assertEqual($entity->translation[$langcode]['created'] == $values[$langcode]['created'], 'Translation date correctly kept.');
   }
diff --git a/core/modules/language/lib/Drupal/language/Tests/LanguageUILanguageNegotiationTest.php b/core/modules/language/lib/Drupal/language/Tests/LanguageUILanguageNegotiationTest.php
index 555c198..f513627 100644
--- a/core/modules/language/lib/Drupal/language/Tests/LanguageUILanguageNegotiationTest.php
+++ b/core/modules/language/lib/Drupal/language/Tests/LanguageUILanguageNegotiationTest.php
@@ -423,7 +423,7 @@ function testUrlLanguageFallback() {
     $this->assertTrue($fields[0] == $languages[$langcode_browser_fallback]->name, 'The browser language is the URL active language');
 
     // Check that URLs are rewritten using the given browser language.
-    $fields = $this->xpath('//p[@id="site-name"]/strong/a[@rel="home" and @href=:url]', $args);
+    $fields = $this->xpath('//h1/a[@rel="home" and @href=:url and @class="site-name"]', $args);
     $this->assertTrue($fields[0] == 'Drupal', 'URLs are rewritten using the browser language.');
   }
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/System/ThemeTest.php b/core/modules/system/lib/Drupal/system/Tests/System/ThemeTest.php
index c059f44..dd8920c 100644
--- a/core/modules/system/lib/Drupal/system/Tests/System/ThemeTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/System/ThemeTest.php
@@ -115,7 +115,10 @@ function testThemeSettings() {
 
       // Verify the actual 'src' attribute of the logo being output.
       $this->drupalGet('');
-      $elements = $this->xpath('//*[@id=:id]/img', array(':id' => 'logo'));
+      $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+          ':rel' => 'home',
+        )
+      );
       $this->assertEqual((string) $elements[0]['src'], $expected['src']);
     }
     $unsupported_paths = array(
@@ -163,7 +166,10 @@ function testThemeSettings() {
     $uploaded_filename = 'public://' . $fields[0]['value'];
 
     $this->drupalGet('');
-    $elements = $this->xpath('//*[@id=:id]/img', array(':id' => 'logo'));
+    $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+        ':rel' => 'home',
+      )
+    );
     $this->assertEqual($elements[0]['src'], file_create_url($uploaded_filename));
   }
 
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index 03255e9..6cf32ec 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -12,80 +12,69 @@
  * @ingroup themeable
  */
 #}
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ language.langcode }}" lang="{{ language.langcode }}" dir="{{ language.dir }}">
-<head>
-  <title>{{ head_title }}</title>
+<!DOCTYPE html>
+<html>
   {{ head }}
+  <title>{{ head_title }}</title>
   {{ styles }}
   {{ scripts }}
 </head>
 <body class="{{ attributes.class }}">
-  <div id="page">
-    <div id="header">
-      <div id="logo-title">
-        {% if logo %}
-          <a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home" id="logo">
-            <img src="{{ logo }}" alt="{{ 'Home'|t }}" />
-          </a>
-        {% endif %}
 
-        <div id="name-and-slogan">
-          {% if site_name %}
-            <h1 id="site-name">
-              <a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-            </h1>
-          {% endif %}
-          {% if site_slogan %}
-            <div id="site-slogan">{{ site_slogan }}</div>
-          {% endif %}
-        </div> <!-- /name-and-slogan -->
-      </div> <!-- /logo-title -->
+<div class="l-container">
 
-      {% if header %}
-        <div id="header-region">
-          {{ header }}
-        </div>
-      {% endif %}
+  <header role="banner">
+    {% if logo %}
+      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
+        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
+      </a>
+    {% endif %}
 
-    </div> <!-- /header -->
+    {% if site_name or site_slogan %}
+      <div class="name-and-slogan">
+        {% if site_name %}
+         <h1>
+           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="site-name">{{ site_name }}</a>
+         </h1>
+        {% endif %}
 
-    <div id="container" class="clearfix">
+        {% if site_slogan %}
+          <div class="site-slogan">{{ site_slogan }}</div>
+        {% endif %}
+      </div>{# /.name-and-slogan #}
+    {% endif %}
 
-      {% if sidebar_first %}
-        <div id="sidebar-first" class="column sidebar">
-          {{ sidebar_first }}
-        </div> <!-- /sidebar-first -->
-      {% endif %}
+  </header>
 
-      <div id="main" class="column"><div id="main-squeeze">
+  <main role="main">
+    {% if title %}
+      <h1>{{ title }}</h1>
+    {% endif %}
 
-        <div id="content">
-          {% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
-          {% if messages %}{{ messages }}{% endif %}
-          <div id="content-content" class="clearfix">
-            {{ content }}
-          </div> <!-- /content-content -->
-        </div> <!-- /content -->
+    {{ messages }}
 
-      </div></div> <!-- /main-squeeze /main -->
+    {{ content }}
+  </main>
 
-      {% if sidebar_second %}
-        <div id="sidebar-second" class="column sidebar">
-          {{ sidebar_second }}
-        </div> <!-- /sidebar-second -->
-      {% endif %}
+  {% if page.sidebar_first %}
+    <aside class="l-sidebar-first" role="complementary">
+      {{ page.sidebar_first }}
+    </aside>{# /.l-sidebar-first #}
+  {% endif %}
 
-    </div> <!-- /container -->
+  {% if page.sidebar_second %}
+    <aside class="l-sidebar-second" role="complementary">
+      {{ page.sidebar_second }}
+    </aside>{# /.l-sidebar-second  #}
+  {% endif %}
 
-    <div id="footer-wrapper">
-      <div id="footer">
-        {% if footer %}{{ footer }}{% endif %}
-      </div> <!-- /footer -->
-    </div> <!-- /footer-wrapper -->
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
 
-  </div> <!-- /page -->
+</div>{# /.l-container #}
 
 </body>
 </html>
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index b072919..4844559 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -64,39 +64,30 @@
  * @ingroup themeable
  */
 #}
-<div id="page">
-
-  <header id="header" role="banner" class="clearfix">
+<div class="l-container">
 
+  <header role="banner">
     {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
+      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
         <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
       </a>
     {% endif %}
 
     {% if site_name or site_slogan %}
-      <div id="name-and-slogan">
+      <div class="name-and-slogan">
         {% if site_name %}
-          {% if title %}
-            <p id="site-name"><strong>
-              <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-            </strong></p>
-          {# Use h1 when the content title is empty #}
-          {% else %}
-            <h1 id="site-name">
-              <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-            </h1>
-          {% endif %}
+         <h1>
+           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="site-name">{{ site_name }}</a>
+         </h1>
         {% endif %}
 
         {% if site_slogan %}
-          <p id="site-slogan">{{ site_slogan }}</p>
+          <div class="site-slogan">{{ site_slogan }}</div>
         {% endif %}
-      </div><!-- /#name-and-slogan -->
-    {% endif %}
+      </div>{# #name-and-slogan #}
+   {% endif %}
 
     {{ page.header }}
-
   </header>
 
   {% if main_menu or secondary_menu %}
@@ -108,41 +99,55 @@
 
   {{ breadcrumb }}
 
-  {% if messages %}
-    <div id="messages">{{ messages }}</div>
-  {% endif %}
+  {{ messages }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content"></a>{# link is in html.html.twig #}
 
-  <div id="main" role="main" class="clearfix">
-    <a id="main-content"></a>
+    <div class="l-content">
+      {% if page.highlighted %}
+        {{ page.highlighted }}
+      {% endif %}
 
-    <div id="content" class="column">
-      {% if page.highlighted %}<div id="highlighted">{{ page.highlighted }}</div>{% endif %}
       {{ title_prefix }}
-      {% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
+      {% if title %}
+        <h1>{{ title }}</h1>
+      {% endif %}
       {{ title_suffix }}
-      {% if tabs %}<div class="tabs">{{ tabs }}</div>{% endif %}
-      {{ page.help }}
-      {% if action_links %}<ul class="action-links">{{ action_links }}</ul>{% endif %}
+
+      {% if tabs %}
+       {{ tabs }}
+      {% endif %}
+
+      {% if action_links %}
+        <nav class="action-links">{{ action_links }}</nav>
+      {% endif %}
+
       {{ page.content }}
+
       {{ feed_icons }}
-    </div><!-- /#content -->
+    </div>{# /.l-content #}
 
     {% if page.sidebar_first %}
-      <div id="sidebar-first" class="column sidebar">
+      <aside class="l-sidebar-first" role="complementary">
         {{ page.sidebar_first }}
-      </div><!-- /#sidebar-first -->
+      </aside>
     {% endif %}
 
     {% if page.sidebar_second %}
-      <div id="sidebar-second" class="column sidebar">
+      <aside class="l-sidebar-second" role="complementary">
         {{ page.sidebar_second }}
-      </div><!-- /#sidebar-second -->
+      </aside>
     {% endif %}
 
-  </div><!-- /#main -->
+  </main>
 
-  <footer id="footer" role="contentinfo">
-    {{ page.footer }}
-  </footer>
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
 
-</div><!-- /#page -->
+</div>{# /.l-container #}
diff --git a/core/modules/user/lib/Drupal/user/Tests/UserAccountLinksTests.php b/core/modules/user/lib/Drupal/user/Tests/UserAccountLinksTests.php
index 9d714a0..05e5f53 100644
--- a/core/modules/user/lib/Drupal/user/Tests/UserAccountLinksTests.php
+++ b/core/modules/user/lib/Drupal/user/Tests/UserAccountLinksTests.php
@@ -42,15 +42,15 @@ function testSecondaryMenu() {
 
     // For a logged-in user, expect the secondary menu to have links for "My
     // account" and "Log out".
-    $link = $this->xpath('//ul[@id=:menu_id]/li/a[contains(@href, :href) and text()=:text]', array(
-      ':menu_id' => 'secondary-menu',
+    $link = $this->xpath('//ul[@class=:menu_class]/li/a[contains(@href, :href) and text()=:text]', array(
+      ':menu_class' => 'links',
       ':href' => 'user',
       ':text' => 'My account',
     ));
     $this->assertEqual(count($link), 1, 'My account link is in secondary menu.');
 
-    $link = $this->xpath('//ul[@id=:menu_id]/li/a[contains(@href, :href) and text()=:text]', array(
-      ':menu_id' => 'secondary-menu',
+    $link = $this->xpath('//ul[@class=:menu_class]/li/a[contains(@href, :href) and text()=:text]', array(
+      ':menu_class' => 'links',
       ':href' => 'user/logout',
       ':text' => 'Log out',
     ));
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index e4f03b9..135c06f 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -40,6 +40,7 @@ function bartik_preprocess_page(&$variables) {
   }
   if (!empty($variables['secondary_menu'])) {
     $variables['secondary_menu']['#attributes']['id'] = 'secondary-menu-links';
+    $variables['secondary_menu']['#attributes']['class'] = array('links', 'inline', 'clearfix');
   }
 
   $site_config = config('system.site');
diff --git a/core/themes/stark/css/layout.css b/core/themes/stark/css/layout.css
index 628a31d..05d566d 100644
--- a/core/themes/stark/css/layout.css
+++ b/core/themes/stark/css/layout.css
@@ -9,129 +9,128 @@
  * This layout method works reasonably well, but shouldn't be used on a
  * production site because it can break. For example, if an over-large image
  * (one that is wider than 20% of the viewport) is in the left sidebar, the
- * image will overlap with the #content to the right.
+ * image will overlap with the .l-content to the right.
  */
-
-#content,
-#sidebar-first,
-#sidebar-second {
-  display: inline;
-  position: relative;
-}
-
 img {
   height: auto;
   max-width: 100%;
 }
 
+.l-content,
+.l-sidebar-first,
+.l-sidebar-second {
+  display: inline;
+  position: relative;
+}
+
 @media all and (min-width: 480px) and (max-width: 959px) {
-  #content {
+  .l-content {
     width: 100%;
   }
-  body.sidebar-first #content,
-  body.two-sidebars #content {
+  .sidebar-first .l-content,
+  .two-sidebars .l-content {
     width: 67%;
     float: right; /* LTR */
   }
-  [dir="rtl"] body.sidebar-first #content,
-  [dir="rtl"] body.two-sidebars #content {
+  [dir="rtl"] .sidebar-first .l-content,
+  [dir="rtl"] .two-sidebars .l-content {
     float: left;
   }
-  body.sidebar-second #content {
+  .sidebar-second .l-content {
     width: 67%;
     float: left; /* LTR */
   }
-  [dir="rtl"] body.sidebar-second #content {
+  [dir="rtl"] .sidebar-second .l-content {
     float: right;
   }
 
-  #sidebar-first {
+  .l-sidebar-first {
     width: 33%;
     float: left; /* LTR */
   }
-  [dir="rtl"] #sidebar-first {
+  [dir="rtl"] .l-sidebar-first {
     float: right;
   }
 
-  #sidebar-second {
+  .l-sidebar-second {
     width: 33%;
     float: right; /* LTR */
   }
-  [dir="rtl"] #sidebar-second {
+  [dir="rtl"] .l-sidebar-second {
     float: left;
   }
-  body.two-sidebars #sidebar-second {
+  .two-sidebars .l-sidebar-second {
     clear: both;
     width: 100%;
   }
-  [dir="rtl"] body.two-sidebars #sidebar-second {
+  [dir="rtl"] .two-sidebars .l-sidebar-second {
     float: right;
     clear: right;
   }
 
-  body.two-sidebars #sidebar-second .block {
+  .two-sidebars .l-sidebar-second .block {
     float: left; /* LTR */
     width: 33%;
   }
-  [dir="rtl"] body.two-sidebars #sidebar-second .block {
+  [dir="rtl"] .two-sidebars .l-sidebar-second .block {
     float: right;
   }
-  body.two-sidebars #sidebar-second .block:nth-child(3n+1) {
+  .two-sidebars .l-sidebar-second .block:nth-child(3n+1) {
     clear: both;
   }
 }
 
 @media all and (min-width: 960px) {
-  #content {
+  .l-content {
     width: 100%;
     float: left; /* LTR */
   }
-  [dir="rtl"] #content {
+  [dir="rtl"] .l-content {
     float: right;
   }
-  body.sidebar-first #content {
+  .sidebar-first .l-content {
     width: 80%;
     left: 20%; /* LTR */
   }
-  [dir="rtl"] body.sidebar-first #content {
+  [dir="rtl"] .sidebar-first .l-content {
     left: 0;
     right: 20%;
   }
-  body.sidebar-second #content {
+  .sidebar-second .l-content {
     width: 80%;
   }
-  body.two-sidebars #content {
+  .two-sidebars .l-content {
     width: 60%;
     left: 20%; /* LTR */
   }
-  [dir="rtl"] body.two-sidebars #content {
+  [dir="rtl"] .two-sidebars .l-content {
     left: 0;
     right: 20%;
   }
 
-  #sidebar-first {
+  .l-sidebar-first {
     width: 20%;
     float: left; /* LTR */
     left: -80%; /* LTR */
   }
-  [dir="rtl"] #sidebar-first {
+  [dir="rtl"] .l-sidebar-first {
     float: right;
     left: 0;
     right: -80%;
   }
-  body.two-sidebars #sidebar-first {
+  .two-sidebars .l-sidebar-first {
     left: -60%; /* LTR */
   }
-  [dir="rtl"] body.two-sidebars #sidebar-first {
+  [dir="rtl"] .two-sidebars .l-sidebar-first {
     left: 0;
     right: -60%;
   }
 
-  #sidebar-second {
+  .l-sidebar-second {
     float: right; /* LTR */
     width: 20%;
   }
-  [dir="rtl"] #sidebar-second {
+  [dir="rtl"] .l-sidebar-second {
     float: left;
   }
 }