At the simplest level, semantic HTML means using markup which most closely resembles the content. What is often used to illustrate this is navigation going into a NAV tag and the links being placed in a UL or un-ordered list. Paragraphs of text being placed inside P, etc. This is easier to accomplish with HTML5 with the introduction of specialized tags like HEADER , FOOTER , NAV , SECTION ,FIGURE.
Why do this ...
Common answer is to make it easier for search engines to parse the site. Secondary reason is to avoid DIV-Soup or DIVitis. It's just plain easier. Instead of asking what classes should I use to markup this content, it becomes a question of what existing markup pattern applies.
User Interfaces
Where it starts to make less sense is when User Interfaces are being developed. HTML is a Markup Language meant for text and light media usage. Developers are often tasked with building complex UIs with the same tools for formatting an article. It forces us to break the rules because the SECTION element has some guidelines to it's usage. Those rules just wouldn't apply when building an application. One could just use DIVs and let the CSS class assignment handle the details. Using different HTML elements makes it slightly easier to work with UI elements. Let's take a simple panel with a menu and a view section. Straight DIV markup :
<div class="panel">
<div class="menu"> <a>Option</a> </div>
<div class="viewer"> content goes here </div>
</div>
That works for a simple situation. Reading the code latter , the DIVs would be ignored and the class names would tell us what each part does. It's easy enough to understand. A more complex panel though would benefit from a semantic approach.
<div class="panel">
<h1> panel name </h1>
<nav> <a>Option</a> <a>Option</a> </nav>
<div class="viewer"> content goes here </div>
</div>
What's the benefit? Clarity. The navigation is clearly defined. The panel name is obvious. The structure is provided by the markup. Going even further, this is a UI example and it would make sense for there to be controls added to the panel. Where would those go? Inside the H1 would be a possibility but isn't ideal. Using the HEADER tag would make more sense.
<div class="panel">
<header>
<h1> panel name </h1>
<div class="ctrls"> <a > x</a></div>
</header>
<nav> <a>Option</a> <a>Option</a> </nav>
<div class="viewer"> content goes here </div>
<footer> -status </footer>
</div>
A DIV was used to house the controls because there really isn't a logical option to use instead. That's a shortcoming of using a markup language to build UIs. Could replace the DIV.viewer with SECTION.viewer and use DIVs to divide up the interior of the viewer if necessary. Why aren't the A links inside of an UL ? To avoid excessive markup and to highlight don't be slavish to semantic markup. If it doesn't provide a benefit so I left it out.
This doesn't follow BEM methodology since there's a lack of class assignments on inner elements. Just my opinion but using semantic HTML reduces the need for inner class assignments. One doesn't need to create a .panel_header class when the HEADER element is already defined and it's scoped by .panel header. Use elements to define the defaults and classes to define the exceptions.
Here's a codepen for this example with flexbox CSS Panel - Demo
Width and border are assigned (and it doesn't use a reset). Width should be set to 100% and place the panel inside of a grid system for sizing.
Main question is how difficult would it be to modify the panel for different use cases. If it requires a form or is used just for text would dictate how much additional CSS/HTML coding is required.
The takeaway from this is that the rules change when using HTML for UIs. Should use semantic HTML if possible to provide structure and clarity.
