html - 如何将内容包含在 anchor 标记中并进行验证？

Question

由于布局要求，我在 anchor 标记内包含了 h4 标记和 p 标记。问题是这不能正确验证。我需要链接的 anchor 标记以及背景图像上的鼠标悬停操作。

在不破坏布局的情况下执行此操作的正确方法是什么？

这是 HTML:

<div class="services">
    <a href="http://corecubed.com/our-services/{url_title}">
        <h4>{home_page_title}</h4>
        <p>{home_page_blurb}</p>
    </a>
</div>

这是 CSS:

.services a:link, .services a:visited {
    width: 165px;
    height: 181px;
    display: block;
    color: #5e5e5e;
    text-decoration: none;
    float: left;
    margin: 0 5px 20px 0;
    background: url(/images/bg_services.png) no-repeat center bottom;
}

.services a:hover {
    background-position: center top;
}

.services h4 {
    width: 140px;
    height: 50px;
    display: block;
    font-size: 13px;
    font-weight: normal;
    color: #eaeaea;
    margin: 0;
    padding: 10px 10px 0 15px;
}

.services p { 
    line-height: 19px;
    padding: 0 10px 0 10px; 
}

我愿意接受任何有关这方面的可靠指导。

Answer 1

随着 HTML 的发展，这可能不再是问题。

在 HTML5 中，a 标记可以包含内联和 block 级元素(分别为短语和流元素)。

参见:http://www.w3.org/TR/html-markup/a.html#a

示例

我使用了以下代码片段:

<a href="http://www.yahoo.com">
    <h3>Go see Yahoo...</h3>
    <p>A short paragraph.</p>
</a>

并创建了以下 HTML5 页面:

http://jsfiddle.net/audetwebdesign/Hm7wp/show/

使用以下验证器，http://validator.w3.org ，我得到了成功的结果 除了 HTML5 验证器处于实验阶段(正在进行中)的警告之外。

您可以查看Validation Results并检查详细信息。