SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Revise HTML

  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Revise HTML

    Im starting to develop a new site. I was wondering if someone could look at my markup I have set just to revise on what I have so far.
    I want to make sure the markup is correct before I start styling my CSS.
    Image is attached Below. Thank you.

    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FiddleHead</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    </style></head><body>
         <div id="Container">
                <div id="header">
        <h3>Join Our community</h3>
     
    </div>
                <ul id="menulist">
    <li><a href="/Currentissue/" alt="Current Issue">Current Issue</a></li>
    <li><a href="/Calander/" alt="Calander">Calander</a></li>
    <li><a href="/Resource Directory/" alt="Resource Directory">Resource Directory</a></li>
    <li><a href="/Deals/" alt="Deals">Deals</a></li>
    <li><a href="Archive" alt="Archive">Archive</a></li>
    <li><a href="/About Us/" alt="About Us">About Us</a></li>
    <li><a href="/Find Us" alt="Find Us">Find Us</a></li>
     
    </ul>
                <div id="MainContent">
     
    <img src="Your Image" title="The Fiddle Loop LLC">
    <!--This image Can be floated left-->
     
    <h3>Iduis ad eugait lutpat at, verilit, suscilit, velisl utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut.</h3>
     
    <p>Vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet venissequam, sectem iliscil ulluptat, sed molore feugiam, suscillaore con eummy nullupt atisim volut ut acin ex endreet inis autat.</p>
    </div>
                <div id="Left">
    <h4>Rechallange</h4>
    <h2Feature Title</h2>
     
    <p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
     
    </div>
                <div id="Middle">
    <h4>The Fiddlehead Current Events</h4>
    <h2>EVENT NAME</h2>
    <p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
    <a href="#">[See All]</a>
    </div>
     
                <div id="Right">
    <h4>FIDDLEHEAD TIDBIT</h4>
    <h2>TIDBIT</h2>
    <p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
    <a href="#">[Read More]</a>
    </div>
                <div id="Footer">
    <h2>New England's guide to pratical & resourceful living</h2>
     
    </div>
    </div>
     
     
     
    </body></html>
    Attached Images Attached Images
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,580
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Im starting to develop a new site. I was wondering if someone could look at my markup I have set just to revise on what I have so far.
    I want to make sure the markup is correct before I start styling my CSS.
    Image is attached Below. Thank you.

    https://addons.mozilla.org/en-US/firefox/addon/249

    I use the above FireFox addon which gives comprehensive validation reports which can be viewed by clicking on the either red or green icon in the bottom right hand browser corner.

    Your page gives 5 errors:
    Line 34: there is no attribute "ALT"
    Line 25: required attribut "ALT" not specified
    Line 34: title is not a member of a group specified for any attribute
    Line 34: element <H2FEATURE undefine
    Line 34: end tag for element which is not open

    Besides highlighting the errors it also suggest possible solutions.

    Free software which is well worth supporting with a donation.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The alt attribute is for displaying alternate text when an image is not available, and therefore only applies to images (and should always be specified even if blank) and not <a>s - if you want a tooltip popup when hovering the menu, use the title attribute instead.

    The numbering of the header tag <h> should be in the form of a hierarchy, with a <h1> being the most important heading and subheadings below this decreasing in number - having the first heading as a <h3>, with no <h2>s and <h1>s preceding it does not make much semantic sense.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    It seems from the page design that you have the following structure in mind.

    • Fiddlehead
      • Content
      • Feature
        • Feature title

      • Current Events
        • Event Name

      • Tidbit
        • Tidbit name

      • Footer


    Given the above structure, that is exactly how you need to structure your page headings.

    To use different types of headings to achieve different text sizes is a DEFINITE no-no. The HTML tags are to denote structure. The CSS is to control presentation.

    Code html4strict:
    <h1><img src="Your Image" alt="The Fiddle Loop LLC"></h1>
        <h2>Iduis ad eugait ... feum ipit aut.</h2>
        <h2>Rechallange</h2>
            <h3>Feature Title</h3>
        <h2>The Fiddlehead Current Events</h2>
            <h3>Event Name</h3>
        <h2>Fiddlehead Tidbit</h2>
            <h3>Tidbit</h3>

    If you do want to achieve the same presentational effect as before, here's the CSS that gets you there.

    Code css:
    #header p {
        font-size: 1.2em; margin: 1em 0; font-weight: bolder;
    }
    #MainContent h1 {
        font-size: 1em; margin: 1.1em 0; font-weight: normal; display: inline;
    }
    #MainContent h2 {
        font-size: 1.2em; margin: 1em 0; font-weight: bolder;
    }
    #Left h2, #Middle h2, #Right h2 {
        font-size: 1em; margin: 1em 0; font-weight: bolder;
    }
    #Left h3, #Middle h3, #Right h3 {
        font-size: 1.5em; margin: .75em 0; font-weight: bolder;
    }
    #Footer p {
        font-size: 1.5em; margin: .75em 0; font-weight: bolder;
    }

    For reference, here's the updated HTML

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>FiddleHead</title>
    	<meta name="generator" content="PSPad editor, www.pspad.com">
    	<link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div id="Container">
    	<div id="header">
    		<p>Join Our community</p>
    	</div>
    	<ul id="menulist">
    		<li><a href="/Currentissue/">Current Issue</a></li>
    		<li><a href="/Calander/">Calander</a></li>
    		<li><a href="/Resource Directory/">Resource Directory</a></li>
    		<li><a href="/Deals/">Deals</a></li>
    		<li><a href="Archive">Archive</a></li>
    		<li><a href="/About Us/">About Us</a></li>
    		<li><a href="/Find Us">Find Us</a></li>
    	</ul>
    	<div id="MainContent">
    		<h1><img src="Your Image" alt="The Fiddle Loop LLC"></h1>
    		<!--This image Can be floated left-->
    		<h2>Iduis ad eugait lutpat at, verilit, suscilit, velisl utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut.</h2>
    		<p>Vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet venissequam, sectem iliscil ulluptat, sed molore feugiam, suscillaore con eummy nullupt atisim volut ut acin ex endreet inis autat.</p>
    	</div>
    	<div id="Left">
    		<h2>Rechallange</h2>
    		<h3>Feature Title</h3>
    		<p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
    	</div>
    	<div id="Middle">
    		<h2>The Fiddlehead Current Events</h2>
    		<h3>EVENT NAME</h3>
    		<p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
    		<a href="#">[See All]</a>
    	</div>
    	<div id="Right">
    		<h2>FIDDLEHEAD TIDBIT</h2>
    		<h3>TIDBIT</h3>
    		<p>utat laor in ex estrud te vel exeraese ming et eugiam non ea feum ipit aut vel ut atuerosto dolorer iuscipit luptat ex etum veliquam veliscilit utat. Ut prat am zzriureet veniss.</p>
    		<a href="#">[Read More]</a>
    	</div>
    	<div id="Footer">
    		<p>New England's guide to pratical &amp; resourceful living</p>
    	</div>
    </div>
    </body>
    </html>

    Other touchups are removing title attributes from the links, as it's completely wasteful to provide an exact duplicate of what the link already says. There's little that's more annoying for a user than to hover over a link and find that the tooltip is a complete waste of their time.

    Finally, the ampersand has been specified as proper character entity.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,051
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You should use id and class names with the content in mind – not presentation. For example, left, right and middle pertain to presentation not the content and/or structure of the page.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Does that go as far as using header and footer terms? Because they directly imply that they should be in the upper and lower positions. What other terms can be used if implications of position aren't to be implied?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We've had this discussion recently, Paul. Header and footer are established typographic terms that indicate 'first' and 'last', rather than 'top' and 'bottom'.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guys.

    Even though the guy who wanted to hes template to be coded bailed out on me It was good practice. Yeah, I messed up the headings on the page.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  9. #9
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say "correct" do you mean semantically correct? Or are you asking how to do something right because your code has an error in it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •