Why & When to Use Semantic HTML Elements over Divs

  Рет қаралды 85,652

ByteGrad

ByteGrad

Жыл бұрын

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth 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
0:00 Solution
#webdevelopment #coding #programming

Пікірлер: 55
@mikeandrewfernandez9797
@mikeandrewfernandez9797 Жыл бұрын
I was confused by the difference between article and sections until I found this video. Awesome content! 👍
@itsjiraheta
@itsjiraheta 8 ай бұрын
I have worked in soft dev (mainly in mobile) for over a decade. I used to work a long, long, loooonggg time ago on websites. They have gotten more complex, to say the least, and are in their own category nowadays with so many things to consider. Thank you for the explanation and the level of detail. Def got me as a sub! keep up the great work.
@joaovitorschmidt6194
@joaovitorschmidt6194 10 ай бұрын
your way of teaching is very good, english isn't my first language, I understand like 70% of the words and still understand you, even with reaaaaly basic knowledge of programming. Thank you so much for your content, keep it up.
@MichalRutz
@MichalRutz Жыл бұрын
A very clear and professional introduction. thanks!
@throbicon
@throbicon Жыл бұрын
Thank you! This explanation and examples helped me understand the tags. Well done!
@1015AK
@1015AK 11 ай бұрын
I use sections to create sections of content on the page and then if I need to divide up the section for styling I use a div for that
@SL4UGHT3R
@SL4UGHT3R 14 күн бұрын
One of the greatest video that explain semantic tags in depth and briefly at the same time.
@kauheaa
@kauheaa 5 ай бұрын
Had been reading about web accessibility and sematic tags all day and was looking for an explanation on the distinction between section and article, this provided answer to that and some other questions as well. Thank you!
@evanmico
@evanmico 6 ай бұрын
1:36 From what I understand, a element isn't for "the most important links on a page", but rather it just specifies a grouping of links on the page. It is NOT uncommon to have them in the footer. The important thing is that *if you have multiple elements you need to label them.* This is done using an attribute called aria-label="" or aria-labelledby="" with an h tag child containing an id set equal to the value in aria-labelledby="". Dave Gray did a nice explanation of this particular topic here: kzfaq.info/get/bejne/ob5jh8mVutfUpYk.htmlsi=nqgp6qUcEy9_5bkq&t=450
@RaghadJohani
@RaghadJohani 8 ай бұрын
I love this kind of videos, insightful, and fun to watch. Thanks.
@whoozie
@whoozie 3 ай бұрын
thanks for the overall explanation with the examples, this was what I wanted!!!
@alialrahem9817
@alialrahem9817 2 ай бұрын
I did study this material on focus on SoloLearn and really clear to know the structure here you explain in detail thank you for posting this video very clear and consistent
@RichReflectionz
@RichReflectionz 10 ай бұрын
I was confused about sections and articles till you explained it, thanks
@vanezamanlangit7989
@vanezamanlangit7989 Жыл бұрын
Thank you! You're very helpful.
@sehitgoker5073
@sehitgoker5073 11 ай бұрын
good stuff mate, was clear and helpfull.
@DarkD33p
@DarkD33p 6 ай бұрын
Finally a clear explanation on the subject. Thank you very much.
@humphrey4930
@humphrey4930 5 ай бұрын
Thank you, I understand it a bit better. Nice Content
@heavenlyhighlights-em4cl
@heavenlyhighlights-em4cl 7 ай бұрын
Great Explanation . Earned a Subscriber..
@mks-h
@mks-h Жыл бұрын
Good video, thanks
@zahid9652
@zahid9652 10 ай бұрын
I am from India love you from heart ❤️ Really your example and explanation are very actually very good From hear ❤️
@arafathossain3778
@arafathossain3778 Жыл бұрын
Very helpful
@kakyoin4535
@kakyoin4535 Жыл бұрын
thank you!
@TsTheSeason
@TsTheSeason 6 ай бұрын
Hey thanks so much for the great content!
@savvyonchain
@savvyonchain 7 ай бұрын
I think we can still use a nav element in the footer section. We just have to use an arial-label to specify what section they belong to.
@Globalview308
@Globalview308 Ай бұрын
Now I understand what it's meant and how to apply... Thanks
@gfred3234
@gfred3234 2 ай бұрын
I like to use div in my sections as nested... because I separate contents inside the section and better to toggle for styling
@RoboticsDevelopment
@RoboticsDevelopment 9 ай бұрын
Subscribed!
@igu642
@igu642 9 ай бұрын
i thought html is easy but when i trying to do project in my own then i finded what the heck how to use this things i thought nuh developing is not for me but when i watch your video i am happy now
@djt6fan
@djt6fan Жыл бұрын
Appreciate the effort. Any idea when you will be releasing the web design course, or the React course? I'd be interested in those.
@ByteGrad
@ByteGrad Жыл бұрын
React course will be published next month, definitely make sure to be subscribed to the email newsletter 😉
@tambeegbeayuk1836
@tambeegbeayuk1836 3 ай бұрын
This Is the best video ever🎉🎉
@Alyosha922
@Alyosha922 Ай бұрын
thanks bro
@ISoHEoBASSIST
@ISoHEoBASSIST 3 ай бұрын
"I'm under the impression that semantic HTML is one of those things that everybody sells as a super important good practice, but nobody really ever ends up using. Am I wrong?
@onlytrends2916
@onlytrends2916 Ай бұрын
You are actually right, my brother is a developer and in his company everyone uses only div thats all
@ISoHEoBASSIST
@ISoHEoBASSIST Ай бұрын
@@onlytrends2916 thanks for the piece of knowledge!
@tataruovidiu9305
@tataruovidiu9305 2 ай бұрын
thanks!
@amandamcberth3160
@amandamcberth3160 Ай бұрын
That was a good explanation of html
@user-rq2ek3he9w
@user-rq2ek3he9w 4 ай бұрын
good stuff
@chemaalonso7931
@chemaalonso7931 4 ай бұрын
I ALWAYS use article and inside sections I tjink is more semantic surround a whole article and divide the article in sections because you can have for example an article about cats and inside sections like food, sex, ages, dead, etc.. that has no sense if you pu it out of the article but if you put put the whole article has meaning, and i use header even in a section and articles i use footer too inside articles and even aside and navs if i got some links inside that article in the aside, you can mix it elements and it is good
@shinjiikari4629
@shinjiikari4629 Ай бұрын
I feel dumb for not knowing or ever figured out by myself that div was short for divider
@lauraudechukwu2899
@lauraudechukwu2899 Жыл бұрын
this is really helpful and easy to understand. I have a question though, what are screen readears/accessibility mean?
@cristopherguillen4435
@cristopherguillen4435 Жыл бұрын
Screen readers are a feature that some phones and computers use to read and help blind people.
@epicturnip
@epicturnip Жыл бұрын
What theme is this?
@SoulSovereignty
@SoulSovereignty Жыл бұрын
My #1 interest is knowing how to quickly create my own site "template" for a small Svelte or React project. For the former (Svelte) perhaps that means using Pico CSS and...flexbox for layout? For the latter (React)...I'm not sure (Tailwind is generally for larger projects, and is flexbox sufficient, or bootstrap overkill?). Do you have either videos or coursework that cover this "mastery of making a site template/layout"? I suppose just a video/course that shows how easily(?) flexbox replaces bootstrap layout? As for styling, I'm not excited about a CSS deep-dive because...as stated...I only have small projects and I don't want to take a ton of time to learn all the intricacies of CSS if something like Pico CSS will suffice.
@ByteGrad
@ByteGrad Жыл бұрын
Hi, I highly recommend you check out my CSS-course. Flexbox is king but you need to know CSS grid too, everything else is just an abstraction built on top of plain CSS (easy to learn once you’ve mastered CSS itself)
@AlThePal78
@AlThePal78 7 ай бұрын
why did stripe put the stuff in a div that is confusing though
@BK-iu6ow
@BK-iu6ow Жыл бұрын
What’s the best way to set up html in the head and body, that will make it mobile friendly or screen friendly where if screen is bigger it still comes out the same
@hetoverseo3887
@hetoverseo3887 10 ай бұрын
Use min(), max(), create a style for mobile first then add media queries with min-width to style content when the screen gets bigger.
@user-om2zq2je9w
@user-om2zq2je9w 5 ай бұрын
большое спасибо мне очень понравился данный урок а вам, не так ли?
@mobilejo1
@mobilejo1 5 ай бұрын
you de esser is working hard asf
@edgarspujats8282
@edgarspujats8282 Жыл бұрын
I really likes the video but shouldn't section include atleast one heading?
@toastedclosure2770
@toastedclosure2770 10 ай бұрын
u forgot to mention details, dialog, summary and data
@lucialuciferion6720
@lucialuciferion6720 4 ай бұрын
I hear a Dutch accent :)
@DOODOOMAN118
@DOODOOMAN118 4 ай бұрын
To be honest, this shit right here is why I wanted to quit lol. I got so frustrated
@You_n_mee
@You_n_mee 4 ай бұрын
what is that sound in the background? so annoying
When to Use Semantic HTML Elements Instead of Divs
17:57
Craig A. Bourne
Рет қаралды 38 М.
Stop using div in React (+ Fragment, Semantic Tags)
15:48
ByteGrad
Рет қаралды 114 М.
تجربة أغرب توصيلة شحن ضد القطع تماما
00:56
صدام العزي
Рет қаралды 52 МЛН
Avoid these 5 beginner CSS mistakes
21:38
Kevin Powell
Рет қаралды 76 М.
HTML Full Course #45 - What is Semantic HTML and How to Use it?
12:18
ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!
13:54
The only tags you need when first learning HTML
17:07
Kevin Powell
Рет қаралды 44 М.
Semantic HTML - How to Write Clean Code (Beginner)
19:48
Ethan Eisenhard
Рет қаралды 22 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 922 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 709 М.
HTML section elements are a lie (sort of)
7:59
Kevin Powell
Рет қаралды 136 М.
Я УКРАЛ ТЕЛЕФОН В МИЛАНЕ
9:18
Игорь Линк
Рет қаралды 112 М.
WATERPROOF RATED IP-69🌧️#oppo #oppof27pro#oppoindia
0:10
Fivestar Mobile
Рет қаралды 19 МЛН
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 22 МЛН
Как удвоить напряжение? #электроника #умножитель
1:00
Hi Dev! – Электроника
Рет қаралды 374 М.