CODEWITHSUNDEEP
htmlcss
forrest
forrest

Reputation: 10972

How do I enclose content in an anchor tag and validate?

Due to layout requirements I have enclosed an h4 tag and a p tag inside an anchor tag. The problem is this does not validate properly. I need the anchor tag for the link and the mouseover action on the background image.

What is the correct way to do this without breaking the layout?

Here is the 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>

Here is the 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; 
}

I am open to any solid guidance on this.

Upvotes: 2

Views: 1098

Answers (1)

Marc Audet
Marc Audet

Reputation: 46785

This may not be an issue as HTML progresses.

In HTML5, the a tag can enclose both inline and block level elements (phrasing and flow elements respectively).

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

Example

I used the following snippet:

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

and created the following HTML5 page:

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

Using the following validator, http://validator.w3.org, I got a successful result except for the warning that the HTML5 validator is experimental (work in progress).

You can review the Validation Results and examine the details.

Upvotes: 2

Related Questions