Intro to "div": Suggestion

I think it would be better to at least add an indication that divs are more of an escape hatch and should be avoided if possible. Because you can always use CSS for styling content even without unnecessary wrapper.

step20

I understand than in a current world the web development is mainly done using components and sometimes you can’t avoid divs. I also understand that currently websites are not just documents. We’re building SPA-s that came to replace full blown apps, so we’re forced to use a lot of hacks. That said I believe devs should first learn about authoring proper semantic HTML.

The suggestion is not to rewrite the whole thing without using a div in that section (although I would prefer that). Adding some kind of “warning” or a highlighted note would be acceptable. As a community member, I just want to make sure freeCodeCamp provides quality material that would be an extendable knowledge base for newcomers.

Sorry if this sounded a bit rant-esque. I’m open to constructive criticism and discussion.

1 Like

There is nothing wrong with using the div element for layout. It is a generic element used when no semantic element is appropriate.

You can use a non-semantic element when you should be using a semantic element, but you can also use a semantic element when a non-semantic element might be more appropriate.

I agree, historically the div element has been misused. That really isn’t the case as much anymore.

It has nothing to do with components, SPAs, frameworks, or anything. It has to do with programmers who believe they are too good to write HTML. It is too “easy” or “boring” so they can’t be bothered to write it properly (and they never learned it properly). It is pretty funny seeing as HTML is the core of all websites.

Usage notes

  • The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

Also, you can’t teach the div without showing it and it should absolutely be taught.

3 Likes

Agreed with all of it.

The suggestion is to add a note in the course itself, that clarifies the role of div and prevents misuse.

3 Likes

@haykerman I see your point. If I may paraphrase, I think you’re suggesting that the instructions should emphasize that a div should only be used when there isn’t a more appropriate alternative. I can’t say I disagree.

3 Likes

I have no objection to clarifying by adding something like the MDN usage note to the challenge.

Without having seen all of the RWD curriculum challenges from start to finish I’m under the impression that they do a pretty good job of using semantic elements. I don’t think this single challenge step is going to cause people to misuse div elements.

As long as it isn’t a case of “do as I say, not as I do” I think campers will learn proper HTML by its use throughout the curriculum.

2 Likes

Hello my friend!
Thank you for your wonderful suggestion, and feedback. I think building off what you said perhaps they could add a message in the course. They could call it something like *Best Uasge Pratice. Div can’t be avoided, we will see it, and need to be aware of it as well how to use it. Yes, we should encourage people to learn to use sematic html as best practice. I have a question for you. What is SPA’s? I am not familiar with this. Thank you in advance. -Keep Coding

1 Like

Thank you for sharing your valuable perspective on the use of divs and promoting semantic HTML. I completely agree that as web developers, it’s important to prioritize proper semantic HTML to ensure well-structured and accessible websites. While the current web development landscape may require the use of components and workarounds, I share your belief that encouraging the learning and implementation of semantic HTML is crucial. Your suggestion to add a “stickwar” or highlighted note to emphasize this point is a great idea and aligns with the goal of providing quality material for newcomers. I appreciate your constructive approach and commitment to building a strong knowledge base for the community.

1 Like