HTML5 Semantic Elements


I was wondering why in the lessons they go through the effort to use the "nav"element to contain the navigation but then use “div” for all other body sections rather than using the other HTML5 semantic elements such as “header”,“section”,“article”,“footer”,etc.?


From the beginner perspective, mixing syntax with semantics up front can be confusing, and it can short-circuit priorities. What tags and attributes are can be a hill to climb for many, especially when we role it all into an element.

<p>      => tag
</p>     => tag
<p></p>  => element

How often have we seen attributes referred to as tags?

If an intern writing a course module slipped in a semantic element, so what? It didn’t take any effort on their part and most learners gloss right over it while they struggle with links and href and src and #, etc. Let the learners get used to DIV and the likes while they come to grips with, block vs inline; parent vs children, nesting and lists, tables and forms, and so on.

It was sufficient for HTML to grow on this path, which led up to the present Living Standard. I think it sufficient for the learner to acquire a solid understanding of structure, first, and let semantics creep in slowly as it becomes recognizable. The last thing we want a learner to do is treat this as a regimen. They need to keep all their creative channels open and see this as a way of meta-documenting content to signal special parsing semantics.

When we get to the stage of teaching the use of semantic elements the learner will be prepared to sit through the long lessons of how articles are structured and how each article should have its own H1, and so on, and so on, and …

The fact is, though, once the learner gets into some of the projects they will discover semantic elements in use. Some might even question it but most it seems just google it because the question only rarely comes up here.

Bottom line, there is no real why? other than human oversight or what I’ve spelled out above.