diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js
index c6959a7725..460607bc72 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js
@@ -21,16 +21,13 @@ function BlogListPage(props) {
           <div className="col col--8 col--offset-2">
             {items.map(
               ({content: BlogPostContent, metadata: blogPostMetadata}) => (
-                <div
-                  className="margin-bottom--xl"
-                  key={blogPostMetadata.permalink}>
-                  <BlogPostItem
-                    frontMatter={BlogPostContent.frontMatter}
-                    metadata={blogPostMetadata}
-                    truncated>
-                    <BlogPostContent />
-                  </BlogPostItem>
-                </div>
+                <BlogPostItem
+                  key={blogPostMetadata.permalink}
+                  frontMatter={BlogPostContent.frontMatter}
+                  metadata={blogPostMetadata}
+                  truncated>
+                  <BlogPostContent />
+                </BlogPostItem>
               ),
             )}
             <BlogListPaginator metadata={metadata} />
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
index 6699d4386b..a6ad05faf5 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
@@ -92,13 +92,13 @@ function BlogPostItem(props) {
   };
 
   return (
-    <div>
+    <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
       {renderPostHeader()}
-      <article className="markdown">
+      <section className="markdown">
         <MDXProvider components={MDXComponents}>{children}</MDXProvider>
-      </article>
+      </section>
       {(tags.length > 0 || truncated) && (
-        <div className="row margin-vert--lg">
+        <footer className="row margin-vert--lg">
           {tags.length > 0 && (
             <div className="col">
               <strong>Tags:</strong>
@@ -121,9 +121,9 @@ function BlogPostItem(props) {
               </Link>
             </div>
           )}
-        </div>
+        </footer>
       )}
-    </div>
+    </article>
   );
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
index 5ae4c4dd1c..3d4a246fef 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
@@ -29,16 +29,13 @@ function BlogTagsPostPage(props) {
             <div className="margin-vert--xl">
               {items.map(
                 ({content: BlogPostContent, metadata: blogPostMetadata}) => (
-                  <div
-                    className="margin-vert--xl"
-                    key={blogPostMetadata.permalink}>
-                    <BlogPostItem
-                      frontMatter={BlogPostContent.frontMatter}
-                      metadata={blogPostMetadata}
-                      truncated>
-                      <BlogPostContent />
-                    </BlogPostItem>
-                  </div>
+                  <BlogPostItem
+                    key={blogPostMetadata.permalink}
+                    frontMatter={BlogPostContent.frontMatter}
+                    metadata={blogPostMetadata}
+                    truncated>
+                    <BlogPostContent />
+                  </BlogPostItem>
                 ),
               )}
             </div>