1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML 5 Semantic mark-up

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Jun 18, 2019.

  1. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #21
    Which should mean making them have to output LESS of it and to stop screwing around with things that's none of the markup's difference. You get the presentation out of the HTML, there's less HTML and less for them to have to sit there trying to make sense out of.

    Which is the oppsosite of my view on it. The problem with DTD's is they tell visual browsers how to treat the element, what's valid inside / around it, but are utterly incapable of telling the browser what things ARE. Semantically, grammatically. Cannot do it. Screen readers, braille readers, etc only really learn if it's block level, phrase level,... It's like learning the grammar of a language whilst pissing on the dictionary. Meso branda et walaka terem ed mo wu teh sturp.
    SEMrush
    Being able to just randomly make up your own tags and attributes means is the OPPOSITE of semantic markup, completely misses the point, and why we use HTML and not just plain SGML. That was my problem with XML in general is the lack of clear definintions and roles since you can just randomly make shit up that the UA will have NO clue about.

    See your example:

    
        [<!ELEMENT booktitle ANY>
         <!ELEMENT author ANY>
         <!ELEMENT publisher ANY>]>
    
    Code (markup):
    Elements that can go ANYWHERE. Nothing to actually say WHAT they are to the UA so the UA can convey that MEANING. At which point congratulation, you've made a document full of SPAN. How useful. NOT!

    It's the problem I have every time some XML fanboy claims it's a "machine readable format". As an old school assembly guy I hear that and think "are the integers stored in binary? The strings stored as RLL or null terminated? Are the instructions of what's what binary? No? you have to write a full lexical analyzer just to process it? THEN IT'S NOT MACHINE READABLE JACKASS. It's HUMAN readable!" -- part of why XML and SGML are so grossly inefficient from a bandwidth and computing power standpoint.

    So great, you defined that they ARE elements and where they can / cannot go, but how the F*** does that help a browser or other user-agent convey the MEANING to USERS? It doens't!

    My own list of things I'd like to see in a HTML spec that are currently lacking.

    1) Authoritative. Tell web developers WHAT to do and HOW to do it. This is supposed to be a specification, not documentation.

    2) Semantics with a focus on the professional writing norms on which HTML was originally based. To that end the documentation should CLEARLY in plain language explain what the tags MEAN.

    3) Further continue HTML 4 Strict's path of removing pointless redundancies and elements/attrs that introduce accessibility failings. This includes those created by HTML 5. As such AUDIO, VIDEO, CANVAS, IMG, EMBED, ARTICLE, NAV, SECTION, HEADER, FOOTER, ASIDE, MAIN, FIGURE, FIGCAPTION, WBR, DIALOG, STYLE and TARGET would all be removed.

    4) recycle the FOR attribute to replace the LIST and AXIS attributes. There is no reason for all these differing syntax doing the same bloody thing. Could even borrow the leading underscrore for "_row" or "_col" to replace SCOPE. Fewer attributes to remember == good.

    5) default SCOPE to "col" in THEAD, and "row" in TBODY. / TFOOT

    6) remove BIG and replace SMALL with <dem> -- de-emphasis.

    7) Put versions back into the doctype and/or HTML tag. I still think it makes more sense as the old VERSION attribute on the HTML tag.

    8) add a POLYFILL attribute. If the versions stated in this attribute is greater or equal to the HTML VERSION="" then neither the element nor its contents are loaded or even added to the DOM.

    Example, if <script src="fixLegacy.js" polyfill="html 7"> and we have <html version="html 7.2"> then the script will be loaded, but if we have <html version="html 8" > then it will not. The tag and its contents should be treated as if it doesn't exist.

    The inspiration for this came from the "hidden" attribute.

    *NOTE* this is what the VERSION="" attribute on body and language="" attribute on SCRIPT were originally supposed to provide but browser makers dragged their heels on implementing. Never understood why that was thrown in the trash. Kind of stupid in hindsight.

    9) emphasize that the CSS specification NEEDS to say what the default appearance and behavior of tags/elements and behaviors should be for each media type, whilst it is NONE of the HTML specifications business.

    10) No extensibility. Yes, I know that "neuters" SVG, but really if you have a flipping image it has zero damned business in the markup except as an OBJECT. Bang the brakes on these re-re's pissing static images into their markup completely bypassing any chance of caching. Letting tags and attributes from outside the specification be slopped in willy-nilly any-old way has dick-all to do with what semantic markup means or even is for. Anyone who tells you that creating your own element with a word that's meaningful to humans but without writing a way to make the UA understand it, well... they're talking out their arse.

    11) Emphasize time and time again that putting presentation in the markup using classes, tags, or attributes is in the vast majority of cases an utter cock-up. Hence tags, classes, and ID's should not be chosen just for appearance sake. Hence the <style> tag should be removed from HTML entirely (particularly with most dev's being too stupid to even handle that it's actually invalid inside BODY), and the STYLE="" attribute will have its role -- when style helps convey meaning, such as width/height on a bar graph element or font-size on a tag-cloud -- CLEARLY defined.

    That's my view on where it SHOULD be going. Reduce the number of tags and attributes, clearly define their roles, emphasize separation of presentation from content, and provide not just versioning, but a means to leverage that version within the document.
     
    Last edited: Jul 2, 2019
    deathshadow, Jul 2, 2019 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #22
    Working my way through my to-do list, I have an article for my site I'm working on where I'm rewriting bootstrap's "pricing" example to show how stupid bootstrap is.

    But this thread was also on my list of things to revisit, and I figure why not kill two birds with one stone. I said I'd do a page both as 4 structure and 5 structure, so why not this demo of bootcrap's?

    https://getbootstrap.com/docs/4.0/examples/pricing/

    Start the clock. I'm going to start coding as soon as I hit "post reply" here.
     
    deathshadow, Aug 18, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #23
    ... and this is how I'd code that pricing demo as HTML 4 Structure under a HTML 5 document, following the logical document structure pattern that is the entire intent of HTML from the day it was introduced.

    
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <meta
    	name="description"
    	content="'4 Strict Structure under HTML 5', based on bootstrap's 'pricing' example."
    >
    <meta name="author" content="Jason M. Knight">
    <link
    	rel="stylesheet"
    	href="pricing.screen.css"
    	media="screen,projection,tv"
    >
    <link
    	rel="shortcut icon"
    	href="/favicon.ico"
    >
    <title>HTML 4 Structure under 5, Pricing without Bootcrap</title>
    </head><body>
    
    <div id="top">
    	<h1>Company name</h1>
    	<ul>
    		<li><a href="#">Features</a></li>
    		<li><a href="#">Enterprise</a></li>
    		<li><a href="#">Support</a></li>
    		<li><a href="#">Pricing</a></li>
    		<li class="action"><a href="#">Sign up</a></li>
    	</ul>
    <!-- #top --></div>
    
    <div class="widthWrapper">
    
    	<div class="leadIn">
    		<h2>Pricing</h2>
    		<p>
    			<strong>HTML 4 Structure under HTML 5</strong>
    		</p><p>
    			This pricing page was quickly built WITHOUT bootstrap using HTML 4 structural rules within an HTML 5 document. Full separation of presentation from content is maintained. This likely took a fraction the time those who <strong>created</strong> bootstrap did to make their own example.
    		</p>
    	<!-- .leadIn --></div>
    	
    	<div class="priceCards">
    		<div>
    			<h3>Free</h3>
    			<ul>
    				<li><strong>$0 <span>/ mo</span></strong></li>
    				<li>10 users included</li>
    				<li>2 GB of storage</li>
    				<li>Email support</li>
    				<li>Help center access</li>
    			</ul>
    			<a href="#">Sign up for free</a>
    		</div><div>
    			<h3>Pro</h3>
    			<ul>
    				<li><strong>$15 <span>/ mo</span></strong></li>
    				<li>20 users included</li>
    				<li>10 GB of storage</li>
    				<li>Priority email support</li>
    				<li>Help center access</li>
    			</ul>
    			<a href="#">Get Started</a>
    		</div><div>
    			<h3>Enterprise</h3>
    			<ul>
    				<li><strong>$29 <span>/ mo</span></strong></li>
    				<li>30 users included</li>
    				<li>15 GB of storage</li>
    				<li>Phone and email support</li>
    				<li>Help center access</li>
    			</ul>
    			<a href="#">Contact us</a>
    		</div>
    	<!-- .priceCards --></div>
    	
    	<div id="footer">
    		<div>
    			<hr>
    			Legal Disclaimer Here
    		</div><div>
    			<h2>Features</h2>
    			<ul>
    				<li><a href="#">Cool stuff</a></li>
    				<li><a href="#">Random feature</a></li>
    				<li><a href="#">Team feature</a></li>
    				<li><a href="#">Stuff for developers</a></li>
    				<li><a href="#">Another one</a></li>
    				<li><a href="#">Last time</a></li>
    			</ul>
    		</div><div>
    			<h2>Resources</h2>
    			<ul>
    				<li><a href="#">Resource</a></li>
    				<li><a href="#">Resource name</a></li>
    				<li><a href="#">Another resource</a></li>
    				<li><a href="#">Final resource</a></li>
    			</ul>
    		</div><div>
    			<h2>About</h2>
    			<ul>
    				<li><a href="#">Team</a></li>
    				<li><a href="#">Locations</a></li>
    				<li><a href="#">Privacy</a></li>
    				<li><a href="#">Terms</a></li>
    			</ul>
    		</div>
    	<!-- #footer --></div>
    	
    <!-- #top --></div>
    
    </body></html>
    
    Code (markup):
    That's plus/minus 1% of what it would be by the time I style it. I will style it for a later post, but for now I'll belt out the "proper" HTML 5 equivalent.

    3 minutes flat. If it takes you longer than that to write the HTML of something this simple from scratch, LEARN HTML!
     
    deathshadow, Aug 18, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #24
    Ok, the HTML 5 version took a bit longer because I had to remind myself of all the pointless BS extra tags and where they go.

    
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <meta
    	name="description"
    	content="'W3C HTML 5', based on bootstrap's 'pricing' example."
    >
    <meta name="author" content="Jason M. Knight">
    <link
    	rel="stylesheet"
    	href="pricing.screen.css"
    	media="screen"
    >
    <link
    	rel="shortcut icon"
    	href="/favicon.ico"
    >
    <title>HTML 5 Structure, Pricing without Bootcrap</title>
    </head><body>
    
    <header>
    	<h1>Company name</h1>
    	<nav>
    		<ul>
    			<li><a href="#">Features</a></li>
    			<li><a href="#">Enterprise</a></li>
    			<li><a href="#">Support</a></li>
    			<li><a href="#">Pricing</a></li>
    			<li class="action"><a href="#">Sign up</a></li>
    		</ul>
    	</nav>
    </header>
    
    <main>
    
    	<section>
    	
    		<header>
    			<h1>Pricing</h1>
    			<p>
    				<strong>HTML 5</strong>
    			</p><p>
    				This pricing page was quickly built WITHOUT bootstrap using full HTML 5 structural rules, maintaining full separation of presentation from content and likely in a fraction the time a bootcrap users would take to do so. It offers <strong>ZERO actual semantic or accessibility improvements over what the HTML 4 structural rules provides.</strong>
    			</p>
    		</header>
    		
    		<section class="priceCards">
    			<section>
    				<header>
    					<h1>Free</h1>
    				</header>
    				<ul>
    					<li><strong>$0 <span>/ mo</span></strong></li>
    					<li>10 users included</li>
    					<li>2 GB of storage</li>
    					<li>Email support</li>
    					<li>Help center access</li>
    				</ul>
    				<footer>
    					<a href="#">Sign up for free</a>
    				</footer>
    			</section><section>
    				<header>
    					<h1>Pro</h1>
    				</header>
    				<ul>
    					<li><strong>$15 <span>/ mo</span></strong></li>
    					<li>20 users included</li>
    					<li>10 GB of storage</li>
    					<li>Priority email support</li>
    					<li>Help center access</li>
    				</ul>
    				<footer>
    					<a href="#">Get Started</a>
    				</footer>
    			</section><section>
    				<header>
    					<h1>Enterprise</h1>
    				</header>
    				<ul>
    					<li><strong>$29 <span>/ mo</span></strong></li>
    					<li>30 users included</li>
    					<li>15 GB of storage</li>
    					<li>Phone and email support</li>
    					<li>Help center access</li>
    				</ul>
    				<footer>
    					<a href="#">Contact us</a>
    				</footer>
    			</section>
    		<!-- .priceCards --></section>
    		
    	</section>
    	
    </main>
    
    <footer>
    	<section>
    		Legal Disclaimer Here
    	</section>
    	<section>
    		<header>
    			<h1>Features</h1>
    		</header>
    		<nav>
    			<ul>
    				<li><a href="#">Cool stuff</a></li>
    				<li><a href="#">Random feature</a></li>
    				<li><a href="#">Team feature</a></li>
    				<li><a href="#">Stuff for developers</a></li>
    				<li><a href="#">Another one</a></li>
    				<li><a href="#">Last time</a></li>
    			</ul>
    		</nav>
    	</section><section>
    		<header>
    			<h1>Resources</h1>
    		</header>
    		<nav>
    			<ul>
    				<li><a href="#">Resource</a></li>
    				<li><a href="#">Resource name</a></li>
    				<li><a href="#">Another resource</a></li>
    				<li><a href="#">Final resource</a></li>
    			</ul>
    		</nav>
    	</section><section>
    		<header>
    			<h1>About</h1>
    		</header>
    		<nav>
    			<ul>
    				<li><a href="#">Team</a></li>
    				<li><a href="#">Locations</a></li>
    				<li><a href="#">Privacy</a></li>
    				<li><a href="#">Terms</a></li>
    			</ul>
    		</nav>
    	</section>
    </footer>
    	
    </body></html>
    Code (markup):
    Note that this is basically an 11% increase in markup size, 30% increase in DOM size (that will likely slow down JavaScript functions like getElementsByWhatever or querySelectorAll) for ZERO legitimate benefit from a semantics, usability, or accessibility viewpoint.

    I did NOT include any Aria roles because I actually bothered using the correct tags. Aria roles are for when for whatever dipshit reason you're using the wrong tags... in which case, don't use the wrong tags dumbass!

    Now, to style the first example. Styling the second likely won't take too long since the CSS will just be search/replace... much as this didn't take that long since it was just adding new tags, and switching all the headings to H1 depth since that's what SECTION is supposed to mean.

    Technically many of the HEADER tags could be removed, but given the W3C's own examples on MDN include them even when all that's inside is a lone numbered heading, I followed the pattern most people learning HTML 5 would end up using.
     
    deathshadow, Aug 18, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #25
    completed CSS for the HTML 4 structure version here:
    https://cutcodedown.com/demos/HTML_4_vs_5/HTML_4_under_5/pricing.screen.css

    As always directory unlocked for easy access to the gooey bits and pieces.
    https://cutcodedown.com/demos/HTML_4_vs_5/HTML_4_under_5/

    So that gives you a full live demo of the rewrite thus:
    https://cutcodedown.com/demos/HTML_4_vs_5/HTML_4_under_5/pricing.html

    Complete recrration, from scratch, didn't even take me 8 freaking minutes. If it takes you longer than that to make something so simple -- so much so you have to go dive for something like bootcrap to off the shelf it, do the world a favor, and back away from the keyboard until you've learned enough HTML or CSS to call yourself a professional! Took me more time to create these posts and upload it.

    Now, to do a search/replace to finish the HTML 5 demo.
     
    deathshadow, Aug 18, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #26
    ... and posting took a bit longer due to bathroom break.

    https://cutcodedown.com/demos/HTML_4_vs_5/HTML_5_ideal/

    ...all the good stuff is in there.

    The interesting thing is that between HTML 5 and "HTML 4 structure under 5" the need for more complex selectors (unless we derped classes at everything, which I avoided) due to the extra elements resulted in the CSS growing from 4.5k to 4.8k just as the HTML grew from 2.98k to 3.33k. Now, under 1k of growth is kind-of a "who gives a f***" -- but figure in all the other factors.

    1) More DOM elements == slower render, slower application of style rules, slower JavaScript element acquisition.

    2) More complex DOM makes it harder to manage.

    3) The more complex sibling selectors to "body > Element" for header/footer and use of excess tags makes it harder to follow and maintain.

    ... and for WHAT? Some ALLEGED semantics that not one legitimate UA is going to do a damned thing with, and certainly nothing that the proper use of numbered headings and horizontal rules in the 4 structure provides?

    I mean, HEADER is redundant to our headings. MAIN is redundant to our first H2. If they're ALL H1, why even have numbered headings? If numbered headings and horizontal rules indicate the start of sections and subsections, what purpose does the SECTION tag even have? Even the body footer is kind-of pointless since they are just separate content sections with perfectly good rules and headings to separate them out.

    Don't even get me STARTED about the mental midgetry that is NAV.

    The "structural" tags introduced in HTML 5 provide NOTHING that the existing tags didn't already provide if people would just use them properly!!!

    But you wanted to see how they're supposed to be used in contrast with how the HTML 4 structure was built? There you go.

    Whole thing didn't even take me 30 minutes WITH a bathroom break AND documenting it here.
     
    deathshadow, Aug 18, 2019 IP