Web Analytics Made Easy -
StatCounter When is appropriate to use <section> tag? - CodingForum

Announcement

Collapse
No announcement yet.

When is appropriate to use <section> tag?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • When is appropriate to use <section> tag?

    Hello good people.
    I have been using <section> to split the visual sections in the designs, but ever since I started using https://gsnedders.html5.org/outliner/ I see that I'm probobaly not using this tag the way it is meant to.

    Please, can anyone give me some short guidelines on when to use it?

    Here is small demo of how I usually organise my html code:
    Code:
    <header id="masthead" class="site-header">
    	<!-- header stuff -->
    </header><!-- #masthead -->
    
    <div class="page">
    
    	<div id="page-banner">
    		<img src="">
    	</div>
    
    	<main id="main" class="site-main">
    
    		<section class="home-products products-wrapper">
    			<div class="container-fluid">
    				<header class="section-header">
    					<h2 class="section-title">Novosti</h2>
    					<h3 class="section-subtitle">Sve‍e meso i riba</h3>
    				</header>
    				<div class="products-container">
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    				</div>
    			</div>
    		</section>
    
    		<section class="tis-perks clearfix">					
    			<div class="tis-perk tis-elderly">
    				<figure class="tis-perks-icon">
    					<img src="">
    				</figure>
    				<div class="tis-perks-info">
    					<h3 class="tis-perks-title">Tis Olak?ice za penzionere</h3>
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
    				</div>
    			</div>
    		</section>
    
    		<section class="latest-news products-wrapper">
    			<div class="container-fluid">
    				<header class="section-header">
    					<h2 class="section-title">Vesti</h2>
    					<h3 class="section-subtitle">Tis za svoje kom?ije</h3>
    				</header>
    				<div class="products-container">
    					<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>					
    				</div>
    			</div>
    		</section>	
    
    	</main><!-- #main -->
    
    </div>
    
    <footer id="mastfoot" class="site-footer">
    	<!-- footer stuff -->
    </footer><!-- #mastfoot -->
    I thank kind sir or ma'am who is willing to take a look at this and give me some advice.
    WordPress - so much more then editing themes

  • #2
    I found HTML5Doctor very informative: The section element | HTML5 Doctor
    Stop solving problems you don’t yet have!

    Comment


    • #3
      Well, pretty much you're not using ANY of your tags properly from a logical document structure point of view. You're slapping section in anyplace and anywhere, , gibberish numbered heading orders (more so since <section> and <article> resets you to <h1> every time you open one)...

      But really since all of those tags are pointless redundant GARBAGE in the first place if you just used numbered headings and horizontal rules properly, I would suggest throwing ALL that code bloat rubbish in the trash and forget HTML 5's pissing all over the structural rules.

      For example, this:

      Code:
      				<header class="section-header">
      					<h2 class="section-title">Novosti</h2>
      					<h3 class="section-subtitle">Sveže meso i riba</h3>
      				</header>
      numbered headings indicate the start of a new subsection of the page... how is that H3 opening up a new subsection of that H2... since they're inside <header> you're grouping them like the defunct/nonsensical <hgroup> rubbish... how can you have a H2 on the page when you don't even have a h1 for that h2 to indicate being the start of a subsection of? Whilst I don't know the language, if I were to take a guess your header up top with the img inside it should be a H1, NOT <header>. Since you opened up a <section> the counter gets reset so that <header> I just quoted would be a <h1> and JUST a h1, with either a <span> or <small> inside it for what you have as a H3... since there's NO other tags in there as part of the header, there's no need to waste time (or bandwidth) with a <header> tag.

      You've got <figure> around something that is likely NOT a mathematical or scientific figure, gibberish use of H3 page-wide, endless pointless classes on EVERYTHING...


      I would just kick all the HTML 5 redundancies to the curb, and use the classic numbered heading orders and horizontal rules way of creating the document structure; remembering that a H1 is the heading that every PAGE on the site is a subsection of (so site title/logo), H2 indicates the start of a major subsection of the h1, H3 is the start of a subsection of the H2 preceeding it, H4 is the start of a subsection of the H3 preceding it, and so forth... with HR indicating a change in topic/subject where heading text is unwanted/unwarranted. They do NOT mean "text in different sizes" or "draw a line across the screen". Hell, <small> doesn't even mean "make the text smaller", it means "this text would be smaller in a professionally written document for grammatical reasons... a subtle distinction lost in todays world of "rawrz, whats it bees looksies!?!"

      Without knowing what your final appearance would be, it's hard to say where I'd place any DIV as semantically neutral styling hooks, but I'd gut that down to just:

      Code:
      <h1>
      	Site Title/Logo
      </h1>
      
      <h2>
      	Novosti<br>
      	<small>Sveže meso i riba</small>
      </h2>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      
      <img src="" alt="describe this" class="plate">
      <h2>Tis Olakšice za penzionere</h2>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      
      <h2>
      	Vesti<br>
      	<small>Tis za svoje komšije</small>
      </h2>
      <p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>					
      
      <hr>
      <!-- footer stuff -->
      ... and then add DIV and SPAN when/where needed as hooks for the styling. Believe it or not the above provides ALL the same hooks for sections, subsections, main content start, etc that all the pointless bloated idiotically redundant HTML 5 rubbish like <section>, <article> and <main> provide.

      Even if I were to use HTML 5's garbage redundancies, it would go something like:

      Code:
      <h1>
      	Site Title/Logo
      </h1>
      
      <main>
      	<section>
      		<h1>
      			Novosti<br>
      			<small>Sveže meso i riba</small>
      		</h1>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      	</section>
      
      	<section>
      		<img src="" alt="describe this" class="plate">
      		<h1>Tis Olakšice za penzionere</h1>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      	</section>
      
      	<section>
      		<h1>
      			Vesti<br>
      			<small>Tis za svoje komšije</small>
      		</h1>
      		<p>TIS omogucava laksu i jeftiniju kupovinu za nase najstarije</p>
      	</section>
      </main>
      
      <footer>
      <!-- footer stuff -->
      </footer>
      When you open a <section> you use a H1 as the first heading... You'll notice both this and my gutted version output the same basic document outline. This is because <section> does the same thing as incrementing the heading tag number by one... You open <section> you're back at H1.

      Only use <header> if there's more going in there than just A heading. As in one... do not pair headings just because you want subtext/taglines, that's NOT what numbered headings do/mean. When you used a H2 it was wrong due to <section>. When you used a <h3> it was wrong because you weren't starting a new subsection without using <section>, which is what a H3 MEANS.

      Basically it just looks like you were throwing all the tags in there willy-nilly with no understanding of their meaning... that or you were choosing things like the numbered headings not for their meanings, but for their default appearance; and as I'm always saying if you choose your tags based on what they look like instead of what they mean, you're choosing all the wrong tags for all the wrong reasons!

      Actually, you said it right here:

      Originally posted by mr.nice View Post
      I have been using <section> to split the visual sections in the designs
      That's not what it means, and not what it's for. It's for GRAMMATICAL sections. Just as numbered headings do NOT mean "text in different sizes" it means "start of a subsection of the page" -- which is why <section> is in fact a pointless redundancy... as is main... and article, and header, and footer, and aside, and nav, and aria roles... pointless code-bloat redundancies undoing ALL the progress 4 Strict was trying to give us.

      Side note, technically that plate image you had in <figure> for no reason should be AFTER the heading, but I know from a layout perspective that can be a real pain in the *** depending on the desired appearance.
      Last edited by deathshadow; Sep 30, 2016, 11:45 AM.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        It would be appropriate to start using the <section> tag and the other outlining tags when a browser actually implements outlining. At the moment no browser actually plans on implementing outlining and so the tags introduced soley for that purpose are no more meaningful than a div tag.
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment


        • #5
          I want to thank deathshadow for devoting time to go into so much details. A little hostile approach maybe, but still thanks so much, I am here to learn this stuff

          I do have some questions still, this is my comment on yours
          You're slapping section in anyplace and anywhere
          , so please take a look at this screenshot of a design I have it will be easier for me to explain when and where I use <section>:
          Click image for larger version

Name:	example.jpg
Views:	1
Size:	43.5 KB
ID:	2270506

          Assuming logo is the H1, shouldn't Welcome to, Explore and Our Latest be H2s? I thought it is appropriate to use <section> for those parts of the page since they all have H2 headings and also that in that way it would be appropriate to use <header> for every <section> (I've been using wordpress's underscores starter theme, so i've seen there the use of <header> tag a lot... also the reason why i use a lot of classes
          endless pointless classes on EVERYTHING
          ).

          how is that H3 opening up a new subsection of that H2
          This I knew I was making a mistake (I deserve a walk of shame). Reason I did it... take a look at the image above, please, you will see About us text above Welcome to, the other two headings have identical preheading. I never know how to tag that, it doesn't make since to me for it to be the main heading of that part of the page, but I still wanted to give it more meaning then <p> or <span>, so I just went with <h3> event thou I knew it was wrong - thought it was lesser of two evils.

          As for this,
          You've got <figure> around something that is likely NOT a mathematical or scientific figure
          , I honestly thought I was right on money with that tag. I am simply putting <figure> around <img> as it is shown on HTML figure Tag instead of a <div>

          I am really not using these tags for styling purposes, moreover it is much easier for me to use <div> instead of any html5 tags, I am just trying to adapted with new rules and learn to write good html. Obviously I got the wrong idea about <section>s and other stuff and still have a long road ahead, but hopefully this is the place where I can get some good pointers and advises.
          WordPress - so much more then editing themes

          Comment


          • #6
            Hi, is anyone else an expert on these things? I would really appreciate some thoughts on my last post as I'm eager to learn coding the right way.
            WordPress - so much more then editing themes

            Comment


            • #7
              Sorry for the delay, got your PM, but life dragged me away for a couple days.

              Originally posted by mr.nice View Post
              I do have some questions still, this is my comment on yours , so please take a look at this screenshot of a design I have it will be easier for me to explain when and where I use <section>:
              Personally I wouldn't use section, it's redundant to numbered headings, but if one WERE to do so, you'd wrap every part that starts with a heading or is a major change in topic.

              Originally posted by mr.nice View Post
              Assuming logo is the H1, shouldn't Welcome to, Explore and Our Latest be H2s?
              Yes, if you are NOT using <section>. If you ARE using <section> they're ALL h1. Even your little <h3>title</h3> under <h2>explore</h2> become <h1>title</h1> under <h1>explore</h1> if you have section around them.

              EVERY time you open <section> you are back to using a H1, regardless of what it looks like.

              So under pre-5 structural rules, yes, those would be H2 and H3... though the space wasting banner (to go with all the other space wasting artsy farsy bull that's there to hide a lack of genuine content) doesn't really have content, so that would be "loose text' that most likely would just get a DIV.

              Code:
              <h1>Site Title</h1>
              
              <div>We Are Full Service</div>
              
              <h2>Blah blah - Welcome to</h2>
              <p>Some text</p>
              
              <h2>What we do - Explore</h2>
              
              <h3>Title</h3>
              <p>Some text</p>
              
              <h3>Title</h3>
              <p>Some text</p>
              
              <h3>Title</h3>
              <p>Some text</p>
              
              <h3>Title</h3>
              <p>Some text</p>
              
              <hr>
              Footer text
              BUT, the moment you want to use HTML 5's idiotic and pointlessly redundant section rubbish, that becomes:

              Code:
              <h1>Site Title</h1>
              
              <section>We Are Full Service</section>
              
              <section>
              	<h1>Blah blah - Welcome to</h1>
              	<p>Some text</p>
              </section>
              
              <section>
              	<h1>What we do - Explore</h1>
              	
              	<section>
              		<h1>Title</h1>
              		<p>Some text</p>
              	</section>
              
              	<section>
              		<h1>Title</h1>
              		<p>Some text</p>
              	</section>
              
              	<section>
              		<h1>Title</h1>
              		<p>Some text</p>
              	</section>
              
              	<section>
              		<h1>Title</h1>
              		<p>Some text</p>
              	</section>
              
              </section>
              
              <footer>
              	Footer text
              </footer>
              Which honestly, on top of making them all H1 and telling users of EXISTING accessibility user agents to go plow themselves, also makes it harder to style. There's a reason a LOT of people say "write as 4 strict, deploy as HTML 5" and the garbage pointless halfwit redundancies such as section, article, nav, aside, header, and footer are the reason why. They serve no legitimate purpose or functionality that couldn't be done using the existing tags.

              I may come across as hostile/harsh on this, but that's because I studied and tested the new HTML 5 stuff after having a full grasp of the how/what/why of HTML 4 semantics. My conclusion was that for the most part all these new tags did was drag development back to the WORST of 1990's style code, and it seemed much of it existed JUST to satiate the needs and wants of two groups of developers I generally have little time or use for; those who insist on STILL slopping out HTML 3.2 and proprietary tags 1990's style under a tranny document, or a group known as "data scrapers" who are little more than glorified content thieves. The latter group has tried to take a dump on HTML in the past and continue to do so with bloated trash such as microformats or aria roles -- they try to sell this rubbish to developers as aiding in accessibility, but that's about as truthful a claim as what politico's are flinging in the current American election arena. It's more like monkeys at the zoo flinging their feces to see what sticks than it is based in fact or even rational thought.

              Originally posted by mr.nice View Post
              I've been using wordpress's underscores starter theme
              Explains a lot -- to be frank (I'm rarely anything but) the vast majority of mouth-breathers making Wordpress themse -- and that includes the ignorant twits who make the ones it SHIPS WITH -- don't know enough about HTML or CSS to be building websites for other people. They REEK of non-semantic gibberish bloated broken HTML created by people who really need to do the world a favor, back the blue blazes away from the keyboard, and take up something a bit less detail oriented like macramé. This is evident when you see outright ignorant BS like this in a codebase:

              Code:
              <body class="home blog">
              <div id="parallax-bg"></div>
              <div id="page" class="hfeed site">
              		<header id="masthead" class="site-header" role="banner">
              		<div class="header-wrap clearfix">
              			<div class="site-branding">
              				<h1 class="site-title"><a href="http://demosite.center/wordpress/" title="WordPress Demo Install" rel="home">WordPress Demo Install</a></h1>
              				<h2 class="site-description">Just another WordPress site</h2>
              			</div>
              
              			<div class="header-search-icon"></div>
              			<form role="search" method="get" class="search-form" action="http://demosite.center/wordpress/">
              	<label>
              		<span class="screen-reader-text">Search for:</span>
              		<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s">
              	</label>
              	<input type="submit" class="search-submit" value="Search">
              </form>
              
              			<nav id="site-navigation" class="main-navigation" role="navigation">
              				<h1 class="menu-toggle"></h1>
              				<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
              
              				<div class="menu"><ul><li class="current_page_item"><a href="http://demosite.center/wordpress/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://demosite.center/wordpress/sample-page/">Sample Page</a></li><li class="page_item page-item-39"><a href="http://demosite.center/wordpress/test-page/">Test Page!</a></li></ul></div>
              			</nav><!-- #site-navigation -->
              		</div><!-- .inner-wrap header-wrap -->
              	</header><!-- #masthead -->
              With the presentational DIV for nothing, endless pointless classes for nothing, div when there's a perfectly good HEADER tag present, h1 paired with h2 when there's no new subsection being started, incomplete/broken form, placeholder as a label since they're hiding a span to do it (not gracefully degrading properly in the process), no fieldset, much less what in blazes makes their menu show/hide button a top-level heading? DIV for nothing around the menu UL, absolute URI's for nothing but wasting bandwidth, redundant title attributes since if the title is the same as the content of the tag, you don't need a title... Even the comment placements could in fact trip rendering bugs! (that they ARE hacking around in the stylesheet... derp). Even more derp in that herp is the first H2 being content cloaked -- way to get slapped down by search!

              That's one giant train wreck of developer ineptitude for what using 4 Strict style structural rules and leveraging CSS for the menu instead of scripting would be a simple:

              Code:
              <body>
              
              <div id="top">
              
              	<h1>
              		<a href="/wordpress/">
              			WordPress Demo Install
              		</a>
              	</h1>
              
              	<form method="get" class="search-form" action="/wordpress/">
              		<fieldset>
              			<input type="checkbox" id="searchShowHide">
              			<label for="searchShowHide"></label>
              			<div>
              				<label for="searchField">Search for:</label>
              				<input type="search" name="s" id="searchField">
              			</div>
              		</fieldset>
              	</form>
              
              	<input type="checkbox" id="menuShowHide">
              	<label for="menuShowHide"></label>
              	<ul id="mainMenu">
              		<li><a href="/wordpress/" class="current">Home</a></li>
              		<li><a href="/wordpress/sample-page/">Sample Page</a></li>
              		<li><a href="/wordpress/test-page/">Test Page!</a></li>
              	</ul>
              
              <!-- #top --></div>
              Could be made functionally identical for visual users, and is VASTLY superior for those who don't get the perfect mix of CSS, screen size, and working JavaScript... None of the extra crap they have in there serves any legitimate purpose to any legitimate user. Hence why the ridiculous 1.5k of developer ineptitude of the original code is put to shame by that simple 736 byte rewrite.

              It's garbage like that which is why I consistently can say the majority of sites out there are using two to five times the HTML needed to do the job - and usually it's "DIV for nothing", "classes for nothing", "absolute URI's for nothing", "title attributes for nothing", "ARIA roles and REL attributes for nothing", and the new HTML 5 tags fault.

              JUST as all the people sleazing out HTML 4 tranny a few years ago were vomiting up the exact same level of developer ineptitude, since they never realized that "transitional" meant "in transition from 1997 to 1998 development practices" and just kept schlepping along on their outdated skills. Now instead of slapping a 4 tranny doctype atop their broken outdated rubbish, they get to wrap 5 lip-service around the same old developer ineptitude and ignorance.

              Originally posted by mr.nice View Post
              and also that in that way it would be appropriate to use <header> for every <section>
              <header> is even more pointless than section when you already have <h1> to <h6> tags. The only real purpose it can serve is if you have MULTIPLE elements that are NOT a numbered heading or don't fit in one cleanly to group them together to say "you can skip this to get to the content". If you only have a heading tag, there's no reason to wrap it in a header tag. If you had say... a heading AND a list of information like number of replies, likes, and so forth, THEN you would group them with <heading>. Don't just slop it in there because it's the top of a section.

              Though honestly, MOST such data SHOULD go in the heading -- author for example is as much a part of the heading as the title in most cases, there's no reason for that separate tag to even EXIST apart from ignorance on the part of the WhatWG. (the group that initially created this train wreck of a "specification")

              Originally posted by mr.nice View Post
              Reason I did it... take a look at the image above, please, you will see About us text above Welcome to, the other two headings have identical preheading. I never know how to tag that, it doesn't make since to me for it to be the main heading of that part of the page, but I still wanted to give it more meaning then <p> or <span>, so I just went with <h3> event thou I knew it was wrong - thought it was lesser of two evils.
              There is no GRAMMATICAL or professional writing reason for that initial text to be smaller than the rest fo the heading. When there is no such reason for a change inside a heading, that's when you use a <span>.

              <span> and <div> are "semantically neutral" -- they imply no meaning or change to the content inside them. Grammatically the same could be said of an <a>nchor -- it does mean "this text goes somewhere" but it does NOT actually change the meaning of the words inside it or apply any special grammatical difference.

              As such I'd be coding those as:

              Code:
              <h2><span>What we do<span>:</span></span> Explore</h2>
              the span do not actually imply or change the meaning, they exist JUST as hooks for style WITHOUT saying exactly what that style is. The hypen in a span is there since CSS off, "What we do Explore" is gibberish. "What we do: Explore" does make sense. To style it for how you had it, that would go something like:

              Code:
              h2 {
              	text-align:center;
              	font:bold 200%/120% arial,helvetica,sans-serif;
              }
              
              h2 span {
              	display:block;
              	font:normal 50%/120% arial,helvetica,sans-serif;
              }
              
              h2 span span {
              	display:none;
              }
              CSS the display:block on the outer span puts that text on it's own line, we shrink the text, and then the inner span we hide removing that colon. Gracefully degrades CSS off to still make sense gramatically.

              When writing a page the best approach I've ever found is to start out with your content or a reasonable facsimile of future content and write it in a logical order as if even HTML didn't exist. This is the baseline fallback for your content. You then go through it with the semantic tags to say what things are, RETAINING that logical order. Only once you have the meanings in place for markup do you start worrying about your screen media appearance and start in working on layout with CSS and adding DIV and SPAN as needed.

              So in this case, GRAMATICALLY, why is that text different? There's no reason for it, which is why 1) I probably wouldn't have made it different, but 2) if I were to, that's either a <span> or <div>'s job. Since it's really not a block level grouping of other tags, that means the inline level <span> is the tag for the job.

              Originally posted by mr.nice View Post
              I honestly thought I was right on money with that tag. I am simply putting <figure> around <img> as it is shown on HTML figure Tag instead of a <div>
              First off, W3Schools is bull. It's cute as a handy reference for syntax, but they do not cover semantics AT ALL, 90%+ of their examples are vague or just outright wrong, and pretty much since they day they launched web developers "in the know" have been fighting their misinformation, disinformation, and propagation of ignorance. IF you are going to use them you need to cross check anything they have against the specification itself, and a look over at MDN wouldn't hurt either.

              They have the SYNTAX of <figure> correct, but they don't cover what it means or WHY you would use it. A figure means a scientific, mathematical, or example figure related to the content, typically with a sub-text that's either a link to the source, related text, or that's an explanation of what the figure is of. An image -- even plate images with subtext -- are NOT necessarily a <figure>. If you have no <figcaption> it's highly unlikely to even be a <figure>, and unless that image is a scientific, mathematical, sample, or example, it's NOT a <figure>.

              The same level of misunderstanding crops up with <aside>. HTML is supposed to be about grammar and/or professional writing norms. In that sense, an <aside> would be a section of text that further explains the related content -- but the content would still make sense without it -- or, it a breaking of the fourth wall. This limits its utility to the works of William Shakespear or screenplays for Ferris Bueller and Deadpool.

              But no, people are using it for sidebars because said section is "aside" other content. There is NO grammatical or professional writing reason for such a thing to happen which means using <aside> in that manner is presentational -- you might as well bring back the dumbass <center> and <font> tags if you're going to write HTML that way.

              In that same way, people are just slapping <figure> around images without asking "what makes this image anything MORE than just another image?" -- in most cases you already have a perfectly good IMG tag saying what it is, so what the devil is the extra tag for?

              In your case, it's possibly worse since you seem to have a class indicating that it is an icon. An icon is most certainly NOT a figure, and worse, it's probably not content either. If that image is a icon alongside some text, that's presentation and as such belongs in the CSS as a background-image, NOT in the markup as an <img>. Though that's a wild guess without seeing the actual page in question and what that image is and is doing for the page!

              Originally posted by mr.nice View Post
              I am really not using these tags for styling purposes
              You probably are more than you realize -- it's a VERY hard hurdle to jump since most people are encouraged to start with what they want the page to look like, when that's just a small sliver of what HTML is for; since HTML is about delivering content to EVERYONE, even the non-sighted! You also have to remember, search engines don't have eyeballs. That's why text is the first class citizen of the web, and everything else may as well have leprosy.

              Originally posted by mr.nice View Post
              moreover it is much easier for me to use <div> instead of any html5 tags, I am just trying to adapted with new rules and learn to write good html
              The trick with DIV is to only use it when you NEED to. If you can use your existing semantic markup first, do so. DIV are handy for grouping sections without changing your meanings or heading orders, which is why I would keep with the normal numbered headings and use DIV instead of SECTION, ARTICLE, HEADER, FOOTER, MAIN, NAV, or ASIDE as my grouping elements. They imply no meaning, letting the content-level semantic tags do their job. Same goes for if you look at ARIA roles, they're just pointless bloat and redundancies to what we already have for any LEGITIMATE user...

              More so since no legitimate UA I've come across actually leverages ANY of that to actually help the user, search engines don't seem to need them, and on the whole there seems to be no plans to ACTUALLY leverage them in a useful manner, the only people who seem to benefit from any of it are the sleazy dirtbags who spider the web looking to rip off content for their own use.
              Walk the dark path, sleep with angels, call the past for help.
              https://cutcodedown.com
              https://medium.com/@deathshadow

              Comment


              • #8
                Thank you taking time and writing this detailed thoughts on this subject. I will most likely stop using <section> at all for now.
                I still think that html5 is built for a reason, but I will definitely take into consideration much of the stuff you explained.

                It's getting hard to learn out there, a lot of seo people are saying one thing and developers another. To filter out the right information is getting to be pain in butt.
                And I'm really surprised that you consider W3Schools wrong since most of the tutorials out there point to it. Do you have more suggestions other then MDN that could be helpful on this subject?

                Thanks again for all your help.
                WordPress - so much more then editing themes

                Comment

                Working...
                X