In my latest class assignment, I watched the video Let’s Write Semantic Markup. The video was posted in 2011, and I do think that it could have been accomplished more efficiently with CSS grid. However, the point of the video is to recreate a Photoshop layout in HTML only with semantic markup.
Here are the tips I’ve learned from the video:
- Don’t worry about the looks at this part, focus on being as semantic as possible. Avoid switching from HTML to CSS when coding semantically.
- When naming classes try to use a descriptor without specifying what the part looks like. For example, if you are naming a navigation menu that is in a gray bar, name it as “main nav” instead of gray bar nav. This is to future-proof the code in case there is a redesign in the future.
- There should only be one ID tag per page (although from Chris’s comments and the guest comments on the video, this seems to be highly debated).
- Avoid using IDs for styling, but they are helpful for JS.
- Code the main content first before any sidebars or asides.
- Don’t use all caps in HTML. Save it for CSS styling.
- Don’t depend on divs use more semantic tags when possible. e., header, nav, main, footer, aside.
- Create a hierarchy of tags when necessary. For example, nesting <section> inside of <article> to show that the article is the main part of the page and sections are secondary info.
- Think of fieldsets as groups. They are more useful to use instead of divs in some cases if there are multiple grouped sets of inputs.
- Write code in order of importance rather than layout order. e., main content before left sidebar. You can use CSS to float where they need to be.