Die gewünschte HTML-Struktur wurde übernommen.

ui/src/components/App.svelte

@@ -1,8 +1,11 @@
+<header>
+    Arbeitszeiten
+</header>
 <Nav {active} />
-
 <main>
     <svelte:component this={Route} {params} />
 </main>
+<footer><p>© Torsten Lücke 2021</p></footer>
 
 <script>
 	import Navaid from 'navaid';

ui/src/routes/Views.svelte

@@ -6,8 +6,11 @@
 	<title>{params.title}</title>
 </svelte:head>
 
+<section id="list-records">
+    <header>
         <h1>{params.title}</h1>
-
+    </header>
+    <article>
         <table>
             <thead>
             <tr>
@@ -28,3 +31,5 @@
             {/each}
             </tbody>
         </table>
+    </article>
+</section>

ui/src/routes/WorkingHours.svelte

@@ -13,9 +13,12 @@
     <title>{title}</title>
 </svelte:head>
 
-<h1>{title}</h1>
-
 {#if activeRecord === null}
+    <section id="list-records">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
             <table>
                 <thead>
                 <tr>
@@ -37,7 +40,14 @@
                 {/each}
                 </tbody>
             </table>
+        </article>
+    </section>
 {:else}
+    <section id="edit-record">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
             <!--suppress HtmlUnknownTarget -->
             <form action="/working-hours" name="editRecord">
                 <fieldset name="record-data">
@@ -57,4 +67,6 @@
                     <button>Abbrechen <IconifyIcon icon={xIcon} /></button>
                 </fieldset>
             </form>
+        </article>
+    </section>
 {/if}