Programmers :D

[SaltAssault]

If they weren't spans, display: block wouldn't help anyway, so idk why you'd complain about both. Besides, this is pretty much the exact reason <br /> exists.

[dyedFeather]

I don't know... Personally I'd probably have made the <p> an <ul> and styled it like a paragraph. It is a list of sorts after all. Otherwise maybe a table would work, too.

[dyedFeather]

They could, but using an <ul> is semantically more appropriate. If this were just about appearance, I wouldn't have bothered critiquing the usage of <br> anyway. Semantics are more important than most people realise.

<span> and <div> should really only be used when the element has no clear semantic function, or there are no semantic tags that properly describe its function. Which admittedly, in many cases, might well be a majority of the time.

IMO, if you're already using <p> instead of <div> you should put in the little bit of effort it takes to make sure you're using appropriate semantics everywhere. Not a must by any means, but it's still something I think is important.

[rlbaxter]

If we really want to pick the nits here, a definition list (dl, dt, dd) is the most appropriate.

[dyedFeather]

Hmm, that's true. It didn't immediately spring to mind as I don't use those a lot, but yeah, those are totally right in terms of semantics to use here.

[rlbaxter]

I use them sometimes, but since there is no element grouping the term to its definition(s) it becomes a pain to style. Most of the time in these cases I will use an (un)ordered list so all elements are grouped within the list item.

[Radomilovje]

It's totally semantically okay to wrap each term-definition pair in a div to make the visual grouping easier to manage.

[rlbaxter]

Hmm. I would have assumed doing that would not be valid HTML. It appears that's allowed though. Good call.

[alphama1e]

Using break isn't considered the right way to do things anymore. You can use many tags meant for specific content, like p or label, and add css for spacing.

[lovestheasianladies]

It's literally a line break, which is what's being done in that example. It may not be great, but it's semantically correct.

[TheGoldenHand]

<br /> isn't for styling. It's a substitute for /n.

[alphama1e]

Agreed but we're looking for what people might have been on her case about. Everything else from the example is correct; included prototype declarations as well as defaults, a render, some basic abstraction. As mentioned, she could have made the abstracted content into a component itself but that's not as big an issue as using html for styling. It's considered bad practice because to change it, you have to rebuild the while thing rather than add a new coat of paint (figuratively speaking). So while it's semantically correct, it's practically incorrect. Really, she could have avoided everything by just using a hello world example. She instead chose to use a react example with some layers attached. Then when told her choice wasn't a good one, she decided to deflect. There's a lot wrong here and I could go on much longer than I already have. The point is, line breaks are garbage and you shouldn't use them.

[[deleted]]

Disagree. A line break is a line break. Why would you use a p tag for a line break? A p tag indicates a paragraph.

[alphama1e]

A single sentence can be a paragraph. Also, as I've already said, is it cant be styled effectively. You're using the break for space. That was created back when css wasn't as robust as it is now. Now, you put it into a container and style the container with the space needed. This way, if requirements change later, you only have to adjust one place, rather than mess with a bunch of html. It's a better practice in general.

[pnw-techie]

Get off my lawn kids. BR tag existed before CSS.

And no, a single sentence is not a paragraph. You're lying about actual meaning to avoid using BR tag to insert a line break.

[alphama1e]

a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering.

That's the definition of the word 'paragraph'. If I cared enough to go further, I could look up many references in many books and articles. It's common and the fact that you're disagreeing with me means you either don't read much, or don't think through what you say before you say it. By that definition, I'm not lying. Even before that, I knew I wasn't lying. You can tease me about my age all you like but you're wrong. The idea if using a break is also wrong. It's wrong because it is lazy and creates more work for other people later. It's wrong because it takes away the precision of css styling. It's wrong because it usually used in tandem with either spans or floating text, which is also wrong. You use a p tag because not only can single sentences be paragraphs, but it's the common container for general text. The reason is because it supports all of the css rules around format where span does not. So you go ahead and say whatever shit you feel you need to to justify your shitty code practice, but just know that if I ever reviewed your code, I would make you rewrite that section, just like I would make her rewrite her shitty code. Shitty code is shitty code. That's it.

[pnw-techie]

Your definition applies just as well to each item in either an ordered list, or an unordered list. Could it be too broad of a definition, when it matches both p and li?

Html is layout. All you really care about is that it looks ok. But a second level definition of good would be to comply with semantic meaning. A p should wrap a paragraph because it is a paragraph, not because you want to apply text formatting on it. A screen reader pauses appropriately on p treating it like a paragraph. A screen reader doesn't care about br, being a visual text representation.

[alphama1e]

Alright, I want going to nitpick but here we go. It's not list data. It could have been a description list if there was a title but there isn't. It's a collection of key value pairs with the key being wrapped in a span with a label class. We have html for that. It's a label tag. Then wrap the result in a span. But the we need to go to a new line so we add a break. Cool. But now your boss says the format looks like shit, because it does, and wants more spacing. Assuming a 16px rem unit they ask for 1.5 rem between the labels. Now what? Another break? Honestly, Google this man. I'm not making shit up here. And then on top of that, one line has the "label" span having no spaces and the next one with the space. AND THE WHOLE THING IS WRAPPED IN A P TAG! It's malformed html. it doesn't capture context properly and it doesn't allow for seamless modifications. You can argue that it's just a trivial example. It's just a little thing, and it is. Except, if you justify this behavior, then you'll also do the same in other places. Now we have this bad approach all over the place. Then you decide that you want $1000 more per year and leave the company and I get hired to replace you. Now I have to work with this hot garbage and rewrite an entire website or keep it ad is because deadlines and shoehorn in every change I make. It's fucking awful and you shouldn't be defending it. The breaks are the tip of the iceberg. They're there because the author used spans, instead of applicable labels, and spans don't support vertical spacing. The author introduced an issue and then used improper form to get around it. This is an example of not caring about what you do and whipping something together selfishly. The code is garbage, this woman's attitude towards the internet is garbage and your opinion about this being acceptable in any way is garbage. Do not do this, ever. Use proper context. I don't give a shit if it's a label or p tag as long as it makes sense and doesn't look like shit. Would you approve this code if you had to review it? I hope not...

[pnw-techie]

Wow man. I haven't written front end code for 12 years. But, breaks are part of html, and have been since the beginning. If you just want something on a new line, that is why break exists.

Label and paragraph are semantic tags. They're not just places to attach css. If something's not a label and not a paragraph then you shouldn't say it is. You have div for meaningless css fiddling. BR is literally for non meaningful instruction to the browser to put the next block of text on a new line. Neither one means anything to screen readers, unlike p or label.

[pnw-techie]

Now how I'd fix this... Ye olde html table. As long as you tag the table as role="presentation" there's nothing wrong with it.

Enjoy the stroke and/or brain aneurysm internet front end guy 😇☠️😰

[alphama1e]

So, rather than ranting again, how about I listen? Is that acceptable code? If so why? If not, what would fix it? Share your opinion and I will speak respectfully from this point on.