html <hn>应该在<a>的里面还是外面？

在网上看到有人是这样说的

<h1><a href="*******com">锚文本</a></h1>
<a href="*******com"><h1>锚文本</h1></a>

上面的告诉搜索引擎，这个锚文本链接非常重要。

下面的告诉搜索引擎，锚文本这三个字很重要！

我个人比较热衷于将<h1>放在外面甚至认为只能放在外面，因为在用css设置样式时，两者会有所不同，将<h1>放在外面看起来似乎表现得更好更准确，来看一下代码

<h1 class="orangeColor">
        <a href="#" class="redColor"><h1>放在<a>外面,h1蓝色，a红色</a>
    </h1>
    <a href="#" class="redColor">
        <h1 class="orangeColor"><h1>放在<a>里面,h1蓝色，a红色</h1>
    </a>
    <a href="#">
        <h1 class="orangeColor"><h1>放在<a>里面,h1蓝色，a不设置</h1>
    </a>
    <a href="#" class="redColor">
        <h1><h1>放在<a>里面,h1不设置，a红色</h1>
    </a>

对应的css代码：

.orangeColor{
    <span style="white-space:pre">		</span>background-color: orange;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>.redColor{
<span style="white-space:pre">		</span>    background-color: red;
<span style="white-space:pre">		</span>}

实现的效果（IE11，FireFox33.02，Chrome38.02效果都一样）：

可以看出：

1）h1放在外面时，背景色的表现都很正常

2）h1放在里面是，a设置的背景色就不起作用了

这是什么原因呢？

这里不得不说下嵌套规则了，html的嵌套规则是这样说的：块级元素可以包含内联元素或某些块级元素，但内敛元素不能包含块级元素，它只能包含其它内联元素。在写html时，要注意这条嵌套规则，不然则会引起奇怪的样式表现。

ps:有几个特殊的块级元素只能包含内联元素，不能包含块级元素，如：h1~h6  p  dt  等等。