CSS H-Tags Syntax

What is a better practice, the H-Tag inside of the link or the Link inside of the H-Tag?
LVL 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
In HTML4, it was invalid to put the header inside a link. In HTML5, you can do it but it does make more sense to have the link inside the header.

By default, a link is an inline element whereas a header is block level element - structurally, it seems odd to put a block element inside an inline element.
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Depends on what you mean by better.

I'll guess you mean best SEO traction.

H-Tags inside Links violates the HTML5 standard. If you're looking for best SEO traction (natural search results).

1) Use the HTML5 doctype.

<!DOCTYPE html>

2) Set your page language correctly...

<html lang="en">

3) You can go an additional step by setting hreflang correctly on every link.

4) All H tags should contain only text + should occur in semantic order, so...

H1 -> H2 -> H3 is semantically correct.

H3 -> H1 is semantically incorrect.

The simple way to ensure you have a solid SEO starting point is to use the validator. Me personally, I only run 100% valid HTML on all my personal sites + only deliver 100% valid HTML for client projects.

https://validator.w3.org/nu

I continually hear people say having valid syntax makes no difference.

Believe no one. Test everything.

Take a content rich site + check it's SERP + then fix all HTML semantics + resubmit sitemap + check cached version to know when new site content has actually moved into new searches.

Then over a few day period, see how your site rank changes, altering no other SEO signals.

You'll likely be surprised about your site's rank change.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rgranlundAuthor Commented:
@all;
What about the H-Tag order and the proper way, semantic order;
<h1></h1>
   <h2></h2>

<h2></h2>
   <h3></h3>
   <h3></h3>

<h2></h2>
   <h3></h3>
   <h3></h3>
      <h4></h4>
      <h4></h4>

<h2></h2>
   <h3></h3>
   <h3></h3>
      <h4></h4>
      <h4></h4>

Is that order ok?
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Yes. This is correct. So long as children have higher H{number} tags, you're good.

When in doubt, use the Validator above.

In fact, if you click the outline option, you can see an outline of your entire page, to get a quick overview of your page semantics.

Very handy, when you're targeting Featured Snippets showing up in searches for your pages.
0
Chris StanyonWebDevCommented:
I'm sure this is just an oversight by David, but he's suggested his own answer alongside the Authors as being correct. I'm sure if he reviewed the responses, I'm sure he'll realise he intended to accept his own alongside mine (#42396233) as being correct
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.