Revise HTML

**Blake Tallos** · Dec 24, 2008, 16:38

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>

**John_Betong** · Dec 24, 2008, 19:47

Originally Posted by BlakeAnthony

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.

**Centauri** · Dec 24, 2008, 23:35

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.

**paul_wilkins** · Dec 25, 2008, 06:47

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.

**oddz** · Dec 25, 2008, 14:44

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.

**paul_wilkins** · Dec 25, 2008, 15:19

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?

**AutisticCuckoo** · Dec 26, 2008, 07:29

We've had this discussion recently, Paul. Header and footer are established typographic terms that indicate 'first' and 'last', rather than 'top' and 'bottom'.

**Blake Tallos** · Dec 26, 2008, 12:01

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.

**JsD2K** · Dec 26, 2008, 12:15

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?

The SitePoint Forums have moved.

User Tag List

Thread: Revise HTML

Thread Tools

Display

Revise HTML

Bookmarks

Bookmarks

Posting Permissions