Reputation:
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?
Upvotes: 0
Views: 3677
Reputation: 29463
<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">
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.
Upvotes: 0
Reputation: 761
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
Upvotes: 2
Reputation: 3787
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.
Upvotes: 0
Reputation: 374
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.
Upvotes: 0