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.
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
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
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....
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.
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
@@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.
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.
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.
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!
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.
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
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.
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?
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.
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.
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.
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?
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?
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.
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.
Nice vid, but I wouldn’t consider the breadcrumbs to be a ‘section’. Typically sections have headings. You could put as a nav though. Rest of video is spot on
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
It’s really nice to review the basics of semantics directly with reactjs and not in an html file. Thanks!
Thanks, that was indeed the goal
I love how you go straight to the point cover little things in a very huge way I really appreciate.
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.
I'm now inspired to replace unnecessary div elements throughout my app with more semantic tags. Thanks for the insights!🙏
sometimes people forgot to learn the basics, great content!
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
Wow, that was great especially since I liked how fast and straight you talk about everything not jumping around the subject. Thanks a lot ❤
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
Thanks, appreciate it
I didn't consider the importance of semantic tags until I started using them in schema structures. They make a significant difference in SEO
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
This video was AMAZING! As soon as I started following your advice everything started to click! Please make one explaining forms, etc!
thanks, so many years, and now i understand the diff between article and section 🙌
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....
Thanks, appreciate it
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
This cleared up a lot of underlying doubts, great information, thanks for making it so easy
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.
Yep, fair point
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
Sorry about that, will increase volume
It's loud enough. Just hit the volume increase button a few times 😒
@@fugduhhh correct
@@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.
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.
You should make a video on the folder structure best practices.
It’s on the todo-list, thanks 👍
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.
another hidden gem channel 💯, sleek explanation
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!
This video and the content is too good.
learned a lot, subbed
is recommended using section with a heading tag, without causes warning
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.
Great contents!👍
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
what extensions you used with react and nextjs ?
You said it all. I always encourage my studs to use HTML5 with strict XML guidelines 😎👍
Thanks! I learned new things today.
Great, you learned from the comment on your yesterday's video, but it would be nice if you could speak a bit more loud.
Thanks for the good stuff, learned something new 👍
I guess they called this dividities. And the way first versions of reactjs was it feels natural to wrap everything with div
Great video. Clear and concise, thanks
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.
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?
Thank you so much
Hello brother when will you release react course on udemy still waiting already completed JS.
Soon. It won’t be released on Udemy. Make sure you’re on the email list :)
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.
I learned a lot from this video!
They didn't teach this in college, lol. Thanks!
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.
i'd assume a lot of that is coming from no/low code page builders or CSS frameworks that prioritize modularity over markdown simplicity.
@@wchorski Partially, but a lot of it is just lack of thought, copy-paste, etc.
7:00 for the Link tag you should use to="/" instead of href="/"
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.
@@jeetgangwar1614 oh never thought about it, thanks for correcting me and understand something I didn’t knew < 3
I wish I wasn’t leaving a Svelte team for a React team
Learned a lot, thanks.
Which Visual Studio Code theme do you use?
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?
I use CTRL + Space
@@ByteGrad Thank you!
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?
Your vid has good semantic meaning..
Please make tutorial on big project
your portfolio website is amazing
Professional React & Next.js
I’m finishing up the details. Make sure you’re on the email list for early-bird pricing 😉
How do you get these code suggestions?
Here it goes refactoring… Thanks for a great video!
Is it same as using the empty fragment? (
Items
)
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.
Thanks. I actually have that on the todo-list haha, stay tuned
Amazing tutorial!
very impressive teaching but try to sound louder please
Couldnt you also use display:contents?
Thanks a lot
Your mic sounds grainy for some reason. It seems you're even using a Shure mic too.
is division/subdivision for section, etc.
I don't think it's just for styling.
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.
Ok I didn't know that React Fragments can have a key property, I wish I knew this 3 hours ago, literally.
Great work❤
thanks
waiting for your React, Nodejs and MERN stack courses on Udemy. Big fan.
Thanks, make sure you’re on the email list :)
Nice vid, but I wouldn’t consider the breadcrumbs to be a ‘section’. Typically sections have headings. You could put as a nav though. Rest of video is spot on
according to React docs, you should avoid using index as a key tho.
woow Thanks
And I am that Junior Developer...
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?
Fragment is still necessary because there will be a span as well for the first one (always need to return 1 React node)
= ?
Stop using && in React Conditional Rendering, use the ternary operator instead
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
HTML cluttering is not an argument. The rendered code is for the browser, not for the developer.
We often want to inspect HTML in the inspector tool
Using index as a key is not a good practice.
Subheding for SEO as always H tag
section + div everywhere
Div is good😅
Sometimes, over engineering
Thank God I'm using Vue. It looks so complex, while vue is just html on steroids.
It was awesome
No !
This great.
I'm going to use many divs as I want
This video has good.. semantic meaning...
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 " "
Awesome
Stop using section, article always use div.
speak slowly and speak loudly so we can understand what are you saying
Are you a robot | alien ?
🤣
@@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
Div or die
I say just stops using React and use other framework that has better DX.
i dont know are you just for real or just joking?
Better idea… stop using react.
k, I'll start using instead