Design comparison
Solution retrospective
This is the first project when trying to make webpage responsive to both desktop and mobile. Let me know if there's anything I could've fixed or recommendations :) Is adding the <main> tag redundant to the <body> tag?
Community feedback
- @yannmarcPosted about 1 year ago
Hi friend 👋🏾 Great job 💯
Let me provide you with a comprehensive explanation to address your concerns regarding the use of the
<main></main>tag alongside the<body></body>tag.🤓-
In HTML5, the use of semantic elements is highly encouraged as it helps convey the structure and meaning of a webpage to both browsers and search engine crawlers. The
<body>tag serves the purpose of indicating where the visible content of your website begins. It encompasses all the content that users can see and interact with, such as headings, paragraphs, images, and other elements. -
On the other hand, the
<main>tag has a specific semantic meaning. It is used to mark the primary or most important content of a webpage. By using the <main> tag, you are explicitly telling the browser and search engines that the content enclosed within it represents the core information or focal point of your webpage. -
By employing the
<main>tag, you are not duplicating the functionality of the<body>tag. Instead, you are providing additional information about the structure and significance of your webpage's content. This can be beneficial for search engine optimization (SEO) purposes, as it helps search engines understand and index your content more accurately.
Hope you find this useful. Happy hacking, you're amazing!
0 -
- @NxumaloDevPosted about 1 year ago
Great job man!
To answer your question, it is not redundant (i think it's part of semantic HTML and helps with accessibility)
- The first i noticed is the image width, you can easily fix that by setting your main container with either CSS Grid (grid-template-column: repeat(2, 1fr) or Flex-box (flex-basis: 50%)
- Use the <picture> element to effortlessly change image based on screen size. Go to w3schools for better explanation.
- Fix your padding/spacing here and there
Good luck fellow Dev!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord