Prefer semantic elements

Author: nygrenh

src/components/Banner.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Bruce from '../images/banner.svg'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const BannerWrapper = styled.div`
+const BannerWrapper = styled.header`
   height: 30rem;
   max-height: 50vh;
   display: flex;

src/components/ContentArea.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { SIDEBAR_WIDTH } from './Sidebar'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const ContentAreaContainer = styled.div`
+const ContentAreaContainer = styled.main`
   @media only screen and (min-width: 1200px) {
     margin-left: ${SIDEBAR_WIDTH};
   }

src/components/Sidebar.js

@@ -59,7 +59,7 @@ const LogoContainer = styled.div`
   align-items: center;
 `
 
-const TreeViewContainer = styled.div`
+const TreeViewContainer = styled.nav`
   flex: 1;
 `
 

src/partials/ProgrammingExercise.js

@@ -17,7 +17,7 @@ import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
 const accentColor = '#FAAA38'
 
-const Wrapper = styled.div`
+const ProgrammingExerciseWrapper = styled.section`
   padding 1rem;
   margin-bottom: 2rem;
   border-left: 0.2rem solid ${accentColor};
@@ -174,7 +174,7 @@ class ProgrammingExercise extends React.Component {
     }
 
     return (
-      <Wrapper>
+      <ProgrammingExerciseWrapper>
         <Header>
           <StyledIcon icon={icon} size="1x" />
           <HeaderMuted>Tehtävä: </HeaderMuted>
@@ -297,7 +297,7 @@ class ProgrammingExercise extends React.Component {
             </div>
           )}
         </Body>
-      </Wrapper>
+      </ProgrammingExerciseWrapper>
     )
   }
 }

src/partials/TextBox.js

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faInfoCircle, faUserGraduate } from '@fortawesome/free-solid-svg-icons'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const Wrapper = styled.div`
+const Wrapper = styled.aside`
   padding 1rem;
   margin-bottom: 2rem;
   border-left: 0.2rem solid var(--color);

src/templates/CourseContentTemplate.js

@@ -28,7 +28,7 @@ const StyledIcon = styled(FontAwesomeIcon)`
   font-size: 1em;
 `
 
-const ContentWrapper = styled.div``
+const ContentWrapper = styled.article``
 
 const UpLink = styled(Link)`
   color: #332c2cb3 !important;