let Bio = {
username: 'hyggedev',
fullName: 'Chris Hansen',
bio: 'I create⚡️ fast modern, client-side websites with React and Javascript.',
passion: ['Blog', 'Tweet', 'Code']
};
Although I agree with your very first point, "Not all text is a heading", I'd like to get your opinion on where you would use the H1 tag? As someone who's just starting to dive into SEO more, I know that the H1 tag should basically be used only once on a page, as it determines priority over all other text. I would think, "Ipad Pro" would be in an H1 tag or am I wrong? Is that example for their page? 🤣
Great article though, I did pick up a few pointers! I like how you mentioned "space-between." can cause unexpected layouts. I use it a lot, but I'm going to look into "column-gap"!
This was my thought as well. That should absolutely be an h1 and can be spanned, but iPad Pro is the most important thing on the page. It's the h1, the "Supercharged by the M1 Apple Chip" is the subheading or h2.
These examples are circumstantial too and don't apply to every situation. The grid example with space-between, works in some instances where flex may work better in others.
Accessibility is important and I agree with using prefers reduced motion, but again you can cover yourself there in different ways. This article gives a false sense of "this is the correct way", don't do this other thing. In my opinion, this article has some good practices and some bad practices. We need to show good accessibility and semantic html. I'm not sure this comes across here.
Yeah, absolutely. I made a few points in the comment above if you have any rebuttals on those? I was just trying to point out that the article's claims aren't technically good coding habits in every circumstance.
I see. I think we can start with headings. I told about if you add headings anywhere you complicate navigation of users with screen readers because the list of headings bacame unnecessarily large.
Each page should have an h1 giving the highest level of importance on the page, which in the example is the iPad Pro. Apple themselves don't even follow this practice, but here is a decent post on why it is important to level correctly. webaim.org/techniques/semanticstru...
the fragment is a section on the home page. So the h1 can't be used. So I give the fragments of code where h1 isn't. One of them is a fragment from the real website.
This is the same snippet of code directly from Apple's site.
<divid="hero-headline-zoom"data-component-list="HeroTextZoom"><h1id="hero-headline"data-component-list="HeroHeadline"data-focus-expression="{"expression": "t - 100vh"}"class="hero-headline typography-experience-hero-headline">iPad Pro</h1><divid="hero-headline-gradient"></div><h2id="hero-subhead"class=" typography-experience-hero-subhead"data-focus-expression="{"expression": "t - 100vh"}"data-component-list="HeroSubHeadline">Supercharged by the Apple M1 chip.</h2></div>
Here is the snippet from the homepage, which the h2 is correct in.
<divclass="unit-copy-wrapper"><h2class="headline">iPad Pro</h2><h3class="subhead"role="presentation">Supercharged by the Apple M1 chip.</h3><divclass="cta-links"><aclass="icon icon-after icon-chevronright"href="/ipad-pro/"target="_self"rel="follow"data-analytics-region="learn more"data-analytics-title="Learn more about iPad Pro"aria-label="Learn more about iPad Pro">Learn more</a><aclass="icon icon-after icon-chevronright"href="/us/shop/goto/ipad_pro/select"target="_self"rel="follow"data-analytics-region="buy"data-analytics-title="Buy iPad Pro"aria-label="Buy iPad Pro">Buy</a></div></div>
This is semantically correct, so while your example is technically correct for a page with multiple headings, it does not appear that way in your image. It seems that this is the page view, where there should be an h1 at that level. Your post isn't incorrect, it's just most of it was based on the circumstance you use it in.
I told about approach that will help people to improve interfaces. Yes, if we consider snippet from Apple website role="presentation" helps. But it's a hack.
True, it's probably not bad practice after you explained it's from the home page. The other problem I saw was saying don't use grid with space between. Like I said before that is completely situational and using that is completely fine. I think it's more the wording and how the first example is taken out of context.
Although I agree with your very first point, "Not all text is a heading", I'd like to get your opinion on where you would use the H1 tag? As someone who's just starting to dive into SEO more, I know that the H1 tag should basically be used only once on a page, as it determines priority over all other text. I would think, "Ipad Pro" would be in an H1 tag or am I wrong? Is that example for their page? 🤣
Great article though, I did pick up a few pointers! I like how you mentioned "space-between." can cause unexpected layouts. I use it a lot, but I'm going to look into "column-gap"!
This was my thought as well. That should absolutely be an h1 and can be spanned, but iPad Pro is the most important thing on the page. It's the h1, the "Supercharged by the M1 Apple Chip" is the subheading or h2.
These examples are circumstantial too and don't apply to every situation. The grid example with space-between, works in some instances where flex may work better in others.
Accessibility is important and I agree with using prefers reduced motion, but again you can cover yourself there in different ways. This article gives a false sense of "this is the correct way", don't do this other thing. In my opinion, this article has some good practices and some bad practices. We need to show good accessibility and semantic html. I'm not sure this comes across here.
Let's discuss it more details?
Yeah, absolutely. I made a few points in the comment above if you have any rebuttals on those? I was just trying to point out that the article's claims aren't technically good coding habits in every circumstance.
I see. I think we can start with headings. I told about if you add headings anywhere you complicate navigation of users with screen readers because the list of headings bacame unnecessarily large.
Why is it the bad practices?
Each page should have an h1 giving the highest level of importance on the page, which in the example is the iPad Pro. Apple themselves don't even follow this practice, but here is a decent post on why it is important to level correctly. webaim.org/techniques/semanticstru...
the fragment is a section on the home page. So the h1 can't be used. So I give the fragments of code where h1 isn't. One of them is a fragment from the real website.
This is the same snippet of code directly from Apple's site.
Here is the snippet from the homepage, which the h2 is correct in.
This is semantically correct, so while your example is technically correct for a page with multiple headings, it does not appear that way in your image. It seems that this is the page view, where there should be an h1 at that level. Your post isn't incorrect, it's just most of it was based on the circumstance you use it in.
I told about approach that will help people to improve interfaces. Yes, if we consider snippet from Apple website role="presentation" helps. But it's a hack.
ARIA in HTML spec tells "Don't override default roles" w3.org/TR/html-aria/#don-t-overrid...
You told I wrote a bad practice but I don't understand where you found that.
True, it's probably not bad practice after you explained it's from the home page. The other problem I saw was saying don't use grid with space between. Like I said before that is completely situational and using that is completely fine. I think it's more the wording and how the first example is taken out of context.
Yes, I added markup for this example. I use only one h2