Semantic HTML
I'm a beginner, and I'm unsure on how to set my semantic elements. Which tag should I use for main, article, section, and div on HTML? Please assist.
2 Replies
Those already are the HTML tags that you would use 🤔
Honestly if you are just starting out don't worry too much about semantic HTML, just get comfortable getting something done.
This are some guidelines that I like to follow, and hopefully someone will correct me if I'm wrong in something:
- When in doubt, use a div. It's better to have a generic tag than using the wrong one.
- One main tag per HTML document.
- One header tag at the top level with the main site's name, logo, navigation bar, etc.
- One footer tag at the top level with the contact information, links and related information.
- One h1 tag per HTML document, can be assigned to the main link at the top, for example, or used in the hero section for things like the catch phrase for the company/product.
- In a typical presentation website (company website or product display), the main and section tags should have a header tag inside them with an h2 or h3 tag with a descriptive section title.
- The main and section tags can optionally have their own footer for things like "Read more", additional notes or clarifications (i.e., footnotes) and similar things that considered essential to the content of the tag.
If you have some content that is not essential but still relevant to the main content of the tag, you can use an aside element. For example the buttons for an image slider, or to change colors of the product in an ecommerce site.
- An article can be used to contain elements that convey a message on their own, and that can be reused. If you cannot reuse it, it's not an article. This can be products cards displayed on an ecommerce site, testimonials, comments on a forum or discussion board.
One final advice, read the documentation for the appropriate tag when in doubt: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Kevin Powell
YouTube
The only tags you need when first learning HTML
📒 Get the Only Tags you need to know (for now) cheat sheet here: https://kevin-powell.ck.page/0399076ad3
When you're first learning HTML, it starts nice and simple, often with a paragraph tag and then heading tags. Then you add in lists, links, images, em and strong, and the list of elements just keeps getting longer and longer.
So in this vid...