JavaScript React Basics (retired) Thinking in Components Mocking up our Application

Michal Janek
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,653 Points
Posted by Michal Janek
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,653 Points

Is the div soup ok?

Shouldn't we try to be more semantic here for HTML tag purposes? I heard that throwing divs everywhere is not the most responsible approach.

GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points
GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points

If there is a more semantic tag than using a div. I recommend you use it for readability sake. If you can't think of a semantic tag use a div. But i would expect you to use a div and write a line in your css like this 

div{
 display: inline;
}

use a span. you get the idea :) Happy coding

4 Answers

Tommy Gebru
Tommy Gebru
30,148 Points
Tommy Gebru
Tommy Gebru
30,148 Points

yep i feel stressed by the divs too LOL

Richie Black
Richie Black
27,272 Points
Richie Black
Richie Black
27,272 Points

No, it is not OK. HTML should be semantic whenever possible.

Samuel Fortunato
Samuel Fortunato
20,229 Points
Samuel Fortunato
Samuel Fortunato
20,229 Points

I don't think the div soup is OK here. Because this outputs to normal HTML when rendered, it should follow proper HTML guidelines. It should be more semantic than this.

For example, instead of doing:

<div className="player-name">
  Player Name Here
</div>

...you could do:

<h2 className="player-name">Player Name Here</h2>

...and update the CSS styles accordingly. If not this, then at least wrap the player name text inside an <h2> tag.

Div soup should be avoided.

Karolin Rafalski
Karolin Rafalski
11,367 Points
Karolin Rafalski
Karolin Rafalski
11,367 Points

I've been having a tough time with completing the html portion because I can't tell which div is closing off where. I think I messed one up and I am now struggling to get the correct nesting. I am being really diligent about indentation too, but this has taken me way too long and I have put aside this lesson twice from frustration with just trying to get the 'html' portion right. Going to try going from scratch now.

Really wish there were at least some header, main, and section tags to swap out some of the divs...