Section Semantics

ok so I am assuming my approach is ok but you think it is ok to use section elements
as containing elements as well by ading ids or classes? Ive seen that
too…

I don’t know. From reading up on the section vs div issues it really seems that it is up to personal preference and traditional thinking. Some seem to hate the idea in principle, others seem okay w/it. I’d be curious as to why you would prefer to use section though.
I’d have to say it doesn’t’ look like there is anything wrong in using it instead of a div. With the possible exception that it may confuse other devs that don’t follow your line of tought.
Hope someone like @PaulOB, @ronpat or @Mittineague will step in and offer their nickel.

The section tag serves a particular purpose.

Whether it needs an id or classes depends on how the page is being styled. Any tag in the body can have an id and/or one or more classes attached for styling purposes completely independent of the semantic meaning of those tags.

3 Likes

well my though is a section within the content of the document
like a carousel could be section or featured products can be another etc etc …

hmm I see so are you it is ok to do this approach with
section tags as long their is a real meaning to what you are doing.

Use tags for their intended purpose of attaching a semantic meaning to their content.

Use ids for styling, attaching JavaScript and providing anchor points that you can jump to in the page.

Use classes for styling.

If they all end up on the same tag that just means that’s how it works out given that their purposes are completely unrelated.

2 Likes

I think the keywords here are “generic” vs. “semantic” and “outline”

When I was in school I discovered that for “written exams” when I invested some time in putting together in outline format what I wanted to say, that when I got around to the actual writing things went much better. In a time-critical situation there is the temptation is to “start writing right away” but for me getting things organized and planned out first was the best use of the limited amount of time.

I have found that putting together “outlines” comes in handy for planning lots of things and use them often.

I know that “section” means “part of”, but I too was (and somewhat still am) not sure how it applies in terms of semantic web pages.

As felgall posted, any tag can be styled. And we know that HTML and CSS are related, but separate.
So don’t think of tags in terms of styling, but in terms of meaning.

I recently did a bit of work towards redesigning my website. I had a few false starts, and got sidetracked a bit, but eventually came up with having <section> being part of <main>

<html>
<head>
<body>
  <header>
    <h1>
    <nav>
  <main>
    <section>
      <h2>
      <p>
    <aside>
      <h3>
      <p>
  <footer>
    <p>
3 Likes

A very typical usage of section would be like this, to organise an article into chapters or sections:-

<article>
  <h1>How to XYZ</h1>
  <section id="st1">
    <h2>Step 1</h2>
    <p>Do X.</p>
  </section>
  <section id="st2">
    <h2>Step 2</h2>
    <p>Do Y.</p>
  </section>
  <section id="st3">
    <h2>Step 3</h2>
    <p>Do Z.</p>
  </section>
</article>

Though they don’t need to be part of an article, but they must be part of (or a section of) something to fulfil semantic usage.
They are not a generic block container like div, we already have div for that.

Regarding styling with IDs and classes:-

Styling is a separate issue from semantics. In my example above there are IDs that may be used for anchors in a page index, but they could also be used in styling, maybe to colour code the sections for example.
I have noticed that some people have a strange reluctance to put IDs or classes on the html5 semantic tags. As if they are somehow apart from traditional tags and can’t be styled. So I see people needlessly wrap them in divs in order to hang IDs or classes on them, like this:-

<div id="header">
  <header>
    <div class="logo">
      <figure>
        <img>
      </figure>
    </div>
  </header>
</div>
<div id="MainNav">
  <nav>
    <ul>
    </ul>
  </nav>
</div>
<div id="MainContent">
  <main>
    <div class="SideBar">
      <aside>
      </aside>
    </div>
    <div class="article">
      <article>
        <div class="heading">
          <h1>Heading</h1>
        </div>
        <p>Text.</p>
      </article>
    </div>
  </div>
</main>
<div id="footer">
  <footer>
  </footer>
</div>

This is nonsense, these divs are entirely pointless, unless there is some practical reason for needing an extra wrapper. You can just apply the IDs and classes directly to the elements and do away with the divs. That is if you actually need to identify them with such attributes. If an element is unique to the page, do it need an ID? If all articles display the same site-wide, do you need class for that? In many cases they will, but it’s another possibility for some to go without, with more specific semantic tags.

2 Likes

An opening section tag should be followed immediately by a heading tag or it gets flagged as a warning by the validator. This fact alone tells you much about the use of the section element and you would use it in introducing a new section in exactly the same way that you would have added a heading tag.

If its not a new or separate section then don’t use that tag,

As others have said whether you style the tag is up to you but why waste it.

5 Likes

I see yes I think that is best way to think of it = “meaning”. Yeah that what I am coming into to conclusion of when using section and they way I understand as well.

Yes I see your point and Im glad your pointing this out.

Wow this actually helps me understand it thanks :clap:

So is it a bad use to add width and height to the section tag?

like if you used it like like a wrapper container and it is a new section:

<section class="container">
   <h1>Title</h1>
   <div></div>
</section>

OR

   <section>
       <h1>Title</h1>
       <div class="container">

       </div>
    </section>

After learning more about semantics I believe I have my
HTML structure a bit off index.html (29.6 KB) because I notice I added a outerwrapper div around everything in my body not sure if thats a good approach.

<div id="outerwrapper"></div>

or maybe im just overthinking too much and its the authors choice…

That’s fine.

That’s only fine if you never want to style the section element differently from any other section elements which is highly unlikely and therefore I would add a class to it. You would not do the same thing with a div would you because then it would be an element that has no or little use.

The inner container is fine if you have a need for it.. If you don’t need it then don’t add it.

There is nothing wrong in adding divs when you require them to aid styling but they should not replace any semantic html tags that should be used in that situation.

1 Like

As mentioned before, styling is a separate concern to semantics. You may add styling to any element that requires it. The point is where and when you use a specific element and that section is not a “meaningless”, all-purpose, generic, block container like div is. It has a meaning, that is: one of a number of parts of something.

This gives you a clue as to where and when it should (and should not) be used.

1 Like

For me, I’m not wholly sure why you’d want to have a div inside a section, then apply a container class to it. You can already apply your styling to the section, and vary that by class if you need to. I’d want to keep the code much cleaner, something like this.

<section>
  <h1>Title</h1>
  <p>Some content</p>
  <p>Some more content</p>
  <p>Yet more content</p>
</section>

With that, you improve your semantics, your accessibility, reduce the div’itis, and in all likelihood reduce the amount of CSS you need too. It’s also more readable to you the coder too.

2 Likes

right

I think you may have misinterpreted the specs. What they meant is to use the the SECTION tag to denote ‘section of a content’. If you vane no particular semantic meaning to that content then use a DIV. You can use CSS to style the DIV or SECTION, in fact that’s CSS’s raison d’être. You can style any tag with it so that it looks the way you desire it to look, so there excuse to a semantically incorrect tag; there is also no official restriction, other than browser support, on how you style any given tag.

it is intact, best practice if you style your semantic tags and add DIVs and SPANs ONLY as needed to hook in CSS.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.