Why & When to Use Semantic HTML Elements over Divs

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 71

  • @mikeandrewfernandez9797
    @mikeandrewfernandez9797 Год назад +52

    I was confused by the difference between article and sections until I found this video. Awesome content! 👍

  • @itsjiraheta
    @itsjiraheta Год назад +20

    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 Год назад +13

    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.

  • @1015AK
    @1015AK Год назад +19

    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

  • @evanmico
    @evanmico Год назад +7

    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: ruclips.net/video/kX3TfdUqpuU/видео.htmlsi=nqgp6qUcEy9_5bkq&t=450

  • @MichalRutz
    @MichalRutz 2 года назад +15

    A very clear and professional introduction. thanks!

  • @SL4UGHT3R
    @SL4UGHT3R 7 месяцев назад +1

    One of the greatest video that explain semantic tags in depth and briefly at the same time.

  • @kauheaa
    @kauheaa Год назад +1

    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!

  • @CodeWithOgochukwu
    @CodeWithOgochukwu 4 месяца назад +2

    Beautiful
    This is value packed ❤❤
    To all new programmers a reminder that you are doing your best. Don't give up now. A little more push could bring the break you so desperately need.
    I am rooting for you ❤❤

  • @whoozie
    @whoozie 10 месяцев назад +2

    thanks for the overall explanation with the examples, this was what I wanted!!!

  • @ISoHEoBASSIST
    @ISoHEoBASSIST 9 месяцев назад +22

    "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 8 месяцев назад +4

      You are actually right, my brother is a developer and in his company everyone uses only div thats all

    • @ISoHEoBASSIST
      @ISoHEoBASSIST 8 месяцев назад

      @@onlytrends2916 thanks for the piece of knowledge!

    • @LarryGaga-x4f
      @LarryGaga-x4f 6 месяцев назад +3

      Segmentic base on my understanding was not always available untill html5 I guess

  • @lavendercode
    @lavendercode Год назад +5

    Thank you! This explanation and examples helped me understand the tags. Well done!

  • @alialrahem9817
    @alialrahem9817 8 месяцев назад +1

    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 Год назад +2

    I was confused about sections and articles till you explained it, thanks

  • @DarkD33p
    @DarkD33p Год назад

    Finally a clear explanation on the subject. Thank you very much.

  • @savvyonchain
    @savvyonchain Год назад +2

    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.

  • @RaghadJohani
    @RaghadJohani Год назад +1

    I love this kind of videos, insightful, and fun to watch. Thanks.

  • @igu642
    @igu642 Год назад +2

    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

  • @gfred3234
    @gfred3234 9 месяцев назад +1

    I like to use div in my sections as nested... because I separate contents inside the section and better to toggle for styling

  • @alpesta
    @alpesta 2 месяца назад

    Thousands of thanks! It was so clear and informative :)

  • @heavenlyhighlights-em4cl
    @heavenlyhighlights-em4cl Год назад +1

    Great Explanation . Earned a Subscriber..

  • @humphreeyy
    @humphreeyy Год назад +1

    Thank you, I understand it a bit better. Nice Content

  • @djt6fan
    @djt6fan Год назад +8

    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  Год назад +1

      React course will be published next month, definitely make sure to be subscribed to the email newsletter 😉

  • @Bablu078-0
    @Bablu078-0 Год назад

    I am from India love you from heart ❤️
    Really your example and explanation are very actually very good
    From hear ❤️

  • @vanezamanlangit7989
    @vanezamanlangit7989 Год назад +2

    Thank you! You're very helpful.

  • @sehitgoker5073
    @sehitgoker5073 Год назад +1

    good stuff mate, was clear and helpfull.

  • @Wood-Whispers-shorts
    @Wood-Whispers-shorts 6 месяцев назад +1

    `15 minutes ago I was not be able to use them in the right place now I can use them in the right place I really want to say thanks from the bottom of my heart 😊

  • @Globalview308
    @Globalview308 8 месяцев назад

    Now I understand what it's meant and how to apply... Thanks

  • @kaygeea
    @kaygeea 3 месяца назад

    The Angular docs also have their aside tag as part of main

  • @tambeegbeayuk1836
    @tambeegbeayuk1836 10 месяцев назад +1

    This Is the best video ever🎉🎉

  • @TsTheSeason
    @TsTheSeason Год назад +1

    Hey thanks so much for the great content!

  • @BK-iu6ow
    @BK-iu6ow Год назад +1

    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 Год назад

      Use min(), max(), create a style for mobile first then add media queries with min-width to style content when the screen gets bigger.

  • @lauraudechukwu2899
    @lauraudechukwu2899 Год назад +1

    this is really helpful and easy to understand. I have a question though, what are screen readears/accessibility mean?

    • @CristopherAreche
      @CristopherAreche Год назад +4

      Screen readers are a feature that some phones and computers use to read and help blind people.

  • @mks-h
    @mks-h Год назад +2

    Good video, thanks

  • @chemaalonso7931
    @chemaalonso7931 10 месяцев назад

    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

  • @kakyoin4535
    @kakyoin4535 Год назад +3

    thank you!

  • @arafathossain3778
    @arafathossain3778 Год назад +2

    Very helpful

  • @amandamcberth3160
    @amandamcberth3160 8 месяцев назад +1

    That was a good explanation of html

  • @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)

  • @WimpLo123
    @WimpLo123 6 месяцев назад

    Div stands for division, not divider. 😊 1:05

  • @RoboticsDevelopment
    @RoboticsDevelopment Год назад +2

    Subscribed!

  • @Fad-kun
    @Fad-kun 4 месяца назад +1

    Thanks

  • @tataruovidiu9305
    @tataruovidiu9305 8 месяцев назад +1

    thanks!

  • @Alyosha922
    @Alyosha922 8 месяцев назад +1

    thanks bro

  • @epicturnip
    @epicturnip Год назад

    What theme is this?

  • @AlThePal78
    @AlThePal78 Год назад

    why did stripe put the stuff in a div that is confusing though

  • @obaro-q1m
    @obaro-q1m 11 месяцев назад +1

    good stuff

  • @shinjiikari4629
    @shinjiikari4629 7 месяцев назад +1

    I feel dumb for not knowing or ever figured out by myself that div was short for divider

  • @mobilejo1
    @mobilejo1 Год назад

    you de esser is working hard asf

  • @ahmedghallab5342
    @ahmedghallab5342 5 месяцев назад

    شكرا Thanks

  • @hamnahjabeen6558
    @hamnahjabeen6558 2 месяца назад

    Thank you so much. May Allah bless you with some Hidaayah.

  • @edgarspujats8282
    @edgarspujats8282 Год назад

    I really likes the video but shouldn't section include atleast one heading?

  • @sadam_khan
    @sadam_khan 5 месяцев назад

    04:00 it is raining here as well.
    22:28 August 10, 2024

  • @deepaktayde22
    @deepaktayde22 3 месяца назад

    GOOD VIDEO

  • @академиях
    @академиях Год назад +1

    большое спасибо мне очень понравился данный урок а вам, не так ли?

  • @deepaktayde22
    @deepaktayde22 3 месяца назад

    awesome

  • @DOODOOMAN118
    @DOODOOMAN118 11 месяцев назад +4

    To be honest, this shit right here is why I wanted to quit lol. I got so frustrated

    • @noZ3v
      @noZ3v 21 день назад

      Did you find it difficult? I think it is logical. It makes sense to me.

  • @toastedclosure2770
    @toastedclosure2770 Год назад

    u forgot to mention details, dialog, summary and data

  • @deepaktayde22
    @deepaktayde22 3 месяца назад

    good

  • @lucialuciferion6720
    @lucialuciferion6720 11 месяцев назад +1

    I hear a Dutch accent :)

  • @You_n_mee
    @You_n_mee 11 месяцев назад

    what is that sound in the background? so annoying