Using semantic tags
Love your work Kevin, but I do have a query about the use of semantic tags. Whenever i see examples and people demonstrating HTML they always use the <div> tag for everything and I know that it's perfectly legitimate and useful. I teach HTML to uni students and am always encouraging them to use HTML5 structural tags. Section, article, aside etc and all they see is people demonstrating using <div>s everywhere. Maybe the demonstrations should use semantic tags as that's what we should be using, right? If we teach with the right tags then they can see that the <div> tag has a purpose, but defining semantic content isn't one of them, just an observation 🙂
@Kevin
6 Replies
He has a few videos on this, and yes you should always use semantic HTML
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...
@b1mind I guess my question isn't that semantic html isn't covered, it's just interesting that when any youtuber gives examples they always default to a <div> tag to demonstrate, I think the <div> tag is very useful but examples could just as easily demonstrate semantic HTML because they're still block-level, just my 2c
people are lazy, especially when they're giving examples
also, semantic elements make sense in context where they're used, and a minimal example might not fit the role of the element
and semantic HTML is grossly underutilized and underaddressed in tutorials in general. It's a tricky topic, and there's a general attitude in the webdev world that stuff like semantics and accessibility is secondary to getting your site to work, which it absolutely isn't
So many tutorials are focusing on presentation and design aspects which don't necessarily have semantic value in and of themselves; if you're teaching beginners how to add fancy borders to transition between sections using a mask, for example, you don't want them to assume that what you're doing relies on some opaque property of the
<section> element.
This is also a consequence of the different considerations between linear and nonlinear teaching/content. If you're teaching a course in web design, and you want students to understand the importance of accessibility, you can put that early in the curriculum, test them on it, refer back to it in examples and expect it from their work. If you're making 10–30 minute videos which can be watched in any order and are often about styling content, shoehorning in examples that use semantic HTML isn't feasible in every video, and can be detrimental to clear communication and viewer engagement/retention.I agree that semantics shouldn't be 'shoehorned' just there for the sake of semantics, but I do feel that having the conversation is what's missing, we'll always need div tags but semantics is critical and as you say it's under-represented in most of the core instructions, which is a shame