Are You Making These 3 HTML Mistakes?
ฝัง
- เผยแพร่เมื่อ 9 มิ.ย. 2024
- 🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts
![[FULL EP.13] เซียนหรั่ง พา ไททศมิตร ลงเรือฝึกสกิลหว่านแห | เฮ็ดอย่างเซียนหรั่ง | One Playground](http://i.ytimg.com/vi/EWFuf2Av0K0/mqdefault.jpg)
Little confused why you didn’t suggest using using a h2 element as it’s also more SEO oriented
Screen reader problems
@@interclosure what's the problem?
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
Could you not just use a span or p with a class to make it bigger?
I thought is was h1
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
I agree with you on this one. Putting text inside div is not semantic
But it's not a heading it's just big text?
@@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 ?
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.
p element could be used
Thank you for showing me a way out if that div-icult situation!
Haha😅😅
th-cam.com/video/u1lrpvFNo3M/w-d-xo.html
Now that's a dad joke I can appreciate!
Don't worry, as you div deep into html+css you will be more and more confused
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.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
That's the exact situation I'm in now. I still don't fully get it😅
@@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.
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.
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
Always keep MDN bookmarked. No need to try to keep it all in your head!
Lol ya and they def dont all behave the same as p. 😅
Having multiple H1 is possible, if they have the same semantic level, it causes no problem for semantic nor SEO
was hoping someone said this. 100% correct. multiple h1s can be used if used properly.
This is correct.
what do you mean by the same semantic level?
@@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
@@dnngoat ohh i understand now thankyou!
The first mistake was deciding to learn HTML
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 !
wow man i use a screenreader. and most of html errors could cause huge accessibility problems for blind screenreader users
th-cam.com/video/u1lrpvFNo3M/w-d-xo.html
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.
Multiple h1 tags on one page are allowed as long as you place them in a semantic block like article or section.
That last one made a lot of sense. thank you.
the point got me bro
Womp womp
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
Thanks Kyle, You save my time again!
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!
use menu instead of ul when you're listing links in a nav
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
Also, remember to label your navs and sections using aria-label or aria-labelledby.
Google doesn't use semantic HTML
In fact, Google is wrong. It does not consider people with disabilities
I love my div though
Thank you
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!
Using big-font I’d still have to style with CSS
Great points
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
Your vids are the best brother
Great tips thanks 👍.
Great tips!
also you can remove and from
+ use h2 for subtitles instead of div.big-font which is absolutelyl non semantic
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.
Great tips as always 👍
Thank you, I'm building a site now by hand coding.
In all of the companies i worked we used div tags for everything lmao
Thanks. I'm very impressed with your confidence and knowledge.
May I ask, where did you learn to be such a competent web developer?
Also don't use as it causes annoying scrolling to the top and breaks the back button.
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'.
This is correct except for the UL bit sometimes you don't want lists and want spans instead
I tough what telling what main content was
since when does work in
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.
send just learned how to code today 😂🎉
I read somewhere that having multiple h1 isn't necessary a bad thing, especially if it makes sense with what the page looks like.
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.
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.
What difference does the do?
thankyou sir!
I thought nav is bootstrap ? Do you have to import something to use that?
No its just another HTML5 tag
I wantgo watch this again
I only use divs when using next.js
I still confused about the difference between section and article. Can someone help me?
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
Great Video
Ah, aria content. Love it ♥
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
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.
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.
My web pages are full of MAIN elements because ALL the stuff on my webpage is important
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
Can't you just use Css to make what header you want to display h1 bigger?
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
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
😂😂😂
I'm surprised you didn't use the word "semantic" at all.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
He did.
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
thats mean when i have react header component and first parent is div then next i must grab all elements in ?
We need an html course as well
So what does the main section actually do? How is it different from not using it?
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” 😆😆
Looks like most rendered react
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?
Because people look at the website and whether it works or not instead of which html tag you use while applying for a job.
do you have a course for learning html the right way? from beginners to advanced?
could you tell me please, why you add ul-li container to links in nav? Why you just not using nav>a?
So when do we use the "span" tag?
Meanwhile Facebook, Google and other big companies still having no semantics and accessibility
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? 🤔
Single h1 is obsolete. Check how many h1 tags does google search page have.
Google search page is crap. Useless for people with disabilities (especially blind people)
But why big text without meaning?
What if i use all divs but with classes?
The semantic HTML ship sailed decades ago. It’s never coming back.
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
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.
i just keep using my divs with goos class names like section-title and section-content
👎🏼👎🏼
So, you're just creating crappy not accessible websites, useless for handicapped people
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
Multiple h1-Tags are bad for SEO. You should only ever use one.
@@qualle987123 it’s being said in the SEO community but it perfectly fine as long as you use it properly
@@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.
@@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
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
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 🍪
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.
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.
okay tip. just using divs works regardless.
When to use the div tag?
Me:
IT WORKS
Isn't it would be better with 9nly one nav in header?
You dont need ul li's if you have a nav with only one level. nav is totally fine with the a's inside :)
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
No idea what you just said. but AWESOME!
Easy to forget when using react
I keep trying to learn. Only losing confidence in ideas and making uglier designs.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
will this also apply in Bootstrap?
Where’s the blink and scroll tags? 😂
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.
He should explain this tips to Pinterest coders… the horrors you will find there, especially nested Divs… the horror
the major issue is using vs code, visual studio is way faster
I agree with other people in the comments. Should've used h2 instead of a div for the second text.
Vertical monitor ?
I'll use whatever is faster to type. In fact I'd prefer div to just be d. Section? Lol. Nobody can type that much
can someone tell me how to make shorts where I can show my browser and code in the same time I find it really very difficult
Amazing
How do you move a bunch of codes forwards please anyone 🤲
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.