Better HTML5 Semantic on Header.vue

src/components/Header.vue

@@ -1,10 +1,10 @@
 <template>
-  <nav id="header" class="main-nav">
+  <header id="header" class="main-nav">
     <router-link to="/">
       <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
       <h1>Fruits</h1>
     </router-link>
-  </nav>
+  </header>
 </template>
 
 <script>
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="less">
-nav {
+header {
   background-color: @secondary-color;
   padding: 0.5rem;
   box-shadow: 0 0px 14px 0px #cecece;