SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: Revise HTML
-
Dec 24, 2008, 17:38 #1
- Join Date
- Jun 2008
- Location
- Cuyahoga Falls, Ohio.
- Posts
- 1,511
- 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>
Blake Tallos - Software Engineer for Sanctuary
Software Studio, Inc. C# - Fanatic!
http://www.sancsoft.com/
-
Dec 24, 2008, 20:47 #2
- Join Date
- Aug 2005
- Location
- City of Angels
- Posts
- 1,914
- Mentioned
- 74 Post(s)
- Tagged
- 7 Thread(s)
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.Last edited by John_Betong; Dec 25, 2008 at 09:25.
Learn how to be ready for The New Move to Discourse
How to make Make MoneyNow with a *NEW* look
Be sure to congratulate Wolfshade on earning Member of the Month for August 2014
-
Dec 25, 2008, 00:35 #3
- 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.
-
Dec 25, 2008, 07:47 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
- Content
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 & 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
-
Dec 25, 2008, 15:44 #5
- Join Date
- Jul 2006
- Location
- Augusta, Georgia, United States
- Posts
- 4,194
- Mentioned
- 17 Post(s)
- Tagged
- 5 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.
-
Dec 25, 2008, 16:19 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Dec 26, 2008, 08:29 #7
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- 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
-
Dec 26, 2008, 13:01 #8
- Join Date
- Jun 2008
- Location
- Cuyahoga Falls, Ohio.
- Posts
- 1,511
- 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/
-
Dec 26, 2008, 13:15 #9
- 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