Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help me validate my HTML

S

screensaver400

macrumors 6502a
Original poster
Jan 28, 2005
858
46
I've got 17 errors on a page I'm working on, because of this issue:

Code: 
<div class="details">

    <a href="mailto:john.doe@johndoe.com">
        <h3>John Doe</h3> 
        <h4>Editor in Chief</h4>
    </a>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque tempus lacus id neque ultrices id aliquet enim rhoncus. 
Donec erat nulla, euismod nec accumsan eget, blandit at orci. 
In et enim vitae nibh rhoncus sodales. 
Donec sollicitudin pharetra elit et interdum. 
Cras id sapien sed odio volutpat interdum id quis neque. 
Donec nec imperdiet nibh. Cras sit amet neque diam.</p>

</div>

Specifically, the email link. <h > can't be inside a link. However, if I make two separate links, one for each heading style, the rollover doesn't work--only one of the two headings will have the shift to gray I've set up.

So: How can I make a single two-line link, which contains two different heading types?
 
D

dkotter

macrumors member
Jul 30, 2009
57
0
Why can't you do two different links that both have rollover effects? If you want them to have two different effects, just give them different class names and set up each class the way you want it.
 
S

screensaver400

macrumors 6502a
Original poster
Jan 28, 2005
858
46
If I do that, rolling over Editor in Chief will only produce the rollover effect for Editor in Chief. How it is currently (that is, the invalid HTML way), rolling over either heading produces the effect in both.

That said, I may just leave it how it is, and validate it as HTML5. Apparently HTML5 doesn't have a problem with placing block level elements within inline elements--I'm not sure HTML5 even makes a distinction between the two.

This should still be okay even on older browsers, because doing this in the past would nearly always work, but would just technically be illegal. If I use <!DOCTYPE html>, it's no longer illegal.
 
Xian Zhu Xuande

Xian Zhu Xuande

macrumors 6502a
Jul 30, 2008
941
128
screensaver400 said:
So: How can I make a single two-line link, which contains two different heading types?
Click to expand...
First, unless you're just messing with something temporary and you don't care about doing things properly, make an effort to understand the specification under which you are working. Don't pick one just because it means it will shut the validator up. If you're going to code HTML5 make sure you're using the right code, though in HTML5 you can indeed place block-level elements inside a link.

Is there a particular reason why you want two headings in one link? You wouldn't normally put the position in a heading. If you want to be compatible with a specification prior to HTML5 Just do something like this:

Code: 
<style type="text/css" media="all">
	h3 { font: 12px/20px "Helvetica Neue", Helvetica, sans-serif; }
	h3 b { font-size: 18px; }
</style>

Code: 
<h3>
	<a href="mailto:john.doe.johndoe.com">
		<b>John Doe</b><br>
			Editor in Chief
	</a>
</h3>
You can use tags around either portion of the heading and CSS to style any way you wish. if you want to use two headings you can use CSS tied to a container (a div or whatever) to simulate the appearance of a link.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Personally, that's not a good use of heading tags. If I were coding it up, the HTML would be,

PHP: 
<div class="name"><a href="mailto:john.doe@johndoe.com">John Doe 
<span class="title">Editor in Chief</span></a></div>
with CSS something like,
PHP: 
.name {
 font-weight: bold;
 font-size: 1.2em;
}
.name .title {
 display: block;
 font-size: 0.9em;
}
Giving the span a block display will cause it to be on its own line. Doing the code this makes everything valid HTML-wise and even looks good with CSS disabled.
 
A

aykhwang

macrumors newbie
Feb 28, 2010
10
0
angelwatt said:
PHP: 
<div class="name"><a href="mailto:john.doe@johndoe.com">John Doe 
<span class="title">Editor in Chief</span></a></div>
with CSS something like,
PHP: 
.name {
 font-weight: bold;
 font-size: 1.2em;
}
.name .title {
 display: block;
 font-size: 0.9em;
}
Click to expand...

That's the code you need right there.
 
Last edited:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom