Great tips! However, in the end when you changed the tag inside the to a that kinda went against the rule of semantic html. I think suggesting to use a tag with a class might have been a more consistent solution
@Don_Des Жыл бұрын
I agree with you on this one. Putting text inside div is not semantic
@CJFX_ Жыл бұрын
But it's not a heading it's just big text?
@Don_Des Жыл бұрын
@@CJFX_ doesn't necessarily mean it has to be in a h tag but putting it in a div is not semantic . How do you think a screen reader would read it ?
@WebDevSimplified Жыл бұрын
That is the point. I don't want a screen reader to interpret it any different since it is just text that is visually larger than other text. It has no special meaning other than being slightly bigger text. If I made it a heading it would imply that the text is a heading for some content which is not what I wanted.
@thevividversatilechannel4807 Жыл бұрын
p element could be used
@bowiemtl Жыл бұрын
Little confused why you didn’t suggest using using a h2 element as it’s also more SEO oriented
@interclosure Жыл бұрын
Screen reader problems
@zondersuiker4401 Жыл бұрын
@@interclosure what's the problem?
@bobwilkinsonguitar614210 ай бұрын
He said that the h2 tag is misleading, as the goal is simply ,"bigger text" not an actual "header". I do think W3 suggests for this sort of styling
@HyperBlueberry9 ай бұрын
Could you not just use a span or p with a class to make it bigger?
@Grindzing9 ай бұрын
I thought is was h1
@cherriesarefire Жыл бұрын
Thank you for showing me a way out if that div-icult situation!
@themindhelp9584 Жыл бұрын
Haha😅😅
@dicksontv5323 Жыл бұрын
kzfaq.info/get/bejne/q5ecpdOnq7TTY4E.html
@goosydev Жыл бұрын
Now that's a dad joke I can appreciate!
@junior.santana9 ай бұрын
Don't worry, as you div deep into html+css you will be more and more confused
@borstenpinsel Жыл бұрын
I once spent an hour pondering what I put in an article or a section and whether an article is divided in sections or vice versa. The semantics aren't all 100% clear which is kind of important for something that is supposed to infer semantic meaning.
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@BlueHat1 Жыл бұрын
That's the exact situation I'm in now. I still don't fully get it😅
@dinosaursnack8 ай бұрын
@@BlueHat1Articles should be subdivided by section elements, not the other way around. Read the HTML specification or the MDN docs and it lays it out. An article is a self contained piece of content, and sections are used to subdivide it. Both of them should use a header tag to define the heading for it. So an article could be followed by a h1 for the title and then if there are smaller subheadings for different sections of the article you wrap those in section elements. A section can also have multiple nested sections within it if necessary.
@xphstos_11 ай бұрын
One small trick to help you with your headings is to visualise the page’s content as document with a table of contents. Use the h1 as the document’s/page’s title and then the rest of titles as h2 etc.
@ZacharyPrice Жыл бұрын
I love the push for semantics but I disagree with the usage of a tag for bigger fonts… if you go this route it should be a tag if semantics aren’t a concern. If they are you should keep the tag and add a class of “display-#” where your classes for display fonts are generally much bigger than an Instead your tags should be designed accordingly (larger to smaller text) and for bigger text you should use “display-#” font sizes classes
@dominoz299711 ай бұрын
Two things: 1. I believe Kevin Powell did a video on how H1 should be used semantically for top of sections as well as top of HTML documents (not sure if it is a should or must priority), 2. I know it’s only a short video to get into nuance, depth, detail, and elaboration, but that should really be a p tag with a class, not a div, to allow for accessibility readers - sort of undermines your point of you say to use semantic HTML and then use div instead of a typographic element, 3. It is actually good advice - use semantic elements over divisions if possible and use them as expected; it’s easier for others to understand as the purpose is more explicit, better for SEO, and better for accessibility readers!
@bernardus3289 Жыл бұрын
When I started with html I mostly used bc in my mind it was like: "Why bother memorizing elements that behave the same as a p?" until I got lectured by my teacher :P
@lawrencedoliveiro9104 Жыл бұрын
Always keep MDN bookmarked. No need to try to keep it all in your head!
@dinosaursnack8 ай бұрын
Lol ya and they def dont all behave the same as p. 😅
@hash5one600 Жыл бұрын
Thanks a lof ro the tip! - This short changed the way I code and showed me how big a mess my projects had, I literally had been wondering how I could make it easier for me and the browsers to read my code. No I know! :) Again, thank you!
@damutsew67 Жыл бұрын
Having multiple H1 is possible, if they have the same semantic level, it causes no problem for semantic nor SEO
@dnngoat Жыл бұрын
was hoping someone said this. 100% correct. multiple h1s can be used if used properly.
@xexclusiv3x Жыл бұрын
This is correct.
@vince530 Жыл бұрын
what do you mean by the same semantic level?
@dnngoat Жыл бұрын
@@vince530 you could have an an h1 in multiple separate sections with only one H1 per section. some title is a quick example of semantic mark up
@vince530 Жыл бұрын
@@dnngoat ohh i understand now thankyou!
@merciful90425 ай бұрын
use menu instead of ul when you're listing links in a nav
@ChrisVisserDev Жыл бұрын
Multiple h1 tags on one page are allowed as long as you place them in a semantic block like article or section.
@sbk1398 Жыл бұрын
The first mistake was deciding to learn HTML
@xamle65238 ай бұрын
Not at all ! If wasn't html, you will not here posting a comment ! Just nothing is difficult ! Just some hards mental's activities to surpass the level !
@ramlaaal Жыл бұрын
another thing most people do is using wrong color theme, so try "Aesthetic" color theme, this will encourage you to work in VS code without getting bored.
@colbycovington3724 Жыл бұрын
the point got me bro
@pr9039 Жыл бұрын
Womp womp
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@stwarrior9983 Жыл бұрын
Thanks Kyle, You save my time again!
@denizsincar29 Жыл бұрын
wow man i use a screenreader. and most of html errors could cause huge accessibility problems for blind screenreader users
@dicksontv5323 Жыл бұрын
kzfaq.info/get/bejne/q5ecpdOnq7TTY4E.html
@Mr-Raptor Жыл бұрын
since when does work in
@HALA_MADRID1928 ай бұрын
send just learned how to code today 😂🎉
@VladimirMiroshnichenko64 Жыл бұрын
also you can remove and from + use h2 for subtitles instead of div.big-font which is absolutelyl non semantic
@RandoTheFandango Жыл бұрын
What difference does the do?
@davidtaylor7681 Жыл бұрын
Also don't use as it causes annoying scrolling to the top and breaks the back button.
@jisrite10 ай бұрын
That last one made a lot of sense. thank you.
@selectorsaurus8 ай бұрын
Also, remember to label your navs and sections using aria-label or aria-labelledby.
@AIKineticNRG9 ай бұрын
The big-font class could throw errors in accessibility scanners that assume you're using a span/p/div for a header. Still only want 1 h1 on a page, but you should be able to use other heading tags to lay out a proper header hierarchy on the page. People who use screen readers to access your content will thank you
@spondoolie6450 Жыл бұрын
I've been using tags to make a container for every page (using React.js), with for each box in the page's grid. Don't know if that's best practice or not.
@dinosaursnack8 ай бұрын
Thats a little wrong but an easy mistake. You should use article for the different sections that are stand alone content sections, and use for the subsections of the articles. Instead of using aria-label you put a h1-h6 as a child of the article and section elements and maybe an aria-labelledby="your-header-id" with the name of the ID of your h1-h6 element.
@12382685 Жыл бұрын
div with class="big-font" < h2. who's with me on this one? it's okay to have headings in articles. that's why we have h1-h6
@carpediemcotidiem Жыл бұрын
Thanks. I'm very impressed with your confidence and knowledge. May I ask, where did you learn to be such a competent web developer?
@9dwd Жыл бұрын
Your vids are the best brother
@omrajeshkbangalore20928 ай бұрын
Thank you
@PirateSimulator10 ай бұрын
I tough what telling what main content was
@Lucky-uk9ff Жыл бұрын
You have added div as heading which will give you an error for ADA compliance. The right way to use it is to change the heading tag or add the role attribute 'heading'.
@CesarD321 Жыл бұрын
Great points
@Tony-cm8lg Жыл бұрын
I love my div though
@slartidan Жыл бұрын
Do not use div in the article to make it bigger either. Use strong or em to make it obvious, that you want to emphasize this.
@tomw6947 Жыл бұрын
Great tips thanks 👍.
@josephlivengood4508 Жыл бұрын
Thank you, I'm building a site now by hand coding.
@areaofeffect1009 ай бұрын
this is only so if you are making a simple website, DIVs are still the best practices as you can scale your work to more dynamic websites specially if JS is involve. but still a great tip thanks.
@raihan.nismara Жыл бұрын
Great tips!
@katxu Жыл бұрын
Actually you can use H1 in article headers as it is even styled by the browser as an article title. Tho it's not sure if it really has some con/pros on SEO but it looks like it's not bad. Exemple: A good article using h1 tag should look like this: article>(header>h1)+p+footer
@qualle987123 Жыл бұрын
Multiple h1-Tags are bad for SEO. You should only ever use one.
@katxu Жыл бұрын
@@qualle987123 it’s being said in the SEO community but it perfectly fine as long as you use it properly
@qualle987123 Жыл бұрын
@@katxu Sure you can, but how will the search engine differentiate on which one to parse and display? It may look correct and work as intended but it is not meant to be used that way. It is also documented clearly on the mdn.
@katxu Жыл бұрын
@@qualle987123 Search engines are focusing on the page title and not the first H1 they find. It might have been the case in the past but in todays standards, H1 is not as important as before (not that they are not anymore) and so multiple H1 tags can be used without compromising SEO
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@TentangKode Жыл бұрын
Great tips as always 👍
@TheGoonkid Жыл бұрын
I know many devs reject the Idea of using semantic html, but in reality you really should use them and learn how to follow best practices, remember, you need to think about the future of your code, we are using many smart devices at home more frequently, so devices like Alexa, Google or Apple's devices will look at your site and won't respond properly because it doesn't understand your div classes. I use screen readers just to make a site audible so i could do something else while i listen to the site, it has many uses. Besides of course helping handicapped people understand your site. We don't code for ourselves, if you make a site you are making it for others to see, so think about them. thanks for reading, here's a 🍪
@lawrencedoliveiro9104 Жыл бұрын
There are different kinds of pages, though. For some company-internal websites that I write, it’s not about semantic HTML, it’s about data display and form entry, where layout is important.
@gothnate Жыл бұрын
Some people make their code as confusing as possible to read and understand, no matter your experience. They see it as, "job security," when they code this way. If they're the only ones that know how to read it, it would cost the company too much to replace you.
@DasBauer Жыл бұрын
Ah, aria content. Love it ♥
@DasBauer Жыл бұрын
But if you're using bigger text to commit a bigger message you have to mark it. For example, do not use or font-weight, use
@robysoriano2956 Жыл бұрын
Google doesn't use semantic HTML
@SergioOlivieri89 Жыл бұрын
In fact, Google is wrong. It does not consider people with disabilities
@marveken Жыл бұрын
Using big-font I’d still have to style with CSS
@dpsheals Жыл бұрын
Just started learning html this past week. Thinking of “coding dojo”… had an interview yesterday. I kinda love coding already. I love solving problems. What’s everyone’s thoughts on coding dojo and what laptop or desktop would you recommend I start with? Please help and thanks in advance 😂😂😂
@AndrzejSuchecki-or1wo5 ай бұрын
In all of the companies i worked we used div tags for everything lmao
@cocolasticot9027 Жыл бұрын
I read somewhere that having multiple h1 isn't necessary a bad thing, especially if it makes sense with what the page looks like.
@danielgillespie7899 Жыл бұрын
The only reason I can think that someone would want multiple h1's is because they have multiple articles or sections each with their own heading (which is required). In such a case there are two possible scenarios. Either the multiple articles or sections are related to each other, in which case an explanation of that relationship is what would go in a single h1 and the articles or sections would have h2's, or the multiple articles or sections are not related to each other so there is nothing to go in a single h1, in which case why are the articles of sections on the same page to begin with? Only ever one h1. If you find yourself wanting to put more than one h1 then you should seriously question your page design. Related things on the same page will have an obvious h1. Unrelated things on the same page with no obvious h1 probably should be on separate pages.
@letsgetto1millwithoutvids Жыл бұрын
This is correct except for the UL bit sometimes you don't want lists and want spans instead
@itskittyme6 ай бұрын
My web pages are full of MAIN elements because ALL the stuff on my webpage is important
@wojciech6049 Жыл бұрын
thats mean when i have react header component and first parent is div then next i must grab all elements in ?
@YancyBeats Жыл бұрын
thankyou sir!
@Fushiro0 Жыл бұрын
I still confused about the difference between section and article. Can someone help me?
@pharmaworld2328 Жыл бұрын
These tags basically have importance when you want to rank your website , itz mean in SEO, in you're web page don't have greater effect
@williamomon389410 ай бұрын
I wantgo watch this again
@farukmutlu7548 Жыл бұрын
Great Video
@DoodleSnozzle Жыл бұрын
Why not just use ?
@ismasoc5 Жыл бұрын
okay tip. just using divs works regardless.
@AyhanSipahi7 ай бұрын
This is old content that’s need an update. you can use article instead of section and inside article you can have header then you can put h1 inside. a page can have multiple h1 but in different headers. web is evolving constantly
@WeyardWiz Жыл бұрын
I thought nav is bootstrap ? Do you have to import something to use that?
@aryaask Жыл бұрын
No its just another HTML5 tag
@oskar8021 Жыл бұрын
The ARTICLE element should be "complete, or self-contained, and (...) in principle, independently distributable or reusable". Also, its HEADER element "is intended to usually contain a heading". (See 4.3.2 and 4.3.8 of the HTML spec, respectively.) Therefore, I usually use an ARTICLE's HEADER element as an HGROUP element, since HGROUP is a rather recent addition. If I want a subheading to the heading, I nest it in another element (e.g. SPAN) and style it accordingly. Also, multiple H1 elements are valid, according to Google and 4.3.11 of the HTML spec. Though you most likely should reconsider if your heading levels or document (webpage) actually make sense if you end up in this situation.
@dis1guy Жыл бұрын
Can't you just use Css to make what header you want to display h1 bigger?
@itspawanpoudel Жыл бұрын
instead of div with big-font you can use h2 or h3.
@lawrencedoliveiro9104 Жыл бұрын
If you just want bigger text, specify bigger text.
@voidspirit111 Жыл бұрын
But it wasn't meant to be a heading. It was meant to be a a text that had bugger font. So span, div or p with a class that adjusts the font is the way to go.
Жыл бұрын
could you tell me please, why you add ul-li container to links in nav? Why you just not using nav>a?
@mouhameddouina8579 Жыл бұрын
IT WORKS
@yazeed739_game9 Жыл бұрын
it's okay to always use div, i even create a button with div only, just add classes and comments, and using div gives the ablity to create the ui from scratch, and i really hate default properties
@cafedx_com Жыл бұрын
do you have a course for learning html the right way? from beginners to advanced?
@BILLBTYR Жыл бұрын
I watched this with audio off and my first initial thought was “why tf is he using divs only like it works but it looks painful to stare at” 😆😆
@deeznuts1358 Жыл бұрын
Started learning html through the Odin project and didn’t know what the div element was until it came up when learning about css, it’s spaghetti to read. How do peeps get jobs in the field when they only use the div element I’m genuinely curious?
@onee Жыл бұрын
Because people look at the website and whether it works or not instead of which html tag you use while applying for a job.
@philodox13 Жыл бұрын
I'm surprised you didn't use the word "semantic" at all.
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@ovinophile Жыл бұрын
He did.
@ayushyt918 Жыл бұрын
Thanks Kyle Thank you so much !!
@asagiai4965 Жыл бұрын
confessions 1.) I haven't seen a main tag 2.) I don't really get the purpose of the other tags. Or I'm mistaking some tags with another.
@Tin91024 ай бұрын
Meanwhile Facebook, Google and other big companies still having no semantics and accessibility
@monojhqm Жыл бұрын
I only use divs when using next.js
@dailycardriving4642 Жыл бұрын
Love this tips but when i inspect big company pages i see A LOT of div tags, how come it’s so ”normal”? Is div element the old way of creating websites? 🤔
@ovinophile Жыл бұрын
The semantic HTML ship sailed decades ago. It’s never coming back.
@AmirHosseinBagheri6 ай бұрын
IT DOESN’T MATTER AT ALL. I am telling as someone who’s been in the business for 15 years. You just need something to work properly and fast.
@raysash4300 Жыл бұрын
We need an html course as well
@osvaldoandrade_arquitecto Жыл бұрын
I'm interested to know how you selected a section then you automatically changed divs to different tag names like nav, ul and li appeared... That's mistake number four cause we would change one by one. Please teach us
@kingnonnnnn Жыл бұрын
You dont need ul li's if you have a nav with only one level. nav is totally fine with the a's inside :)
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@kissgergo5202 Жыл бұрын
So what does the main section actually do? How is it different from not using it?
@sizquirt10 ай бұрын
the major issue is using vs code, visual studio is way faster
@SamirDamle Жыл бұрын
Thanks!
@WebDevSimplified Жыл бұрын
Thank you so much for the support!
@QwDragon Жыл бұрын
Single h1 is obsolete. Check how many h1 tags does google search page have.
@SergioOlivieri89 Жыл бұрын
Google search page is crap. Useless for people with disabilities (especially blind people)
@timur.shhhhh Жыл бұрын
@wlockuz4467 Жыл бұрын
Me:
@hamidcoolboy Жыл бұрын
I agree with other people in the comments. Should've used h2 instead of a div for the second text.
@webfordevs Жыл бұрын
You use two H1 tags, it is not recommended from a11y perspective,. Use one unique h1 per page that describes what that page is about. That h1 preferably starts just above the main content.
@ThingsYourSingleMomCantTeachU6 ай бұрын
Looks like most rendered react
@llkauanribeiro7585 Жыл бұрын
Stop “ pls
@hyllaf Жыл бұрын
When to use the div tag?
@cindma Жыл бұрын
But why big text without meaning?
@user-hy5cx9iu3l Жыл бұрын
Isn't it would be better with 9nly one nav in header?
@VerticalHub1 Жыл бұрын
Easy to forget when using react
@elephantmanstl Жыл бұрын
I keep trying to learn. Only losing confidence in ideas and making uglier designs.
@artibansal7406 Жыл бұрын
animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html
@AvidAfrican11 ай бұрын
So when do we use the "span" tag?
@preston176 Жыл бұрын
What if i use all divs but with classes?
@marktheunknown1829 Жыл бұрын
i just keep using my divs with goos class names like section-title and section-content
@rorymax Жыл бұрын
👎🏼👎🏼
@SergioOlivieri89 Жыл бұрын
So, you're just creating crappy not accessible websites, useless for handicapped people
@ShiiRukii8 ай бұрын
will this also apply in Bootstrap?
@AminalCreacher Жыл бұрын
Look- if the html people wanted us to use semantic html tags, they wouldn’t have given them all sorts of wacky default appearances