Member Avatar for hno

HI
i have used tag's a to link a address. i've used it like this :

<a ... > <img ... /><br /> <h1> example </h1></a>

when i've validate it , this error has been showed .

is there any problwm if i've used tag's a like this .

thanks

  • 3 Contributors
  • 2 Replies
  • 93 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

A quick follow-up to the thread: the validation error you saw depends on the HTML version your page declares. As pointed out, older HTML/XHTML rules prohibit putting block-level elements like headings inside inline elements. Modern HTML5 relaxed that content model so an a may wrap flow content (including headings) as long as it does not contain other interactive elements. See the spec and a practical reference on MDN for details.

If you want to remove the validator error, first confirm the document type and re-validate. The HTML5 doctype is:

<!DOCTYPE html>

If you switch to HTML5, the markup that previously failed will often validate. Validate with the W3C Nu HTML Checker to see HTML5 results: Nu HTML Checker. If you cannot change doctypes, keep the heading outside the inline a (as suggested) or restructure markup so the document follows the content model for your doctype.

For a visual/UX fix without changing structure, make the link behave like a block using CSS (this does not change validity, only presentation):

a.card { display: block; text-decoration: none; color: inherit; }
a.card h1 { margin: 0; }
a.card img { display: block; }

Also avoid nesting interactive controls (buttons, other links) inside a link and test keyboard navigation and screen readers. Relevant reference: MDN: a element.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

What is the actual error you get ?

Member Avatar for ko ko

The anchor element is an inline element. Inline element can't contain block level element. You put h1 tag in anchor tag. It makes the browser confuse. You should write like that:

<h1>Example<a href="#"><img src="image.gif" /></a></h1>
<h1><a href="#"><img src="image.gif" /></a>Example</h1>
<h1><a href="#"><img src="image.gif" /></a><br />Example</h1>

The block element can contain inline and other block level element.

<div><!-- The div is block element -->
        <h1>This is block element heading</h1>
</div>
<!-- This is available -->

<span><!-- The span is inline element -->
         <h1>This is block element heading</h1>
</span>
<!-- This one is unavailable -->

I hope this will help you...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.