More semantic tags

Author: vtamara

apps/nextjs/app/[lang]/[pathPrefix]/[pathSuffix]/page.tsx

@@ -184,33 +184,34 @@ export default function Page({ params }: PageProps) {
 
   return (
     <>
-      <div className="mt-8 pt-2 dark:bg-gray-100 dark:text-gray-800">
-        <div className="container p-2 px-8 md:px-16 mx-auto pt-16 space-y-1">
+      <article className="mt-8 pt-2 dark:bg-gray-100 dark:text-gray-800" aria-label="Guide content">
+        <header className="container p-2 px-8 md:px-16 mx-auto pt-16 space-y-1">
           <h3 className="pb-1 text-1xl font-bold md:text-1xl text-center">
             {course.idioma === 'en' ? 'Course: ' : 'Curso: '}{course.titulo}
           </h3>
-        </div>
+        </header>
         <h1 className="py-3 px-16 text-[2rem] font-bold text-left">
           {course.idioma === 'en' ? 'Guide' : 'Guía'}
           &nbsp;
           <span>{guideNumber}</span>: {myGuide.titulo}
           {myGuide.completed ? ' ✅' : ''}
           {myGuide.receivedScholarship ? ' 💰' : ''}
         </h1>
-        <div
+        <section
           className="py-3 px-16 text-1xl md:text-1xl text-justify **:list-inside"
           dangerouslySetInnerHTML={{ __html: guideHtml }}
+          aria-label="Guide text"
         />
-        <div className="flex space-x-4 items-center justify-center">
+        <aside className="flex space-x-4 items-center justify-center" aria-label="Interactive buttons">
           {isClient && showGoodDollarButton && (
             <GoodDollarClaimButton
             lang={course.idioma}
             />
           )}
           {isClient && showCeloUbiButton && <CeloUbiButton />}
-        </div>
+        </aside>
 
-        <table className="mx-auto text-center mt-12">
+        <nav aria-label="Guide navigation"><table className="mx-auto text-center mt-12">
           <tbody>
             <tr>
               <td>
@@ -250,9 +251,9 @@ export default function Page({ params }: PageProps) {
               </td>
             </tr>
           </tbody>
-        </table>
+        </table></nav>
         {creditsHtml && (
-          <div className="text-sm mt-2">
+          <footer className="text-sm mt-2" aria-label="Course credits and license">
             <h2 className="px-16 text-1xl font-bold md:text-1xl">
               {course.idioma === 'en'
                 ? 'Credits and License of this course'
@@ -262,9 +263,9 @@ export default function Page({ params }: PageProps) {
               className="py-3 px-16 text-1xl md:text-1xl text-justify"
               dangerouslySetInnerHTML={{ __html: creditsHtml }}
             />
-          </div>
+          </footer>
         )}
-      </div>
+      </article>
 
       <div>&nbsp;</div>
     </>

apps/nextjs/app/[lang]/page.tsx

@@ -172,19 +172,19 @@ export default function Page({ params }: PageProps) {
 
   return (
     <Toast.Provider swipeDirection="right">
-      <div className="bg-gradient-to-br from-white via-gray-50 to-gray-100 py-12 px-6">
+      <section aria-label="Courses grid" className="bg-gradient-to-br from-white via-gray-50 to-gray-100 py-12 px-6">
         <div className="max-w-6xl mx-auto">
           <div className="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
             {courses.map((course) => {
               const extra = extCourses.get(course.id)
 
               return (
-                <div
+                <article
                   key={course.id}
                   className="bg-white rounded-2xl shadow-md hover:shadow-xl overflow-hidden transform transition-all duration-300 hover:-translate-y-2 border border-gray-200"
                 >
                   <a href={`/${course.idioma}${course.prefijoRuta}`}>
-                    <div className="img-course">
+                    <figure className="img-course">
                       {course.imagen && course.imagen.startsWith('/') && (
                         <Image
                           className="w-full h-[17rem] pt-2 object-cover"
@@ -194,16 +194,16 @@ export default function Page({ params }: PageProps) {
                           height={272}
                         />
                       )}
-                    </div>
-                    <div className="p-5">
+                    </figure>
+                    <header className="p-5">
                       <h3 className="text-lg font-semibold text-gray-800 mb-2">
                         {course.titulo}
                       </h3>
                       <p className="text-sm text-gray-600 line-clamp-3">
                         {course.subtitulo}
                       </p>
-                    </div>
-                    <div className="flex justify-between items-center p-4">
+                    </header>
+                    <footer className="flex justify-between items-center p-4">
                       <div>
                         {extra && extra.amountPerGuide > 0 && (
                           <div className="p-2">
@@ -247,7 +247,7 @@ export default function Page({ params }: PageProps) {
                           lang={lang}
                         />
                       )}
-                    </div>
+                    </footer>
                   </a>
                   {extra && extra.vaultCreated && (
                     <div className="p-4 bg-green-100 flex items-center gap-3 justify-between">
@@ -265,7 +265,7 @@ export default function Page({ params }: PageProps) {
                       )}
                     </div>
                   )}
-                </div>
+                </article>
               )
             })}
           </div>
@@ -294,7 +294,7 @@ export default function Page({ params }: PageProps) {
           </Toast.Close>
         </Toast.Root>
         <Toast.Viewport className="fixed bottom-4 right-4 flex flex-col gap-2 w-96 max-w-[100vw] outline-none z-[60]" />
-      </div>
+      </section>
     </Toast.Provider>
   )
 }