Are You Making These 3 HTML Mistakes?

Показать описание

🌎 Find Me Here:

#Shorts

Рекомендации по теме

Комментарии

Little confused why you didn’t suggest using using a h2 element as it’s also more SEO oriented

bowiemtl

Great tips! However, in the end when you changed the <h1> tag inside the <article> to a <div> that kinda went against the rule of semantic html. I think suggesting to use a <h2> tag with a class might have been a more consistent solution

simonvandenhende

Thank you for showing me a way out if that div-icult situation!

cherriesarefire

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.

borstenpinsel

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.

xphstos_

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!

hashone

When I started with html I mostly used <p> 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

bernardus

use menu instead of ul when you're listing links in a nav

merciful

I love the push for semantics but I disagree with the usage of a <div> tag for bigger fonts… if you go this route it should be a <p> tag if semantics aren’t a concern. If they are you should keep the <h> tag and add a class of “display-#” where your classes for display fonts are generally much bigger than an <h1>

Instead your <h#> tags should be designed accordingly (larger to smaller text) and for bigger text you should use “display-#” font sizes classes

ZacharyPrice

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!

dominoz

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

jisrite

Having multiple H1 is possible, if they have the same semantic level, it causes no problem for semantic nor SEO

damutsew

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.

ramlaaal