Help me validate my HTML

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

  1. screensaver400 macrumors 6502a

    Jan 28, 2005
    I've got 17 errors on a page I'm working on, because of this issue:

    <div class="details">
        <a href="">
            <h3>John Doe</h3> 
            <h4>Editor in Chief</h4>
        <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>
    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

    Jul 30, 2009
    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

    Jan 28, 2005
    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

    Jul 30, 2008
    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:

    <style type="text/css" media="all">
    	h3 { font: 12px/20px "Helvetica Neue", Helvetica, sans-serif; }
    	h3 b { font-size: 18px; }
    	<a href="">
    		<b>John Doe</b><br>
    			Editor in Chief
    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


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

    <div class="name"><a href="">John Doe 
    <span class="title">Editor in Chief</span></a></div>
    with CSS something like,
    .name {
    name .title {
    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

    Feb 28, 2010
    That's the code you need right there.

Share This Page