When working with HTML, there is often a debate on whether block-level elements should always enclose <a> tags. What if it's necessary for the <a> tag to wrap around the block-level element in order to ensure that the correct styles are applied? For example, can we change this:
<h3><a href="/">Your Header</a></h3>
to this:
<a href="/"><h3>Your Header</h3></a>
I personally prefer the latter approach to guarantee the correct styles are maintained, especially when dealing with legacy code that isn't worth revising just for one element. However, I'm curious to hear your thoughts on this matter.
Although I came across this question on Stack Overflow, discussing how <a> and <h1> should be nested, I'm uncertain if different guidelines apply when using <h3> tags.
After considering the feedback and reviewing the code once more, I've identified two potential solutions:
- Enclose the
<h3>elements within<a>tags (acceptable in HTML5) - Add
.class ato the CSS to inherit parentdivstyles like so:
HTML
<div class="class">
<h3><a href="/">Your Header</a></h3>
</div>
CSS
.class, .class a {
width:296px;
height:46px;
overflow:hidden;
color:#FE5815;
}