Help me validate my HTML

Discussion in 'Web Design and Development' started by screensaver400, Jan 26, 2011.

  1. screensaver400 macrumors 6502a

    Joined:
    Jan 28, 2005
    #1
    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?
     
  2. dkotter macrumors member

    Joined:
    Jul 30, 2009
    #2
    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.
     
  3. screensaver400 thread starter macrumors 6502a

    Joined:
    Jan 28, 2005
    #3
    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.
     
  4. Xian Zhu Xuande macrumors 6502a

    Xian Zhu Xuande

    Joined:
    Jul 30, 2008
    #4
    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.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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-weightbold;
     
    font-size1.2em;
    }
    .
    name .title {
     
    displayblock;
     
    font-size0.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.
     
  6. aykhwang, Jan 26, 2011
    Last edited: Jan 26, 2011

    aykhwang macrumors newbie

    Joined:
    Feb 28, 2010
    #6
    That's the code you need right there.
     

Share This Page