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:

1. 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.
2. 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.
3. 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).
4. Avoid using IDs for styling, but they are helpful for JS.
5. Code the main content first before any sidebars or asides.
6. Don’t use all caps in HTML. Save it for CSS styling.
7. Don’t depend on divs use more semantic tags when possible. e., header, nav, main, footer, aside.
8. 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.
9. 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.
10. 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.