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.

HTML5 "semantic tags" = FAIL

Discussion in 'HTML & Website Design' started by Gary-SC, Jun 19, 2019.

0
  1. #1
    Gary-SC, Jun 19, 2019 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    "

    It isn't, not even close to being so. If anything it seems to be a placebo to make people who won't use them correctly THINK they're building "properly"... especially those prone to using "DIV for nothing" as extra wrappers where they aren't needed. Look at their example where they are relying on HEADER to let an IMG that doesn't even belong in the markup AS an IMG be the H1, so they can abuse NAV, H1 and MAIN to do the first H2's job! Much less their structurally incomplete form.

    I mean FFS look at this mental huffing midgetry:

    
        <li>
          <article>
            <h3><a href="#">Related article</a></h3>
            <p>Article description</p>
          </article>
        </li>
    Code (markup):
    What makes these FULL "articles" unto themselves. They may be a summary of AN article, but they are not THE article. If they warrant being called a paragraph with an actual heading, what makes these a short bullet point or list item? This is a stunning example of the semantic GIBBERISH those new tags delude people into using.

    ... and of course they're blindly hoping that SECTION is obeyed so that their later H2 aren't treated as subsections of the initial H1 -- which 99% of the time doesn't even work!

    If we were to rely on display:flex or display:grid, there is really no reason if you were to use H1..H6 and HR properly for where they have this train wreck if ignorance and ineptitude:

    
<body>

  <header>
    <a href="/" title="Go to home page">
      <img src="logo.png" alt="Site logo">
    </a>
    <nav>
      <ul>
        <li><a href="#">Primary nav</a></li>
        <li><a href="#">Primary nav</a></li>
        <li><a href="#">Primary nav</a></li>
        <li><a href="#">Primary nav</a></li>
      </ul>
    </nav>
    <form role="search" aria-label="site">
      <label>
        <span>Search</span>
        <input type="search"/>
      </label>
      <button type="submit">Submit</button>
    </form>
  </header>

  <nav>
    <ul>
      <li><a href="#">Secondary nav</a></li>
      <li><a href="#">Secondary nav</a></li>
      <li><a href="#">Secondary nav</a></li>
      <li><a href="#">Secondary nav</a></li>
      <li><a href="#">Secondary nav</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h1>Main article heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.</p>

      <h2>Article secondary heading</h2>
      <p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.</p>
      <p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?</p>
    </article>
  </main>

  <aside>
    <section>
      <h2>Share</h2>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Email</a></li>
      </ul>
    </section>
    <section>
      <h2>Recommended</h2>
      <ul>
        <li>
          <article>
            <h3><a href="#">Related article</a></h3>
            <p>Article description</p>
          </article>
        </li>
        <li>
          <article>
            <h3><a href="#">Related article</a></h3>
            <p>Article description</p>
          </article>
        </li>
      </ul>
    </section>
  </aside>

  <footer>
    <ul>
      <li><a href="#">Footer link</a></li>
      <li><a href="#">Footer link</a></li>
      <li><a href="#">Footer link</a></li>
      <li><a href="#">Footer link</a></li>
      <li><a href="#">Footer link</a></li>
    </ul>
  </footer>

</body>
    Code (markup):
    To be using significantly more than:

    
<body>

	<h1><a href="/">Site Name</a></h1>
	
	<ul id="#mainMenu">
		<li><a href="#">Primary nav</a></li>
		<li><a href="#">Primary nav</a></li>
		<li><a href="#">Primary nav</a></li>
		<li><a href="#">Primary nav</a></li>
	</ul>
	
	<form id="search">
		<fieldset>
			<label>
				Search<br>
				<input type="text">
			</label>
			<button>Submit</button>
		</fieldset>
	</form>
	
	<div id="content">
		<h2>Main article heading</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.
		</p>
		<h3>Article secondary heading</h3>
		<p>
			Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.
		</p><p>
			Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?
		</p>
	<!-- #content --></div>
		
	<div class="firstSubsection">
	
		<hr>
		<ul id="secondaryNav">
			<li><a href="#">Secondary nav</a></li>
			<li><a href="#">Secondary nav</a></li>
			<li><a href="#">Secondary nav</a></li>
			<li><a href="#">Secondary nav</a></li>
			<li><a href="#">Secondary nav</a></li>
		</ul>
		
	<!-- .firstSubsection --></div>
			
	<div class="secondSubsection">
			
		<div id="share">
			<h2>Share</h2>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
				<li><a href="#">Email</a></li>
			</ul>
		<!-- #share --></div>
		
		<div id="recommended">
			<h2>Recommended</h2>
			
			<h3><a href="#">Related article</a></h3>
			<p>
				Article description
			</p>
			
			<h3><a href="#">Related article</a></h3>
			<p>
				Article description
			</p>
		<!-- #recommended --></div>
		
	<!-- .secondSection --></div>
		
	<hr>
	<ul id="footer">
		<li><a href="#">Footer link</a></li>
		<li><a href="#">Footer link</a></li>
		<li><a href="#">Footer link</a></li>
		<li><a href="#">Footer link</a></li>
		<li><a href="#">Footer link</a></li>
	</ul>

</body>
    Code (markup):
    The only reason to add more DIV in there is for legacy support for browsers that don't know how to flex/grid whilst still maintaining multiple columns and the "out of display order" source code... and yes, I'd move that secondary menu to after the main content as it doesn't seem to be that important. IF it were it would be in the main menu.

    Though that would depend on the ACTUAL content, not some garbage placeholder text. I'm guessing because "secondary nav" is vague meaningless trash.

    But really bottom line HEADER, FOOTER, NAV, ARTICLE, ASIDE, SECTION, and that aria role nonsense aren't doing a single blasted thing that 4 Strict couldn't already provide if people would just take the damned language seriously and bother learning it. But no, it's not a "real" programming language, so its rules and techniques don't "really" matter... an attitude that has led to 25 years of bloated garbage code filled with bad practices that tells large swaths of users to sod off.

    ... and seriously, read that article. You think the HTML 5 "Structural" tags are bad, you notice that ARIA role BULLSHIT!?! Takes the derp and shoves it so far up Herp's backside, Slurp felt it all the way over in Twerpland! Particularly when not one LEGITIMATE screen reader (like JAWS) recognizes them, and only "I'm an idiot who isn't even blind" garbage like Apple's ALLEGED "screen reader" tech making use of them.
     
    deathshadow, Jun 20, 2019 IP