Stop using div in React (+ Fragment, Semantic Tags)

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Intro
0:08 div problems
1:13 React Fragment
1:39 Second example: long vs short
2:58 Semantic Tags
3:20 html, head, body
4:52 main
5:19 header
5:53 nav, ul, li, a, Link, img
7:12 footer
8:12 section
9:06 h1, h2, h3
9:20 p
9:26 aside
9:35 article
10:27 button vs a
10:46 input vs textarea
10:52 b, strong, i, em vs span
11:59 Stripe website
13:50 MDN website
14:36 Web apps
15:32 Important
#webdevelopment #programming #coding

[@tnktaliaba2994]

It’s really nice to review the basics of semantics directly with reactjs and not in an html file. Thanks!

[@ByteGrad]

Thanks, that was indeed the goal

[@Waxaranai]

sometimes people forgot to learn the basics, great content!

[@samuelsamson690]

I love how you go straight to the point cover little things in a very huge way I really appreciate.

[@trusht]

I'm now inspired to replace unnecessary div elements throughout my app with more semantic tags. Thanks for the insights!🙏

[@developedbythet]

Another educator that use semantic tags properly and it feels satisfied. In a world of modern component based era, people are misusing 'div' everywhere. Thank you.

[@core-developers]

I didn't consider the importance of semantic tags until I started using them in schema structures. They make a significant difference in SEO

[@Adenafun]

Wow, that was great especially since I liked how fast and straight you talk about everything not jumping around the subject. Thanks a lot ❤

[@boneykingofsomewhere]

What a fantastic video! This really taught me much more about the meaning and value of semantics and layouts, you got a subscriber buddy :D

[@Alex-bc3xe]

You are really good teacher.

[@diogosaraiva17]

As a junior developer I can affirm that this video is gold. Thanks a lot dude + subscribed

[@pianistanton1]

how long have you been learning front end to get your first job? Is it still possible to get a job as a junior frontend? or everyone just need mid/senior?

[@diogosaraiva17]

@pianistanton1 I would say that it's hard to get a job as a junior developer but if you're consistent with your daily code you'll get a job sooner or later. Also, try to create/fix github repos, recruiters often ask for it, at least in europe.

[@blackpurple9163]

This cleared up a lot of underlying doubts, great information, thanks for making it so easy

[@abderrahmanemya6602]

your videos suite my short attention span lol. you talk fast but calmly, and you get straight to the point, i learn a lot in a small amount of time. i would love to connect with you on linkedin

[@tomich20]

thanks, so many years, and now i understand the diff between article and section 🙌

[@BladyCzlowiek]

this really is the best channel on youtube. The amount of knowledge I gained from this channel. I am looking forward to the nextjs course

[@ByteGrad]

Thanks, appreciate it

[@AlexMercadoGo]

I wish I wasn’t leaving a Svelte team for a React team

[@wizard.of.moz.472]

This video was AMAZING! As soon as I started following your advice everything started to click! Please make one explaining forms, etc!

[@ROL4NDFPV]

Nice video good information, one side note a is the same as a unless when you add an title, aria-label or aria-labelledby on the . Here's some more info on it --- A landmark containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology. Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation. Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with aria-labelledby if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role heading. Assistive technologies SHOULD enable users to quickly navigate to elements with role region. Mainstream user agents MAY enable users to quickly navigate to elements with role region. --- As found on www.w3.org/TR/wai-aria/#region

[@yuvalbra]

what extensions you used with react and nextjs ?

[@zush2305]

That's really nice way of covering this topic. I had the same idea of diving in into HTML semantics, are there any good resources to read about this that you'd recommend?

[@LynxBaretta]

I really really like the content of this video a los of things that I was not paying attention and I was still doing like sometimes using divs instead of fragments and correct use of HTML semantics I that I was not aware of their correct meaning. Thanks!

[@user-ru8hn9hb5c]

They didn't teach this in college, lol. Thanks!

[@takeshikriang]

Great video. Clear and concise, thanks

[@MrPlaiedes]

As a lead dev, semantics are important for accessibility but eventually you'll likely be building components that are abstracted away from the actual web page. It's still important to minimize div soup.

[@ByteGrad]

Yep, fair point

[@sivadhanushuppalapati4041]

This video and the content is too good.

[@ElliottTheUnicorn]

learned a lot, subbed

[@tszhong0411]

Thanks! I learned new things today.

[@cmdxen]

another hidden gem channel 💯, sleek explanation

[@tvujtatata]

Good stuff most people dont talk about. Personally, I am more interested in writing semantically correct markup although I am a bit confused when it comes to details. Nav without a Header if there is nothing but navigation in the header. Section in Main, if there is only 1 table and 1 button on the whole page.

[@joantsyn7578]

Great contents!👍

[@philipepics]

is recommended using section with a heading tag, without causes warning

[@marcowassink3803]

How do you get these code suggestions?

[@jonzer3028]

Learned a lot, thanks.

[@VadimCherepnin]

Which Visual Studio Code theme do you use?

[@Diego_Cabrera]

You should make a video on the folder structure best practices.

[@ByteGrad]

It’s on the todo-list, thanks 👍

[@ganesha3559]

what an exceptional video! Trust me, this is one of a kind. Your semantic tag explanation with a real world popular website as a review -- this content cannot be found anywhere in the web for this alone you need a Subscribe + Bell icon hit. bravo....

[@ByteGrad]

Thanks, appreciate it

[@manpreetjord1885]

great work. Covered some really good topics which people generally ignore because it still works for them. Just one thing, I thought I was watching the video on 1.25x but when I checked and it was normal speed.

[@2gbeh]

You said it all. I always encourage my studs to use HTML5 with strict XML guidelines 😎👍

[@ryostyles9904]

Is it same as using the empty fragment? ( Items )

[@thedelanyo]

I guess they called this dividities. And the way first versions of reactjs was it feels natural to wrap everything with div

[@gotosleepqueen7959]

I learned a lot from this video!

[@Ogos-End]

Your vid has good semantic meaning..

[@tomasburian6550]

Thanks for the good stuff, learned something new 👍

[@AWaterKnight]

You can also return an array of elements, though I do not prefer that, either. I guess being able to pull out articles means that the structural content is meaningful, it does not have the environmental styling or accompanied behavior normally if you just pull out HTML code between opening and closing article tag. A lot of divs are spawned to use them for layouting as said in the video. This way, you can separate the concerns rather than passing the styling information to the contained element and making it their responsibility to correctly apply it.

[@_abuk]

Couldnt you also use display:contents?

[@touratica]

I really like how informative your videos are, but it sure would be a lot easier to understand you if the sound were a bit louder. That said, keep up with the great content

[@ByteGrad]

Sorry about that, will increase volume

[@fugduhhh]

It's loud enough. Just hit the volume increase button a few times 😒

[@purshotambohra2131]

@@fugduhhh correct

[@tvujtatata]

@@fugduhhh When you need to do this for every audio content, it becomes annoying. I dont think such a small recommendation hurts anyone. Dont forget about accessibility that the video is also partly about.

[@abishekbaiju1705]

Thanks a lot

[@fdkgamer3631]

Istg overwhelmed by everyone..Some people is saying div is everything..Some is saying don't start with the div..need a complete video on when to use div

[@holyjack5215]

Here it goes refactoring… Thanks for a great video!

[@maheshadusumilli7833]

Hey Bytegrad. I tried searching your course in Udemy for CSS. But it is not appearing there while searching. Only with the link it is working. I am able to see only Javascript course. Can you help on how to find your CSS course from Udemy website?

[@ahmednabil4456]

thanks

[@taborgreat]

good video. if you let your jaw relax (drop all biting force deep in your molars and cheeks) and use your jaw more while you talk (let it slide side to side and front to back loosely and with energy with each word), it'll really help with your pronunciation.

[@AndrewAkaHrun]

Amazing tutorial!

[@luisllaboj]

What is the keyboard shortcut to import components? Like for "Link" and "Footer" you click on something and they're instantly imported. How can I do that without having to click on the little lightbulb that imports it for me?

[@ByteGrad]

I use CTRL + Space

[@luisllaboj]

@@ByteGrad Thank you!

[@gurvirbaraich2028]

Great, you learned from the comment on your yesterday's video, but it would be nice if you could speak a bit more loud.

[@eistache3182]

Ok I didn't know that React Fragments can have a key property, I wish I knew this 3 hours ago, literally.

[@manmittiwade]

Please make tutorial on big project your portfolio website is amazing

[@gwesa2921]

Just a tip. Do not use index from an array method as the unique key identifier, it can cause problems when the list is dynamic, meaning that items can be deleted or added. Some of the problems are: Re-rendering, State preservation and animation problems. Better to use an ID, a slug or a hash.

[@prashlovessamosa]

Hello brother when will you release react course on udemy still waiting already completed JS.

[@ByteGrad]

Soon. It won’t be released on Udemy. Make sure you’re on the email list :)

[@404-not-found-service]

woow Thanks

[@CottidaeSEA]

This is really not an isolated issue in React. It's everywhere in the frontend world. I've seen many cases where multiple nested divs have been used for simple styling, instead of just putting the classes on the first div.

[@wchorski]

i'd assume a lot of that is coming from no/low code page builders or CSS frameworks that prioritize modularity over markdown simplicity.

[@CottidaeSEA]

@@wchorski Partially, but a lot of it is just lack of thought, copy-paste, etc.

[@JaGaNezhil]

Great work❤

[@jaycodes8790]

Hey amazing content, Could you please make a video on "Modal based routing" in nextjs. How one can implement that on a large project. So that i can share a link of a modal directly.

[@ByteGrad]

Thanks. I actually have that on the todo-list haha, stay tuned

[@harpo187bling]

Professional React & Next.js

[@ByteGrad]

I’m finishing up the details. Make sure you’re on the email list for early-bird pricing 😉

[@kamrulislam3841]

very impressive teaching but try to sound louder please

[@complikatd]

Your mic sounds grainy for some reason. It seems you're even using a Shure mic too.

[@okkaraung9512]

waiting for your React, Nodejs and MERN stack courses on Udemy. Big fan.

[@ByteGrad]

Thanks, make sure you’re on the email list :)

[@lel0uchfr199]

7:00 for the Link tag you should use to="/" instead of href="/"

[@jeetgangwar1614]

In the react-router-dom's component, the attribute to="/" is used. However, when using the component in Next.js, the attribute href="/" is used instead.

[@lel0uchfr199]

@@jeetgangwar1614 oh never thought about it, thanks for correcting me and understand something I didn’t knew < 3

[@ck-dl4to]

section + div everywhere

[@pomawewka]

Subheding for SEO as always H tag

[@jayakumar9976]

This great.

[@sujonpramanik1151]

It was awesome

[@Tin9102]

according to React docs, you should avoid using index as a key tho.

[@shariqueansari9439]

Awesome

[@jerryalmeida]

Stop using && in React Conditional Rendering, use the ternary operator instead

[@jinx.love.you.]

And I am that Junior Developer...

[@abhishekkadam2999]

is division/subdivision for section, etc. I don't think it's just for styling.

[@Burrijw]

It serves no semantic purpose and is mostly ignored by screen readers and other assistive tech. The only purpose of a div is to contain other elements for styling, and in some cases, to represent a visual element that cannot otherwise be created with a more semantic element.

[@robertbutcher222]

About the button layout example, why do you even need a fragment? Couldn’t you just straight away map over the buttons inside the section?

[@ByteGrad]

Fragment is still necessary because there will be a span as well for the first one (always need to return 1 React node)

[@user-ni9tf5yr6m]

= ?

[@tomfancode]

Div is good😅 Sometimes, over engineering

[@Ogos-End]

This video has good.. semantic meaning...

[@maxterrain]

Thank God I'm using Vue. It looks so complex, while vue is just html on steroids.

[@nabeelali6753]

All of these are just good-to-know. At work and in production, the hierarchy of importance is: 1) Functionality 2) Optimization 3) Design 4) "Best" practices aka nerdsht preferences such as these which are actually negligible

[@MageLink]

I'm going to use many divs as I want

[@francismori7]

HTML cluttering is not an argument. The rendered code is for the browser, not for the developer.

[@ByteGrad]

We often want to inspect HTML in the inspector tool

[@adventureswithpasa]

Stop using section, article always use div.

[@user-dh9rh3js3u]

Are you a robot | alien ?

[@ByteGrad]

🤣

[@user-dh9rh3js3u]

@@ByteGrad Yes Sir, I really struggled to find out a single expression on your face. seems like you are just reading news like an anchor person

[@TheNarstonerz]

No !

[@Code_express]

speak slowly and speak loudly so we can understand what are you saying

[@metaxx5253]

Div or die

[@mac.ignacio]

I say just stops using React and use other framework that has better DX.

[@flamme8587]

Excuse me but, why you didn't show the empty element that works perfectly fine to wrap elements in a empty body instead of React.Fragment " "

[@acegodas7852]

i dont know are you just for real or just joking?

[@mikeonthebox]

I love how React developers always blame this on "Junior" Developers. How about using a better framework that doesn't force you to return just 1 node leading to this "mistakes" And talking about mistakes, aren't you doing a mistake by using index as a key value? I believe React doesn't recommend that at all, and even mentions it can lead to weird behaviors.

[@OpenDeepLearning]

You stopped just when your channel started booming. Why is that?

[@ByteGrad]

I didn’t stop, more to come soon :)

[@OpenDeepLearning]

@@ByteGrad ok, great!

[@MatthewKennedyUK]

Better idea… stop using react.

[@yogeshkadu5453]

[@randerins]

k, I'll start using instead