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 7
rgranlundAsked:
Who is Participating?
 
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
 
Chris StanyonCommented:
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
 
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 StanyonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.