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.

@jakob7116

2 жыл бұрын

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

@cannabclaus8036

2 жыл бұрын

Sass is quite great tbh..

@minnami778

2 жыл бұрын

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.

@Morquioo

2 жыл бұрын

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.

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.

@tomcoop9750

2 жыл бұрын

Yes! And it can be used for page anchors 👍

@dusanlukic6784

2 жыл бұрын

Can someone explain me why he used div instead of section for "hero" part of his website? :)

@GuzForster

2 жыл бұрын

@@dusanlukic6784 he didn’t, the div is for the whole content of sections, including the hero.

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!

@dusanlukic6784

2 жыл бұрын

Can you explain me why he used div instead of section for "hero" part of his website? :)

@dusanlukic6784

2 жыл бұрын

sorry, my mistake by why he wrapped his hero section in div?

@mario3452

2 жыл бұрын

what is the consequences?

@opposite342

2 жыл бұрын

@@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.

@opposite342

2 жыл бұрын

@@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.

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.

@RMSAnalyst

2 жыл бұрын

Thanks for the information. I am a newbie! Much appreciate it!

I like how you’ve been emphasizing “front-end” now so it doesn’t sound like “hello my friend and friends”

"Twoday" is my birthday, and I learned something new. So thanks for an "awesome" birthday present!

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!

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? 😁

@BjarneOldrup

2 жыл бұрын

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.

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.

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

Very nice! Thanks Kevin. Please more of this in-depth look for: article, aside, figure and so on :-)

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

9 ай бұрын

I believe the main advantage is "eye scanning" the html code.

I still remember that moment when I learned the secrets behind "front-end friends". Now it is much clearer!

@davbrito

2 жыл бұрын

I always get it wrong, and the caption says friends and friends so it's weird.

@PeleTeleBui

2 жыл бұрын

what secret??

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.

Good job paying attention to these semantic aspects that might seem so irrelevant to many, but are in fact very important to some.

You started doing youtube videos? WTH! good to see ya!

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.

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 :)

Thanks for this Kevin, really interesting. Would be great to see things from the perspective of some assistive technology during these accessibility tutorials.

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?

i like the way he went "just copy this" copied it, and then completely ignored what he just did and typed it out manually...

You taught me the practical skills of accessibility and the value and excitement about it! Thanks so much, Kevin.

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.

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!

@gesucristo9763

2 жыл бұрын

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_mckean

2 жыл бұрын

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.

@kentcassidy7116

2 жыл бұрын

@@gesucristo9763 estaba quiriendo

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! :)

Nice! I have so many sections to update now across my blog... super useful to know this! Cheers Kevin!!

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!

@maestrothundero7105

2 жыл бұрын

@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.

@maestrothundero7105

2 жыл бұрын

​@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.

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.

The best content about HTML/CSS on KZread. Really.

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.

Yes, I always wonder about that. What's the difference 🤔. Love your videos.

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.)

@BenDMyers

2 жыл бұрын

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.

@hovhadovah

2 жыл бұрын

@@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 😅

@nahdev2889

2 жыл бұрын

#

@meepsmeep7457

2 жыл бұрын

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.

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-33

2 жыл бұрын

Still the same. You are still gonna look at the value of class or id to know what it is or for what.

I needed this so badly thanks, always prefered divs

I never regret watching your videos. please keep it up. they are really useful.

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

@truvc

2 жыл бұрын

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

@JoppeKroon

2 жыл бұрын

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.

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

Very helpful… could you make some more videos or series…this really need to be understood by developers…

hi great video. thank you for your effort. could you please tell me the name of the font you used for tags

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.

So awesome Kevin! Thanks. This was really informative and helpful!

Your accessibility content have been perfect! So, appreciative!!

How do you get VS Code to edit the closing tag at the same time as the opening tag?

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

9 ай бұрын

I don’t think anyone watching this channel is thinking that.

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.

Really love your helpful content (: sich a nice dude! Thx 🙏

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."

Is it better to put tags inside a section, or put sections inside an article?

@theasianviking86

2 жыл бұрын

I say put the article inside a section cause that section can contain bunt of articles.

Does Trudeau know you're making KZread videos without a mask on? 🤣 Great video as usual Kevin!

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.

@dave6012

2 жыл бұрын

I suppose I could inspect the Amazon cart page, or Air BnB… 🤔

@dave6012

2 жыл бұрын

@Deborah Hearne thanks Deborah! Where did you learn this? Is there a source I can reference for further learning?

Mind blowing. I really didn't know about that. Keep it up!

5:50 how do you change your section opening and closing tag at the same time. Is it alt + mouse left or something else?

@tiktaktictac

2 жыл бұрын

Assume you're using VSCode, that shortcut is F2.

@aldyreal

2 жыл бұрын

I think he used Auto Rename Tag extension for that

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

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.

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?

Hi Kevin, have you done a video on aria and how to use it?

I literally was trying to understand this yesterday.

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 :)

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.

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.

Oh man I always thought you were saying "friend and friends" at the beginning lollllll

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

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.

@meepsmeep7457

2 жыл бұрын

Nah, nobody cares.

@stevenleonmusic

2 жыл бұрын

@@meepsmeep7457 People who care enough to leave the comment "nobody cares" is the ultimate form of cognitive dissonance.

@meepsmeep7457

2 жыл бұрын

@@stevenleonmusic Nah, you just dont like being told your opinion is pointless :-3

@stevenleonmusic

2 жыл бұрын

@@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?

@AngelHdzMultimedia

2 жыл бұрын

@@stevenleonmusic and people who spit "cognitive dissonance" around just to sound smart. Ultimate attention seeking. 😂

Your videos are amazing. Thank you Kevin!

Outstanding! I implemented this right away.

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

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

I remember in some other video you mentioned setting font-size: 62.5% to have rem to be equal 10px by default and scale with browser settings. So I have a question, why not set it to 6.25% to have rem be 1px, wouldn't it be even more convenient?

@nemea6698

2 жыл бұрын

You could test but generally 1 px is not even noticible u would just see a dot. So 10 px is at least visible as a letter and then we can imagine what it could be scaled up.

@magburner

2 жыл бұрын

When you set the font-size to 62.5%, rem and px have a 1:1 conversion ratio. So, 1px = 0.1rem, 10px = 1 rem, 16px = 1.6rem. So on, and so on.

@dbweb.creative

2 жыл бұрын

@@magburner my point is why not have rem to represent 1px in relative terms, This way basically any styling done in pixels can be converted to dynamic sizing just by replacing px with rem. Also perhaps using integers would be better than using various decimals just because we are having rem at 10px rather than 1px.

@magburner

2 жыл бұрын

@@dbweb.creative You can set rem relative to pixels, at whatever ratio you desire. The 62.5% ratio, is just a convention from way back in the day.

always thought section is extra flair of div! and now you telling me i have to label all of them now? :D

@n_mckean

2 жыл бұрын

Only if you want them to be regions :)

Its not only about accessibility but for SEO as well. And even though accessibility is very important it was mostly done for SEO.

Niiicee over the basic ✌🏻

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_mckean

2 жыл бұрын

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).

@_ric

2 жыл бұрын

@@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_mckean

2 жыл бұрын

@@_ric Agreed. To its full potential, you'd use to control heading semantics in the document outline... but hey, browsers will be browsers.

@n_mckean

2 жыл бұрын

@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.

Extremely informative video. Thank you. Love the way you put your videos together. Super work.

Good tool to see the aria interpretation of sections, roles and titles?

OMG, Thank u sooo much for the knowledge

I think, lots of divs is kinda hard to operate, if yiu see word section you knowbit's soemthing big.

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 `

i was really lokking at these things when this video poped up sucha acoincedencd

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?

this tip was literally out of this world ...

Huh. I had no idea about that. w3's documentation seem to be better than mdn's for semantic html.

First page I opened on w3c doesn't have a aria label in the section xD It's the one for the article tag

Please do an example page with semantic markup.

Kevin why not article instead of section for your page?

So do sections have articles, or articles have sections?

Same is

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.

Thanks for sharing Kevin :)

What is the difference between title and aria-label?

This is very useful. Thanks.

Isn't it part of the dom structure. Arn't semantics used for better understanding the websites structure.

You get a super like for this video :)

Really interesting - thanks Kevin

Thank u Kevin, really useful.

Sounds great if you're doing mobile first sites. Nobody needs 2 versions of a site. CSS is sufficient to give a mobile look.

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.

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 🥴

I thought it's done to make use for bots and AI as like microdata formats are

ok for the first time I think I got it: "Hello my FRONTEND friends" ??! 🙀

Kevin, you forgot to preview it with assistive technology