🔥
Feb 18 (edited) • Next.js
How I structured my landing page HTML file semantically
Hello engineers,
I've adjusted some files to better set up the landing page from a semantic point of view. Changes I've introduced:
- Every section has aria-labelledby="<id>-heading".
- The biggest header text element in every section has id="<id>-heading".
- Every icon is wrapped in a <span> element with aria-hidden="true".
- The form has aria-label="Join waitlist form".
- The form has a <label> element with htmlFor="<id>-email".
- The form input has id="<id>-email".
- The form input has name="email".
- The form input is marked required.
- The form button has type="submit".
- Divs were replaced by <ul><li></li></ul>.
- NavigationMenu has aria-label="Main navigation".
I've also added utility props for typography components, like className and id.
Link to the diff.
4
0 comments
How I structured my landing page HTML file semantically
powered by
skool.com/szykulatech-3240
We focus on JS/TS, React, Next.js, Supabase, shadcn/ui, Tailwind CSS, and deployments on Netlify. We focus on fast learning.
Suggested communities
Powered by