Design comparison
Solution retrospective
Regarding best practices:
- Are main and footer tags overkill for a project this small?
- Is it ok to use an h1 tag well into the html document or should h1 tags be placed near the beginning of the html document?
- For setting the document's root font size in CSS, should the specification style the html or the body element (or something else)?
Thanks in advance.
Community feedback
- @Ambe-Mbong-NwiPosted almost 2 years ago
Hello, great job.
Regarding the first question, the HTML <main> Tag is used to give the main information of a document. The content inside the <main> element should be unique for the document. Which includes the sidebars, navigation links, copyright information, site logos, and search forms. The footer tag is important because A <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents.
In conclusion, these tags are always needed even with small codes.
Secondly, h1 tags should be placed near beginning of pages and there should be a single h1 tag per page so they help search engines understand the page, improve user experience and improve accessibility
Lastly, HTML's font size is the root font size, which means it will be used as a base for rem calculation, but that's it, nothing else. It shouldn't be used for real text size calculation: it's just a kind of trick for some browsers.
- Body's font size is the text's default font size: all your text should have this size unless overriding the definition
- Special elements should have sizes in rem, with a fallback in pixels So that is how it looks in CSS:
html { font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */ } body { font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */ } h1 { /* or whatever element you want to change the font size of */ font-size: 20px; /* for browsers that don't understand the "rem" unit */ font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */ }
Marked as helpful0@harnettdPosted almost 2 years ago@Ambe-Mbong-Nwi
Thanks for the feedback. It is much appreciated.
0@Ambe-Mbong-NwiPosted almost 2 years ago@harnettd You're welcome. Glad I could be of help.
0
Please log in to post a comment
Log in with GitHubJoin 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