- You’re using painfully cryptic single letter classes, way to tell other developers to go plow themselves when it comes to code clarity.
- You’re using presentational classes. HTML is for saying what things ARE, and not what you want them to look like. That extends not to just your semantic tags (aka all tags inside BODY except DIV, SPAN, and A), but things like classes as well since for different media targets you likely WON’T have the same appearance. The web is about MORE than “screen only”. This is what makes most frameworks a monument to ignorance, incompetence, and ineptitude; if you’re gonna vanilla don’t replicate what’s WRONG with frameworks!
- Where’s your DOCTYPE? Enjoy your legacy JS and quirks rendering, even in modern FF. (Don’t forget FF has it’s own flavor of quirks mode!)
- You have your TITLE tag before your charset META. You know that makes the browser start over parsing from the beginning, right? The charset META belongs BEFORE any and all content-bearing elements. This includes the title tag and any META with content=””.
- Not one legitimate UA gives a flying purple fish about the author META.
- Blocking script in the head for UA’s that don’t know module, static scripting in the markup missing a caching opportunity. Any quality scripting would a) be in an external file to not waste bandwidth on people who block scripting, and b) right before
</body>so that you don’t need that DOMContentReady crap and have a faster load without “module”
- Static style in the HEAD again missing caching opportunity. 99% of the time you see <STYLE> and 90% of the time you see style=”” you’re looking at garbage code made by people who shouldn’t be writing HTML. Also, the style opening is invalid, you have
<style style=”text/css”>where you probably meant
<style type=”text/css”>… except:
- Pixel paddings or px for other values will likely be broken for users like myself once a real layout is built, since you didn’t set the font size to same. Pixels on the whole is a broken metric hence your media queries are likely also broken banjaxed garbage for non-standard font metric users. It’s called EM, use ‘em!
- Why are you declaring Arial then declaring another stack later?
- Since there should only ever be one MAIN tag, why are you wasting an ID on it?
- Does SECTION inside ARTICLE even make sense?
And not as big an issue since I assume that’s placeholder content, but it’s called keywords. Not keyphrases, not keysentences, but keyWORDS! It’s supposed to be 7 or 8 single words or proper names that exist as plaintext inside BODY, totaling under 96 characters. You go outside those parameters and you end up with why people THINK it’s ignored. Even crazy Goog seems to have forgotten how it works, and even still works in their own flipping search engine.
A better starting HTML would/should be more like this:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
content="Describe this page as a natural language paragraph of 155 characters or less"
<!-- menu code here -->
</header><main></main><footer>Disclaimer Here</footer><script src="scripts/library.js"></script></body></html>
Remembering that style does NOT belong in the markup and should be targeted for specific media, scripting in the markup should be avoided and included right before you close BODY, quality JS should enhance an already working page whenever possible and NOT be the only means of providing basic functionality on the majority of sites, etc, etc, etc.
Otherwise, well, you’ve got:
JS for nothing and your scripts for free. That ain’t workin’, that’s not who you do it. Lemme tell ya, these guys ARE dumb.
Bottom line, for 2020 it really looks like you’ve got the WORST of 1997 practices pretending to be “modern”.