Is there any benefit to not using semantic? Or should I just start getting in the habit of 100% semantic now?
I only ask, as it seems weird to mention divs/spans etc then to say don’t use them after seeing them in the lessons for a period of time (nothing wrong with that, just want to make sure there’s not a reason they chose to do it this way besides ease of learning).
One follow either completely semantic or non semantic code in the entire project.
In my sense. Yes semantic and non semantic can be mixed.
Hi from the far future! This might be helpful to those looking at this thread in 2024+. I still have the same question because going to any site currently and looking at thier code, div is used everywhere and I rarely see semantic HTML. Plus there’s still conflicting opinions in these comments. While the solution being that you can use a mixture is correct, I’ve found this information that may be more helpful in understanding how and why you can, and sometimes should, use both.
The industry standard has been shifting towards a stronger emphasis on using semantic HTML where appropriate, while
<div>elements are still widely used for generic containers where no semantic element is applicable. The reasons for this shift include:
Accessibility: Semantic elements like<header>,<nav>,<article>,<section>, and<footer>provide more information to browsers and assistive technologies about the type of content they contain, making web content more accessible.
SEO: Search engines use the semantics of HTML elements to better understand and index content, which can improve a site’s search engine ranking.
Maintainability: Semantic HTML makes it easier for developers to understand the structure and purpose of the content in a document, leading to easier maintenance and development.
However,<div>elements are still prevalent for several reasons:
Flexibility:<div>elements are incredibly versatile and can be used for any container purpose, making them a go-to choice for many layout and styling tasks that don’t require semantic meaning.
Legacy Code: Many existing websites and templates were built before the widespread adoption of HTML5 semantic elements, leading to a continued high presence of<div>elements in the wild.
Specific Use Cases: Sometimes, a<div>is the most appropriate choice when no other semantic element accurately represents the content or function of a section of the page.
In practice, the best approach is a balanced one: use semantic HTML whenever possible to convey meaning and structure, and use<div>elements for generic containers or when no semantic element fits the content’s purpose. This approach enhances accessibility, SEO, and maintainability while still providing the flexibility needed for complex layouts and designs.
very good explanation but what im willing to ask is… if div already has some id values… whats the point in putting another tag like and instead just do
One thing we should all be clear on: Semantic elements have zero effect on the how the page (document) will render in the browser. They are intended more for assistive technologies and search engines as they describe the role played by the content they contain. This is all that is added to the accessibility aspect.
In the olden days we would write:
<div id="header">
</div>
<div id="nav">
</div>
<div id="main">
<div class="article">
<div class="section">
</div>
<div class="aside">
</div>
</div>
</div><!-- end MAIN -->
<div id="footer">
</div>
Today, we have simpler, more specific elements to fill all the above roles.
<header>
</header>
<nav>
</nav>
<main>
<article>
<section>
</section>
<aside>
</aside>
</article>
</main>
<footer>
</footer>
Notice how much more readily the roles are spelled out without having to assign id or class attributes? That was the main point of introducing ‘semantic elements’. We should not write an special purpose into the story. They are still just plain old HTML elements. Nothing is changed in the rendering process.