fixed semantic markup

src/components/main/Footer/index.tsx

@@ -5,10 +5,10 @@ import styles from './styles.module.scss';
 interface IProps {}
 
 const Footer: FC<IProps> = memo(() => (
-  <div className={styles.footer}>
+  <footer className={styles.footer}>
     <div className={styles.slogan}>Уделяй больше времени тишине. Спасибо</div>
     <div className={styles.copy}>2009 - {new Date().getFullYear()}</div>
-  </div>
+  </footer>
 ));
 
 export { Footer };

src/components/node/NodeTitle/index.tsx

@@ -64,13 +64,13 @@ const NodeTitle: VFC<IProps> = memo(
             </div>
 
             {!!username && (
-              <div className={styles.name}>
+              <aside className={styles.name}>
                 {isLoading ? (
                   <Placeholder width="100px" />
                 ) : (
                   `~${username.toLocaleLowerCase()}, ${getPrettyDate(createdAt)}`
                 )}
-              </div>
+              </aside>
             )}
           </div>
 

src/containers/main/Header/index.tsx

@@ -60,7 +60,7 @@ const Header: FC<HeaderProps> = observer(() => {
   }, [top]);
 
   return (
-    <div className={classNames(styles.wrap, { [styles.is_scrolled]: isScrolled })}>
+    <header className={classNames(styles.wrap, { [styles.is_scrolled]: isScrolled })}>
       <div className={styles.container}>
         <div className={styles.logo_wrapper}>
           <Logo />
@@ -68,7 +68,7 @@ const Header: FC<HeaderProps> = observer(() => {
 
         <Filler className={styles.filler} />
 
-        <div className={styles.plugs}>
+        <nav className={styles.plugs}>
           <Authorized>
             <Anchor
               className={classNames(styles.item, {
@@ -97,7 +97,7 @@ const Header: FC<HeaderProps> = observer(() => {
               БОРИС
             </Anchor>
           </Authorized>
-        </div>
+        </nav>
 
         {isUser && <UserButton user={user} onLogout={logout} authOpenProfile={openProfile} />}
 
@@ -107,7 +107,7 @@ const Header: FC<HeaderProps> = observer(() => {
           </Button>
         )}
       </div>
-    </div>
+    </header>
   );
 });
 

src/containers/node/NodeBottomBlock/index.tsx

@@ -42,18 +42,20 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
           <Group className={styles.comments}>
             {inline && <div className={styles.inline}>{inline}</div>}
 
-            {isLoading || isLoadingComments || (!comments.length && !inline) ? (
-              <NodeNoComments is_loading={isLoadingComments || isLoading} />
-            ) : (
-              <NodeComments order={commentsOrder} />
-            )}
+            <article>
+              {isLoading || isLoadingComments || (!comments.length && !inline) ? (
+                <NodeNoComments is_loading={isLoadingComments || isLoading} />
+              ) : (
+                <NodeComments order={commentsOrder} />
+              )}
+            </article>
 
             {isUser && !isLoading && (
               <NodeCommentForm nodeId={node.id} saveComment={onSaveComment} user={user} />
             )}
           </Group>
 
-          <div className={styles.panel}>
+          <aside className={styles.panel}>
             <div className={styles.left}>
               <Sticky>
                 <div className={styles.left_item}>
@@ -68,7 +70,7 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
                 </div>
               </Sticky>
             </div>
-          </div>
+          </aside>
         </Group>
       </Padder>
     </Group>

src/layouts/NodeLayout/index.tsx

@@ -16,7 +16,6 @@ import { useNodeContext } from '~/utils/context/NodeContextProvider';
 
 import styles from './styles.module.scss';
 
-
 type IProps = {};
 
 const NodeLayout: FC<IProps> = () => {
@@ -56,7 +55,9 @@ const NodeLayout: FC<IProps> = () => {
             />
           </div>
 
-          <NodeBottomBlock commentsOrder="DESC" />
+          <section>
+            <NodeBottomBlock commentsOrder="DESC" />
+          </section>
 
           <Footer />
         </Card>