0

I understand from reading similar posts that the <section> tag in html is meant for semantic and organizational purposes. I was wondering, however, why using the <div> tag with a class attribute wouldn't have a similar effect. (e.g. <div class = "SectionOne">) Given these two methods, I could refer to each of them in CSS by using their respective names:

Section
{
color = white;
}

or

.SectionOne
{
color = white;
}

Personally, I think the second method allows for greater versatility in webpage design and I don't see many advantages to the new HTML5 feature. Would anyone care to clear this up for me?

  • 1
    [The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.](https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#the-section-element) – Jesse Kernaghan Jul 12 '17 at 04:28
  • 1
    Possible duplicate of [What is the difference between
    and
    ?](https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div)
     –  Jul 12 '17 at 04:49
  • `color = white` is a syntax error. –  Jul 12 '17 at 04:50
  • @torazaburo I read that article and I didn't find my answer there. Also, the "color = white;" example wasn't referenced for syntax purposes but rather purely theoretical reasons. –  Jul 28 '17 at 19:26

4 Answers4

2

section is usually used for having article like contents whereas div are meant to combine various block elements in order to style them differently. The main difference is just semantics.

Refer https://www.thoughtco.com/difference-between-div-and-section-3468001 for derails

Let me know if you require any further help

Amaan Iqbal
  • 761
  • 2
  • 9
  • 25
0

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Whereas: The <div> tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS.

Saurav Jamwal
  • 399
  • 3
  • 12
  • So if I wanted an entire chapter, for example, to have the same formatting, I would use the
    tag within the
    tag? And applying the same concept, if I wanted two different types of formatting for that paragraph I would nest two
    within a
    ?
     –  Jul 28 '17 at 19:24
  • Yes, you can take div inside div. – Saurav Jamwal Jul 29 '17 at 06:25
0

Maybe you mean section and not Section. Anyway, the semantics is a thing and the selectors another. In CSS it is better to select using classes than tag selectors, because you gain a lot in terms of versatility. So you are right from this point of view. Semantics is another matter: is not given by a class. Even if you give a "section" class to a div, you are not giving semantic meaning to a div.

itacode
  • 3,721
  • 3
  • 21
  • 23
0

<div> is simply a generic block-level element which predates the later, semantically-named, document-related elements which arrived with HTML5, such as:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <aside>
  • <footer>

When dividing up a document into its anatomical parts, you could still use:

  • <div class="header">
  • <div class="section">
  • etc.

But... you don't need to anymore.

Of course, even if you still use all of the above in your document you might still want to add other block-level elements and when you do... <div> is general purpose.

Rounin
  • 27,134
  • 9
  • 83
  • 108