The first problem with visual builders is they effectively remove the entire concept of semantic markup from the equation. You're just typing in words with zero concern for if something is grammatically a paragraph, a list, headings indicating the start of sections, where headings and horizontal rules (whether you're showing them in the visual layout or not) belong to create logical document structure and alternative navigation, and a host of other problems.
Lacking that semantics and logical document structure it's hard to leverage semantics to keep the -- as your example is riddled with -- "classes for everything" nonsense under control.
The second problem is that visual editors tend to think of the markup in terms of what it looks like -- something that has no business in your HTML in the first bloody place!!!
It's the same problem these garbage front-end frameworks have of using classes to say what things look like instead of what they are or why they might be receiving a style. They inherently work using concepts much akin to the tags and attributes removed in HTML 4 Strict, and why I often say if you're going to waste your time with WYSIWYG's or trash frameworks like Bootcrap or W3.css, you might as well go back to writing HTML 3.2 as if CSS never even existed.
Slopping classes like "w3-red" or "text-center" or "col-m-4" into the HTML is flawed for the simple fact that not all target devices will even be capable of showing columns, or alignment, or even colors; or at certain widths, or other alternative skins you might use different colours or alignments. AKA the reason CSS even exists in the first place!
... and yet to function that's exactly what a visual editor must do. It's what frameworks do. That's why the code produced by either is some of the most -- here come those words again -- ignorant and incompetent nonsense in all of development.
They are at best a "shortcut" (yes, those are air quotes Doctor Evil style implying sarcasm. "Laser") for those who don't know any better that deludes people into thinking they can build a website. At worst they are a scam predators use to sucker people into thinking they had a website built for them.
... and it's easy to peddle to the masses because most people cannot see any farther than the screen they're seated in front of. As I've been saying for over a decade and a half, HTML is about more than that. A lot more. Screen readers (software that reads the page aloud), braille readers, tty, search engines... there are dozens of perfectly valid non-visual UA's that well written HTML is there to address.
Search engines don't have eyeballs, they could give a flying purple fish about your layout other than the addition of checking for things like content cloaking, or that you at least attempted to be mobile friendly. They do not care about your colours, presentational graphics, goofy bandwidth wasting animations -- all they really care about is your content and the semantic markup around it.
This is why I still say that wasting time screwing around with what a website looks like before you've determined the content -- or at least made a reasonable facsimile of future content -- and already created a logical document structure that is marked up semantically, is utterly and completely back-assward. It amounts to nothing more than putting the cart before the horse, and it is why many of the people who call themselves "designers" when all they know how to do is push pixels around in Photoshop are at best deluded, at worst outright lying to people. Art unto itself is not design; design is engineering that incorporates art whilst paying attention to specifications, guidelines, accessibility, user experience, and a host of other things the typical PSD jockey calling themselves a "web designer" are utterly and completely ignorant of!
If you're using a WYSIWYG how is your semantic markup even being formed? If you're using a WYSIWYG how can you apply CSS based on the logical document structure. Half the time you end up slopping in DIV, SPAN, and endless hordes of classes before you've even used (or worse, if you even use) tags with semantic meanings!
... and that's why using a WYSIWYG, drag and drop, etc, etc, is such a broken mess. If you're starting at the wrong end, don't be surprised when the result ends up stuffed like it just downed a Spishak back-door dinner!
You cannot generate proper semantics if you don't know what the HTML tags mean. You sure as shine-ola cannot do it if you don't even know/assign what tags are even going to be used on things, or choose the tags based not on their meanings but on their default appearance.... as such if you start out playing around with appearance before you've written your base semantic markup, of course the markup, CSS, and overuse of classes results in broken bloated slow incompetently build garbage.
Gets even worse when so many of these WYSIWYGS are based on 20 year old practices because the number of people who embraced using HTML 4 Strict numbers in the dozens. Endless pointless DIV for nothing, presentational markup, presentational classes replacing presentational tags, what is for all intents and purposes HTML 3.2 that spent fifteen years wearing the HTML 4 Transitional disguise, and now gets the HTML 5 doctype slapped on it so everyone can congratulate themselves over how modern their bleeding edge of 1997 HTML practices are.
Again, transitional in this case literally meaning "in transition from 1997 to 1998 development practices.
The WYSIWYG / drag and drop mentality is rooted in the bad, backwards, nonsensical practice of starting out with the appearance instead of meaning. For all intents and purposes it is the old joke about placing a higher value upon flash over substance, and as always the "common" person is more easily suckered by the slick veneer than they are what lies beneath.
But of course, all the people who've been scammed by these systems don't want to hear that since they've invested time, effort, and money on what for all intents and purposes is a dead-end. It "upsets" them and how dare anyone come right out and call these systems out for what they are: Borderline scams that prey upon fear, apathy, and just plain wishful thinking.
Hurting matters only further is that most adults my age and older have forgotten fifth grade grammar class, and most people younger more than a decade younger than me aren't exposed to the concepts at all, since apparently what I learned in fifth grade about headings, rules, paragraphs, lists, and plates back in the '70's is now third year of college for English majors.
Said writing and structural norms being those you're supposed to use writing whitepapers, documentation, engineering and scientific papers, term papers, business letters, etc, etc. Aka, the writing norms upon which HTML was originally created and why the HTML tags even have meanings and semantics!
Hence the saying:
If you choose any of your semantic markup because of what the tags look like, you're choosing all the wrong tags for all the wrong reasons.
P means a grammatical paragraph, it is not "oh this is some text" -- it sure as shine-ola doesn't mean "I want a double break after this". A lone image by itself is not a grammatical paragraph. An INPUT and its LABEL -- assuming the coder even knows what a LABEL is, most don't seem to -- is not a grammatical paragraph.
OL/UL are for short grammatical bullet points / selections. That's bullet point in terms of a short detailed brief, not "It has a dot before it".
H1 is the heading (singular) that everything on every page of the site is a subsection of. H2 is the start of a major subsection of the page, with the first H2 (or HR) indicating the start of the main content. H3 means the start of a subsection of the H2 preceding it. H4 means the start of a subsection of the H3 before it. Care to guess what depth 5 and 6 headings mean? HR means a change in topic/section where heading text is unwanted or unwarranted.
They do not mean "fonts in different weights and sizes" or "draw a line across the screen"
That they indicate the start (and therefor the ends) of sections, and the first H2 or HR is the start of the main content, is why HTML 5's new allegedly "structural' tags are as stupid as the trash that was added in HTML 3.2. ARTICLE, ASIDE, HEADER, FOOTER, NAV, MAIN? Pointless code bloat that exists just to pat the people who used endless pointless DIV for nothing on the back and give them an excuse to keep on keepin' on.
TABLE is for tabular data where there is a defined structure of relationships between headings, rows, and columns. It does not mean "I want columns". Hence why there are tags that go into tables like CAPTION, THEAD, TFOOT, TBODY, TH and attributes like SCOPE, AXIS, and FOR. You know, all those elements 90%+ of the people out there who've been writing HTML for 20+ years seem to still be unaware even exist?!?
Even tags that sound like they should be presentational aren't. Take B and I... B is for when it would be bold for grammatical reasons such as a entity in a legal document. The Italic tag is for when it would be italic for grammatical reasons such as a book title when it isn't being CITEd. They do not mean "show this text as bold or italic". Just as EM means "with emphasis" and STRONG means "with more emphasis".
Concepts no WYSIWYG editor or rubbish site builder is going to expose people to much less be able to keep straight!
It didn't help one iota that HTML 3.2 and 4 Tranny slopped presentational tags into the specification, and the war between Nyetscape and Exploder resulted in even more "bling" being tossed into the mix with zero concern for good practices. A lot of garbage was heaped onto the specification -- CENTER, ALIGN, BORDER, BGCOLOR, FONT -- that served zero grammatical purpose and were there just for appearance, something that was never supposed to be part of HTML's job and why they were all deprecated in HTML 4 Strict!
... and again why using something like class="text-center" completely misses the point! We got rid of the ALIGN attribute for a reason!
The whole idea of visual site development is incomplete, backwards, and skirts around the most basic and simple of site building concepts -- and for what? People complaining they might be expected to type, or simply refusing to take the time to learn something as idiotically simple as HTML using concepts that were -- again -- little more than what a standard level fifth grade English class taught nearly four decades ago?
Colour me unimpressed.
Dan W.