Adding an id on headings (or any element, really) also allows scroll to those elements on pages from fragments in URLs. This is very useful when you send a link to a specific part of a page, rather than having to communicate it manually.
@tomcoop97502 жыл бұрын
Yes! And it can be used for page anchors 👍
@dusanlukic67842 жыл бұрын
Can someone explain me why he used div instead of section for "hero" part of his website? :)
@GuzForster2 жыл бұрын
@@dusanlukic6784 he didn’t, the div is for the whole content of sections, including the hero.
@adaml.53552 жыл бұрын
I like how this guy talks about raw HTML and CSS unlike some teachers on this site that push a JavaScript framework and SASS.
@chimchim2_2 жыл бұрын
I concur. I typically try to avoid being a purist, but I'm seriously tired of the over engineering/force-fit of CSS by the JS dev community. They have utility but it definitely feels like it's becoming the easy reach vs understanding the fundamentals of CSS and its intent. Nothing annoys me more than opening the source and seeing these crazy auto generated class names. Induces PTSD of the ASP. NET days of styling elements.
@jakob71162 жыл бұрын
@@chimchim2_ what’s so bad about auto-generated names? I’m using next.js and they allow me to contain my css in .modules for each file instead of sharing it all
@cannabclaus80362 жыл бұрын
Sass is quite great tbh..
@minnami7782 жыл бұрын
JavaScript made a modern web application n sass is like a css with functionality , feature and break down css into components. Without knowledge of css , sass couldn’t be implemented. I don’t see any negative point in these technology.
@Morquioo2 жыл бұрын
There's no reason to use vanilla CSS when you could be using SASS, it just doesn't make sense. It literally doesn't have a downside.
@yousifal-raheem50612 жыл бұрын
Super helpful. Keep making videos on semantic HTML, I think it really improves the quality of the web if all developers started adopting them instead of just using DIVs. Apart from assistive technology, it's quite important for web crawlers. For example, Google crawlers will first attempt to "understand" your content from the semantic structure of your HTML. If that's not detected, and extra piece of code is then triggered to try to guess the different parts that makes up your site. That's not optimal since Google won't be able to list sections on your page, or extract answers directly from an FAQ section for example.
@RMSAnalyst2 жыл бұрын
Thanks for the information. I am a newbie! Much appreciate it!
@JoppeKroon2 жыл бұрын
Yes Kevin, preach! Let's keep the accessibility content going! So many devs miss these kinds of subtleties because they don't 'see' the consequences!
@dusanlukic67842 жыл бұрын
Can you explain me why he used div instead of section for "hero" part of his website? :)
@dusanlukic67842 жыл бұрын
sorry, my mistake by why he wrapped his hero section in div?
@mario34522 жыл бұрын
what is the consequences?
@opposite3422 жыл бұрын
@@mario3452 I'm p sure it's mainly just "assistive technology". aka the one helping people with visual disability. It is helpful to care for them as well and be inclusive of everyone.
@opposite3422 жыл бұрын
@@dusanlukic6784 div doesn't do anything anyway. Apart from readability, it's mainly used for adding class name to be used in the css file. Kevin probably used the div there to style something visually. As long as the section bit has an aria-label/aria-labelby (no matter if it is nested under a div) it should be picked up by the voice assistant.
@michaelmorris45152 жыл бұрын
Recently I've been conducting a lot of new hire interviews. My boss coordinates the meetings and I'm one of the interviewers. One of his questions is to ask people to assess their knowledge of HTML on a scale of 1 to 10. Most people don't dare give themselves a 10, likely because of stuff like this. Fascinating to be sure.
@yugiohsc2 жыл бұрын
I like how you’ve been emphasizing “front-end” now so it doesn’t sound like “hello my friend and friends”
@pfever2 жыл бұрын
I always appreciate your videos! I suppose you could have catched this issue earlier by testing your website utilizing a screen reader. I heard that it is the best method to test the accessibility of your website, but most programmers do not know how to use a screen reader. What about making a tutorial about it? 😁
@BjarneOldrup2 жыл бұрын
I definitely recommend testing with a screen reader, as synthetic tests don't catch anything close to all the issues. Getting comfortable with the free NVDA og the 40 minutes per reboot JAWS takes an hour or so, just to learn the basics. It's super valuable and benefits everyone.
@SuperGylden2 жыл бұрын
There's an add-on for FF and Chrome, Landmark Navigation..., you can use to navigate a site and for testing purposes. Why it hasn't been implemented in the browsers is beyond med
@jpisello2 жыл бұрын
"Twoday" is my birthday, and I learned something new. So thanks for an "awesome" birthday present!
@jaydenmoon11652 жыл бұрын
Dang Kevin I hope you know how important and awesome videos covering topics like this are - I feel more "complete" as a dev when I have a better understanding and more in depth knowledge of web development as a whole - thank you!
@Sjon_E2 жыл бұрын
I think a really good video that I feel like no one else has done (or maybe you have even, I just don't know) is actually show what these accessible features are doing side by side as you edit them. A lot of us are told "well do this because accessibility, do this because of screen readers" but what exactly is there experience with and without these technologies? I think that would be a great video.
@hetoverseo3887 Жыл бұрын
I believe the main advantage is "eye scanning" the html code.
@pauker20172 жыл бұрын
Very nice! Thanks Kevin. Please more of this in-depth look for: article, aside, figure and so on :-)
@schmufus2 жыл бұрын
Could you make a video about the best workflow to update your own page? The process of making changes, save them in git, upload them on your webserver, ... This is something I would be very interested in. Thank you for your educative content :)
@2DJF2 жыл бұрын
Good job paying attention to these semantic aspects that might seem so irrelevant to many, but are in fact very important to some.
@xOvernight2 жыл бұрын
We should take a second to appreciate that Kevin says "frontend friends" slower now because he learned that we misunderstood what he was saying before.
@scizophreniac2 жыл бұрын
i like the way he went "just copy this" copied it, and then completely ignored what he just did and typed it out manually...
@renascienza.bazarclub2 жыл бұрын
The real problem with HTML and HTML5: HTML comes from SGML to be a markup language to *formating*, a kind of LaTEX for. web documents. After a lot of additions, the upgrade to XHTML, XSL transformations (allowing multiple possible formats for the same document by the application of XSL sheets) and the CSS rise, finally someone figure out that HTML should be a language that express *meaning*, not formatting. Knowing the meaning of each part, is possible to some set of post processing instructions determine how to format the document. Should work, should be good. In practice, nobody wanted to make this happen. For the sake of correctness, nav, aside, sections and so on shouldn't be rendered as nothing in special, are just meaning marks. The real formating should be delegated to somewhere else. Instead, all these marks have a "default" rendering, and we can't change it.
@naimas8120 Жыл бұрын
That actually makes sense.
@anttipaas16822 жыл бұрын
I think is more easily to be structured in HTML. Div could be used for container classes to make them differ from the code. For example the following: I'm seeing the code more simple this way instead of everything having "div" in it. Section after all means kind of like a faction of some sort and content related to that faction will be placed there.
@agent-332 жыл бұрын
Still the same. You are still gonna look at the value of class or id to know what it is or for what.
@alvaroprietovideos2 жыл бұрын
I still remember that moment when I learned the secrets behind "front-end friends". Now it is much clearer!
@davbrito2 жыл бұрын
I always get it wrong, and the caption says friends and friends so it's weird.
@PeleTeleBui2 жыл бұрын
what secret??
@cousinrolf8712 жыл бұрын
While you're not wrong about this, I think what you're doing in your case is redundant, since you already have an accessible name of your heading within your section content
@jordanlarocque37562 жыл бұрын
You started doing youtube videos? WTH! good to see ya!
@mirvids50362 жыл бұрын
Was thinking aria was an American misspelling of area until I looked it up. "Overview. ARIA is a W3C specification that stands for “Accessible Rich Internet Applications”. It consists of markup that can be added to HTML in order to clearly communicate the roles, states, and properties of user interface elements."
@LauraMarieAlix2 жыл бұрын
Thanks for this Kevin, really interesting. Would be great to see things from the perspective of some assistive technology during these accessibility tutorials.
@shgysk8zer0 Жыл бұрын
Looks like I got this wrong too. I could've sworn I saw that it automatically used a heading element if available. And, I think it probably should.
@stevenleonmusic2 жыл бұрын
Semantics isn't always about the visitor/viewer. Developers need semantic information to make their jobs easier too. As someone in the middle of teaching a web development class, descriptive tags make learning a lot easier. How does one explain the purpose of a "div" tag when no one even knows what a "div" is? It's a lot easier to explain the role of a element since it's the same terminology we use in document design. So even if you're not using the element's full accessibility potential, it's still better than for people looking at the actual source code. One thing that frustrates me with HTML5 is that they did not improve the crummy anchor tag paradigm. We should have a tag that specifically functions as a hyperlink only. Personally I wouldn't mind having separate tags for outbound/internal hyperlinks as well.
@meepsmeep74572 жыл бұрын
Nah, nobody cares.
@stevenleonmusic2 жыл бұрын
@@meepsmeep7457 People who care enough to leave the comment "nobody cares" is the ultimate form of cognitive dissonance.
@meepsmeep74572 жыл бұрын
@@stevenleonmusic Nah, you just dont like being told your opinion is pointless :-3
@stevenleonmusic2 жыл бұрын
@@meepsmeep7457 And your opinion matters any more than mine because...? Are you some coding Guru I've never heard of with years of experience that people should care about?
@AngelHdzMultimedia2 жыл бұрын
@@stevenleonmusic and people who spit "cognitive dissonance" around just to sound smart. Ultimate attention seeking. 😂
@hovhadovah2 жыл бұрын
Wow, didn't know that sections don't get a role unless they're labelled! Thanks for sharing! My only concern is redundant narration. Wouldn't a screen reader narrate the heading twice? (Once when it encounters the region and once again at the heading itself.)
@BenDMyers2 жыл бұрын
Fancy running into you here, Aleksandr! The answer to this is… not a binary yes or no. Screenreaders have multiple ways to navigate a page. If you’re navigating linearly using the virtual cursor, yes, you’ll get some redundant narration. But screenreaders have modes (such as VoiceOver’s Rotor or JAWS’s seemingly infinite keybindings) that allow folks to skim through the page region by region, or heading by heading - and in these skimming modes, you’re not guaranteed duplicate announcements, so having the redundancy is actually a good thing there. TL;DR, yes, it leads to duplication in some screenreader navigation modes, but not all, and that duplication is typically expected.
@hovhadovah2 жыл бұрын
@@BenDMyers Hey Ben! Thanks for clarifying-good to know that the duplicate narration is expected in these scenarios! I'm always so worried about misusing aria-labelledby/describedby/aria-label for that reason 😅
@nahdev28892 жыл бұрын
#
@meepsmeep74572 жыл бұрын
Even worse, remember all that talk about the document outline and how section + title was supposed to create a headline/reference for screenreaders? .. turns out that while it was implemented in the accepted HTML standard, browsers and screenreaders just never bothered implementing it, or did it badly... so now it's no longer a thing.
@joranschneyer2 жыл бұрын
Thanks for clearing that up. By the way, nice t-shirt. DFTBA! I am relatively new to your channel but almost immediatly got positives vibes like with the nerdfighteria community. Especially when you do this thoughtful accessibility content. So nice to see unrelated corners of the internet suddenly related. Are you really into the nerdfighteria community or just liked the shirt?
@dailymeow32832 жыл бұрын
I think aria-labeledby attribute might help in SEO, might make the crawler bot more understand the content, and it might appear as a search result if it matches the search query
@bulletproofcode57332 жыл бұрын
You taught me the practical skills of accessibility and the value and excitement about it! Thanks so much, Kevin.
@BitwiseMobile2 жыл бұрын
By the way, the dashes are called spinal case, or alternatively kebab case. It's similar to snake case, but instead of underscores it uses dashes. Also, thank you for a great video. I'm a long time web developer, but there is always something new to learn. Thank you for sharing. I have been using these semantic elements naively. I will learn more about the proper way to use them for future implementation.
@cm346210 ай бұрын
Really enjoying digging into your channel. I'd been putting off learning CSS. You really drill down to the most core concepts, thank you and nice job.
@Holy_Frijole2 жыл бұрын
Bruce Lawson has a Smashing Magazine post from 1/7/2020 stating section tags mess up header hierarchy and cautions developers to use it properly. Could make accessibility worse so be careful. I would love a deeper dive video from you Kevin b/c you just make sense to me and I think it would sink in more from your pov.
@archiem63232 жыл бұрын
Yes, I always wonder about that. What's the difference 🤔. Love your videos.
@foxjonesofficial2 жыл бұрын
Same is
@_ric2 жыл бұрын
I've been coding sites for decades, and while I love semantic HTML for it's readability, accessibility and ease of maintenance, for me the distinction between article and section, and the W3C guidelines on how to use them, just feels "a little off". The rest of the semantic stuff; header, footer, main, aside, etc... all feel far more "defined", for the lack of a better word.
@n_mckean2 жыл бұрын
Its best to think of not as a written article but as an article of clothing - meaning it can stand alone and by mixed in other contexts. If the content inside fits this definition, then always go , if not, then consider fallback to or depending on semantics (though section was never realised to its full potential).
@_ric2 жыл бұрын
@@n_mckean Thanks for the reply. You've hit the nail on the head with the very last bit in brackets. It's not that I don't understand or have difficulty in implementing either, it's that in comparison they are not as clearly defined in the way the other semantic tags are (or at least the newer HTML5 semantic ones).
@n_mckean2 жыл бұрын
@@_ric Agreed. To its full potential, you'd use to control heading semantics in the document outline... but hey, browsers will be browsers.
@n_mckean2 жыл бұрын
@Deborah Hearne Be very careful with your statements, I'm not wrong. If you read it correctly you'll see my point was to think broader than a "written article" - many developers take article too literally. I never said a written article didn't also fit the description of a standalone piece of content.
@Shrab2 жыл бұрын
I never knew this, thank you for sharing the knowledge and helping make the web a place for everyone not just the fully abled bodied users.
@haycoal87732 жыл бұрын
Oh my goodness. This is such a big help. I prefer to use divs but because I was wanting to use Semantic, I decided to use section... I may go back and adjust some things ^_^ thank you for the awesome videos! They're a big help on my web dev journey!
@gesucristo97632 жыл бұрын
Off topic time, is it correct to use want + ing? I’m studying English and I remember that you can’t use in this way
@n_mckean2 жыл бұрын
is as dumb as pretty much, just the semantic version. When reviewing, see if it is more appropriate to use (content that can standalone in other contexts) or (peripheral content) etc first.
@kentcassidy71162 жыл бұрын
@@gesucristo9763 estaba quiriendo
@Defcon1702 Жыл бұрын
Great video! I would really appreciate a video that explains the semantic elements completely and just like here, the accessibility contexts. Feel free to make a course out of it, I'll buy it right away! :)
@AlThePal789 ай бұрын
so you give yourstuff a div of container, then a section, then a div is ther a purporse for this flow? I get very confused for that :) love you stuff always
@tyu34562 жыл бұрын
Oh man I always thought you were saying "friend and friends" at the beginning lollllll
@john-r-edge2 жыл бұрын
Good stuff. To assist the easily confused it may help to explain what "Aria" is, (Accessible Rich Internet Applications) - and help avoid listeners thinking you are using the word "area".
@NicholasShanks Жыл бұрын
I don’t think anyone watching this channel is thinking that.
@jenova29162 жыл бұрын
Its not only about accessibility but for SEO as well. And even though accessibility is very important it was mostly done for SEO.
@jeromesnail2 жыл бұрын
The best content about HTML/CSS on KZfaq. Really.
@AlThePal789 ай бұрын
you literally copied then typed it out lmao :) you're one of my favorites to learn from I need a deep dive to honestly go to real world scenerios with all this. I would love for you to make a class and I would buy it to make a real world website, like your hero page, and then reshow all this we learned from you. I am understanding section a lot better thanks to this, it was confusing and I did not know you needed a label awesome :)
@Cypressious2 жыл бұрын
Kevin, I appreciate the video. IMHO it would have been even better if you showed the difference using a screen reader or some other assistive technology debugger.
@VinceAggrippino Жыл бұрын
Re-watching this as I didn't quite register what it meant until I started writing unit tests... `getByRole('region')` didn't work on my `
@sonerzorlu7079 Жыл бұрын
hi great video. thank you for your effort. could you please tell me the name of the font you used for tags
@lefactuoscope56922 жыл бұрын
Is it better to put tags inside a section, or put sections inside an article?
@theasianviking862 жыл бұрын
I say put the article inside a section cause that section can contain bunt of articles.
@smohammadhn2 жыл бұрын
this tip was literally out of this world ...
@maestrothundero71052 жыл бұрын
So if I have multiple sections on a page,that have the class of "hero-title", can I add the id of "hero title" to each one? Will the the aria-lablledy pick the the id in that specific section or will it will it cause an error because an id is supposed to be unique? Or will I have to label each hero title id individually, for example: "hero-title-one", "hero-title-two", "hero-title-three" etc? Love the content btw Kevin!
@maestrothundero71052 жыл бұрын
@Deborah Hearne Thanks! I was afraid as much. I am using the generic name of hero title as I have an extremely large single page layout and each of the 15 sections has its own title. In hindsight I should have used articles.
@maestrothundero71052 жыл бұрын
@Deborah Hearne There is only one hero per section, each is used as a title specifying what each section is about. It is similar in layout to a docs section of a framework or a js library, heavy on text and images. It has a "table of contents" style side navigation with anchors to each section, hence the need for many sections on a single page.
@yofi26142 жыл бұрын
06:28 So let me get it straight, i dont need to add label to my section if i have already have heading inside it... unless i think the heading doesnt really describe the content in exact way, and then i should add the section aria label?
@milansingh32222 жыл бұрын
Very helpful… could you make some more videos or series…this really need to be understood by developers…
@JamesWelbes2 жыл бұрын
Does Trudeau know you're making KZfaq videos without a mask on? 🤣 Great video as usual Kevin!
@somnvm372 жыл бұрын
I think, lots of divs is kinda hard to operate, if yiu see word section you knowbit's soemthing big.
@TheVideogamemaster92 жыл бұрын
Huh. I just did a take-home test for an interview, and just put a section in my main because I didn't want to use another div, but I had no idea about any of this stuff lol
@grinsk3ks2 жыл бұрын
First page I opened on w3c doesn't have a aria label in the section xD It's the one for the article tag
@NicholasShanks Жыл бұрын
How do you get VS Code to edit the closing tag at the same time as the opening tag?
@inesborges48572 жыл бұрын
I don't code with screen readers in mind but it's always good to know this stuff. :)
@bizoitz862 жыл бұрын
What is the difference between title and aria-label?
@dave60122 жыл бұрын
Looking for a good reference for minute semantic html. I can find many sources for the big stuff like Kevin describes, but I was designing a cart-item card for an e-commerce site, and struggling to find which element is appropriate for things like product name, type, price, quantity, etc. Anybody know a good reference for that kind of stuff? Somehow I doubt or is appropriate for this situation.
@dave60122 жыл бұрын
I suppose I could inspect the Amazon cart page, or Air BnB… 🤔
@dave60122 жыл бұрын
@Deborah Hearne thanks Deborah! Where did you learn this? Is there a source I can reference for further learning?
@solr4cc Жыл бұрын
Kevin why not article instead of section for your page?
@n_mckean2 жыл бұрын
Section is generally redundant since the document outline, for which it would have been of real value didn't exist. But there are some good use cases, such as using a section to make a region for an :article overview:. Sometimes the "real" article content doesn't start with a heading, and so the user isn't alerted to where the overview ends and the real article starts. Putting the overview in a section aids that navigation.
@nitras.design2 жыл бұрын
Please do an example page with semantic markup.
@Anna-dh2kg2 жыл бұрын
I literally was trying to understand this yesterday.
@SleazyNice2 жыл бұрын
Semantic HTML is a waste of time, just like classes and types. I uses divs for my html and var for my JavaScript. Nothing else is needed.
@abielkiflu1845 Жыл бұрын
I never regret watching your videos. please keep it up. they are really useful.
@distantcam2 жыл бұрын
Are your headers getting the right role? The w3 link says that headers don't get the banner role when they are decendants of sections.
@Zantrol1 Жыл бұрын
i was considering the exact same thing
@proteus12 жыл бұрын
Isn't it part of the dom structure. Arn't semantics used for better understanding the websites structure.
@joefads50402 жыл бұрын
Nice! I have so many sections to update now across my blog... super useful to know this! Cheers Kevin!!
@Errox3582 жыл бұрын
Speaking of semantic, I just dived into a new job where I work with Angular. First time. And I don't like it for many reasons but I hate the bloated html mash it creates. Which you will have, even if done right, because of all that angular specific pseudo html. What do you people think of that?
@PaulMountney2 жыл бұрын
I've seen a lot of your videos, but I've never seen anything about TailWind CSS. What do you think about it? Personally, I don't see the point in putting CSS in every line, cos that's how it used to be back in the old days.
@alvaroprietovideos2 жыл бұрын
I don't like IDs since it is sometimes a pain to use them in programmatically generated code, but they are required for labelling. Do you know if there is any plan to solve this in future specifications? Great content, as always
@truvc2 жыл бұрын
You can wrap an el in a label. Even better would be a group element where any label and control within are auto associated without needing id and for attributes
@JoppeKroon2 жыл бұрын
I'd think if you have programmatically generated code, you should also be able to generate the link with the labeling element. With an input you can indeed wrap it in the label instead of using the for attribute, but that structure _can_ be problematic when it comes to styling. Auto association by grouping them in an element doesn't exist right now?! Unless I'm missing something.
@codedjango2 жыл бұрын
I always felt so....I feel "div" is much better to use instead of "section"
@n_mckean2 жыл бұрын
Div has no semantic meaning. It is meant for grouping of content for styling purposes only.
@composernotes2 жыл бұрын
Hi Kevin, have you done a video on aria and how to use it?
@lonleybeer2 жыл бұрын
I needed this so badly thanks, always prefered divs
@DavisBenjaminA2 жыл бұрын
So do sections have articles, or articles have sections?
@PraveenKumar942 жыл бұрын
all these years I wondered why does he keep saying "hello my friend and friends", and just realised that he has been saying "hello my front-end friends" feeling stupid now 🥴
@intipontt74902 жыл бұрын
Huh. I had no idea about that. w3's documentation seem to be better than mdn's for semantic html.
@younglion04512 жыл бұрын
Your accessibility content have been perfect! So, appreciative!!
@oldclient2 жыл бұрын
I thought it's done to make use for bots and AI as like microdata formats are
@XerosXIII2 жыл бұрын
always thought section is extra flair of div! and now you telling me i have to label all of them now? :D
@n_mckean2 жыл бұрын
Only if you want them to be regions :)
@dreamseekersecondarychanne60532 жыл бұрын
Kevin is always here to read trough my mind and pop with what I need in my recommendations. Kevin Powell is our god, he is omnipotent.
@djtbone001a2 жыл бұрын
Sounds great if you're doing mobile first sites. Nobody needs 2 versions of a site. CSS is sufficient to give a mobile look.
@universecode11012 жыл бұрын
Niiicee over the basic ✌🏻
@KangJangkrik2 жыл бұрын
Kevin, you forgot to preview it with assistive technology
@berndeckenfels2 жыл бұрын
Good tool to see the aria interpretation of sections, roles and titles?
@mohtashimali5812 жыл бұрын
Hi Kevin Your videos are great. Idk if this kind of github repo exist or not. Can you make a github repo in which you can make layout(by layout i mean best approach to write html) and gving little explanation like your are doing in videos.
@valeriousmonk6542 жыл бұрын
Mind blowing. I really didn't know about that. Keep it up!
@agent-332 жыл бұрын
How does that make any sense or meaning? You are still gonna look at what is that tag's id or class to know what it is for. It seems like the creators are just fkn up your minds with semantics and new tags that does the same as the other.
@m.a.karimkhan18982 жыл бұрын
i was really lokking at these things when this video poped up sucha acoincedencd
@jehawkins3332 жыл бұрын
So awesome Kevin! Thanks. This was really informative and helpful!
@abernier2 жыл бұрын
ok for the first time I think I got it: "Hello my FRONTEND friends" ??! 🙀
@sergejstojanovic25182 жыл бұрын
5:50 how do you change your section opening and closing tag at the same time. Is it alt + mouse left or something else?
@tiktaktictac2 жыл бұрын
Assume you're using VSCode, that shortcut is F2.
@aldyreal2 жыл бұрын
I think he used Auto Rename Tag extension for that
@dawniebug7842 жыл бұрын
You just explained it but I still don't get it
@ruffy___10 ай бұрын
Really love your helpful content (: sich a nice dude! Thx 🙏