Are You Making These 3 HTML Mistakes?

No video

Are You Making These 3 HTML Mistakes?

Рет қаралды 558,802

Web Dev Simplified

Күн бұрын

Пікірлер: 320

@simonvandenhende5274 Жыл бұрын

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?

@bobwilkinsonguitar6142 10 ай бұрын

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

@HyperBlueberry 9 ай бұрын

Could you not just use a span or p with a class to make it bigger?

@Grindzing 9 ай бұрын

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.santana 9 ай бұрын

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😅

@dinosaursnack 8 ай бұрын

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

@dominoz2997 11 ай бұрын

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!

@dinosaursnack 8 ай бұрын

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!

@merciful9042 5 ай бұрын

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

@xamle6523 8 ай бұрын

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_MADRID192 8 ай бұрын

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.

@jisrite 10 ай бұрын

That last one made a lot of sense. thank you.

@selectorsaurus 8 ай бұрын

Also, remember to label your navs and sections using aria-label or aria-labelledby.

@AIKineticNRG 9 ай бұрын

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.

@dinosaursnack 8 ай бұрын

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

@omrajeshkbangalore2092 8 ай бұрын

Thank you

@PirateSimulator 10 ай бұрын

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.

@areaofeffect100 9 ай бұрын

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-or1wo 5 ай бұрын

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

@itskittyme 6 ай бұрын

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

@williamomon3894 10 ай бұрын

I wantgo watch this again

@farukmutlu7548 Жыл бұрын

Great Video

@DoodleSnozzle Жыл бұрын

Why not just use ?

@ismasoc5 Жыл бұрын

okay tip. just using divs works regardless.

@AyhanSipahi 7 ай бұрын

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.

@Tin9102 4 ай бұрын

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.

@AmirHosseinBagheri 6 ай бұрын

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?

@sizquirt 10 ай бұрын

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.