Code/ Markup best practices for SEO Web Design

Discussion in 'Search Engine Optimization' started by Lol_Kitty, Jun 10, 2008.

0
Page 1 of 2
  1. #1
    Hi,

    I'm looking for code specific SEO web design best practices to pass on to our non SEO savvy web designers who are redesigning our site.

    I need to communicate to our web design team how to build our design templates for maximum search engine friendliness.

    What markup / html / CSS/ code recommendations would you make to the designer if you were in my shoes. What general guidelines would you indicate. If you were to make a list, what would it look like?

    Thanks in advance!

    Cheers,
     
    Lol_Kitty, Jun 10, 2008 IP
  2. Rivers

    Rivers Peon

    Messages:
    276
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That's a big question. I would start by making sure they use anchor text, title attributes, proper h tags, and alts. Oh and unique titles for each page.
     
    Rivers, Jun 10, 2008 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ah, minimal markup. My area of expertise. :cool:

    Well, the first thing to do is to realize that the search engines are after one thing and one thing only - content. So what I do is give it to them with as little code getting in the way as possible.

    I use a full and complete DOCTYPE to start, and then follow that with the opening and closing HTML tags. I also declare which language the page is being written in as soon as possible, followed by the HEAD and BODY sections being written. I'm using a Strict DOCTYPE here because I don't want to use any presentational HTML elements or attributes that will end up demeaning the purpose of HTML, which is a structural markup language. Its job is to mark up and structure a Web page, not to define how it looks. So say "adios" to all those FONT tags, align="" attributes, and other such detitrus, because they're going the way of the dodo, and they'll be missed about as much (if even that).

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
	</head>
	<body>
	</body>
</html>
    Code (markup):
    I then start working my way inside, starting with the head section. This is of course the easy part.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="content-language" content="en"> 
		<meta name="MSSmartTagsPreventParsing" content="true">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project -->
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld">
		<script type="text/javascript" src="http://www.example.com/scripts/library.js"></script>
	</head>
	<body>
	</body>
</html>
    Code (markup):
    You'll notice the first thing I use is the TITLE tag. Following that are the CONTENT-TYPE and CONTENT-STYLE-TYPE META tags. I write all of my pages using the UTF-8 character encoding, but since this page is written in English anyway, ISO-8859-1 would be appropriate. Whatever you do, be consistent, pick a character encoding, and make sure it matches the encoding that you not only save the Web page with but also the encoding sent by the server's HTTP headers. As for the Content-Style-Type META tag, I use it to declare which stylesheet language I''ll be using.

    Next up is the Content-Language META tag. Once again I'm declaring English as the langague the document was written in. It's not there for SEO purposes, but it is a good tag to have anyway. I also use the "MSSmartTagsPreventParsing" and "imagetoolbar" META tags to keep Internet Explorer in line - I don't want my tags being parsed, nor do I want that STUPID and ANNOYING image toolbar to appear over an image. Some may complain about the usability issues, but frankly I just don't buy it.

    I normally don't use robots tags, since the search engines tend to ignore them (unless you tell them NOT to do something, as this next META tag does), but this one's good to have, especially given that the site this refers to is so open to and rife with abuse. It's the noodp tag - if your site has a DMOZ listing but the description doesn't fit what the page and/or site are about, this gets rid of it. Very handy to have, especially when dealing with an abusive DMOZ editor.

    Next up are the classic META description and keywords tags. As the placeholder content says, these tags are to be used to provide a clear, concise, relevant description of the current page as well as to list the keywords that appear in (again) the current page. I then finish up the HEAD section with a link to my screen, printer, and handheld stylesheets, as well as a single JavaScript library file that holds all of my scripts that get used on every page. Notice that my stylesheets are named after their function. The screen.css file is for the traditional computer screen (and due to a bug in Opera, projectors as well), the printer.css file for when the user prints the page, and of course the handheld.css file for handheld and other mobile devices. This makes it very easy to determine which stylesheet is which, saving the designer a lot of time trying to remember and find which file goes to what.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="content-language" content="en"> 
		<meta name="MSSmartTagsPreventParsing" content="true">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project -->
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld">
		<script type="text/javascript" src="http://www.example.com/scripts/library.js"></script>
	</head>
	<body>
		<div id="container">
			<div id="header">
			</div>
			<form action="http://www.example.com/search/" id="search-form" method="get">
			</form>
			<ul id="menu">
			</ul>
			<div id="content">
			</div>
			<div id="sidebar">
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
</html>
    Code (markup):
    I start off with a DIV container that has an ID of "container" - this element holds everything on the page, and it gets used on every project regardless of whether I really need it for the current job or not. Yes, it's that handy. I then break down the page into its major components - the header, search form, menu, main content, sidebar, and footer. if I need another sidebar, I just add it after the one I marked up. If I don't need it, I can remove it (same with the search form - if I dont need it or it can best be used elsewhere in the page due to design constraints, I can either move or remove it).

    Starting with the header, I insert an image into the DIV that's been given that structural and semantic meaning. Yes, I'm referring to the DIV with the ID of "header" here.

    
			<div id="header">
				<img src="http://www.example.com/images/logo.png" width="200" height="80" alt="Example Logo" title="">
			</div>
    Code (markup):
    The image, like all other files, is referenced absolutely to prevent any ambiguity or confusion as to where the resource is at with the search engines. It's also located inside an images directory. Now, I'm going to be a bit hard on myself here - the stylesheets and theme images should ideally be in a directory called /themes/ which would then contain the folder which has the theme-specific files, but I'm trying to keep this as simple as possible for the sake of this post. There, I said it.

    The file name could be better, such as "abc-widgets-logo.png" for example. I used PNG as a placeholder, but for most types of logos, I'd actually use a .GIF file instead, specifically because of how IE handles PNG files - and I'm not just talking about alpha-transparency issues either, I'm also referring to the way it handles gamma-correction as well. I try to keep as much of the logo's background out of the file as possible, instead preferring to use the DIV container the image is in as a hook for CSS background colors and images. Not only that, but if the background gets changed later on, chances are good that I won't have to open up Photoshop or Paint Shop Pro and re-edit the image to accomodate the new look. ;)

    The width and height are just placeholder values; make them match the size of the actual logo. As for the image's alt="" text, don't use "logo" or anything else like that. Instead, use the name of the Web site. In the case of "ABC Widget Factory" the alt text for the logo would literally be "ABC Widget Factory". Remember, the alt="" attribute is used to provide a textual equivilent of the image for those who cannot see it. Since a logo contains the text that makes up the title of the Web site, it is appropriate to use the site's name as the alt="" attribute value. The empty title="" attribute is there to squash a bug in Internet Explorer, but if you wanted to add some text to it, go right ahead. Just ask yourself if the PEOPLE who will be using the site will find it helpful and useful if it's there. If you don't think they will, leave it empty.

    
			<form action="http://www.example.com/search/" id="search-form" method="get">
				<div class="fieldset">
					<fieldset>
						<legend><span>Search This Site</span></legend>
						<label for="search-input">Enter your Search Term Here</label><br>
						<input id="search-input" name="search-input" size="25" type="text">
						<input class="submit" type="submit" value="Search">
					</fieldset>
				</div>
			</form>
    Code (markup):
    Moving on to the search form now. The first thing you'll notice is a DIV with a class of "fieldset" inside it. Contained within this DIV is - a fieldset. The fieldset is there for accessibility reasons - and since a fieldset must contain a legend, that's in there as well. The fieldset however cannot be styled properly cross-browser because of yet another bug in Internet Explorer. So what I do is kill the border and set the display to inline in my stylesheet, then style the DIV instead. Besides, there is a benefit to this in that you can still use the FIELDSET element as a CSS hook to create some very interesting looks, so it's not a total loss. Now, ironically fixing the IE bug reveals a bug in the Gecko rendering engine that powers Firefox (but it's the most standards complaint browser - yeah right, it's actually about as bad as IE when it comes to really advanced layouts, layouts that IE, Opera and Safari can apparently handle just fine). In this case it has to do with the legend. So a SPAN element gets wrapped around the legend text, which solves that problem right away. (For more information on styling fieldsets and legends, read The Legends of Style by John Faulds; I prefer the original to the "update" since it doesn't use any browser hacks.)

    Now, rather than diving for tables at this point, I just use the LABEL element to contain the text that is associated with the input box. Since the LABEL element has a required attribute (for="") which is associated with an input, I put in the attribute and gave it a value of "search-input". I then inserted a line break (<br>) after that and then set the input box on the next line. That box has an ID of "search-input" which clearly defines its association with the label that precedes it. I use a name attribute value of "search-input" as well so the form can hook into the back-end script that powers the search form. The submit button is on the same horizontal axis as the input box, and to structurally separate it from the other input, I gave it a class value of "submit". I used a class instead of an ID because the class can not only be reused, but it can also be targeted uniquely via the form element's ID attribute (therefore styles that reference #search-form .submit {} will only affect the submit button in the search form).

    
			<ul id="menu">
				<li><a href="http://www.example.com/">Home</a></li>
				<li><a href="http://www.example.com/page-2/">Menu Link 2</a></li>
				<li><a href="http://www.example.com/page-3/">Menu Link 3</a></li>
				<li><a href="http://www.example.com/page-4/">Menu Link 4</a></li>
				<li><a href="http://www.example.com/page-5/">Menu Link 5</a></li>
				<li><a href="http://www.example.com/page-6/">Menu Link 6</a></li>
			</ul>
    Code (markup):
    Okay, bear with me for a moment. Yes, I'm using an unordered list here to mark up my menu. Yes, the list has an ID of "menu" - after all, that's what it is, right? A list of links organized as a menu - hence the markup as an unordered list of links that have been given an unique ID. The pages are once again referneced with absolute URLs to prevent any ambiguity and confusion with the search engines, and the "page-#" text after the example domain name is just a placeholder. Such pages like "about" "contact" and so on would be there instead. Also note that while I did not use a file extension, you are free to do so on your page links - the search engines don't care what you use - whether it's .htm .html .asp .php, or so on. There are a couple of caveats though - do NOT link to an index file unless you want to experience first-hand the problems associated with duplicated content. This includes your home page. Just link to the directory or domain root instead and you'll be fine on that front.

    If your site uses a dropdown menu, this can be handled with just CSS, and a pinch of JavaScript for IE 5/6 - all you have to do is add a list INSIDE the list items. For information on how to do that, check out the Son of Suckerfish CSS based dropdown menu.

    
			<div id="content">
				<div class="wrapper">
					<!-- your main content block's contents go here -->
				</div>
			</div>
    Code (markup):
    Moving on to the main content area. This is the meat and potatoes of the Web page. The stuff that the search engines came to the site for in the first place. Now, you may be wondering why I didn't put this above the menu - the reason is simple. I want to ensure that ALL my pages get indexed; even if not all of them get indexed completely. I'd rather have 100% of my pages indexed 80% of the way rather than have 80% of my pages indexed completely. Not only that, but it also helps people on mobile devices as well - bandwidth ain't cheap, especially when you're literally paying for it by the kilobyte.

    You'll notice I added a DIV inside the content area with a class of "wrapper". This is used primarily as a CSS hook - when using floats and margins, it's literally the best way to force content above and below a container to wrap alongside it. It also uses the least amount of code possible, is very design-change friendly, and also can help ensure that the layout does not break when the text is resized.

    I'm not going to talk about how to structure the content of a page inside the main content area since there are too many types of pages that can be placed in here. What I will do is tell you to remove the comment and replace it with your content prior to ofering some general best practices.

    And there are quite a few of them.

    Starting off are page headings. According to the HTML and XHTML specifications, headings are used to identify and introduce the sections of content that immediately follow them. In the case of the H1 heading, that would be the content of the entire Web page. So it makes sense that there would be only one H1 heading per page. Its job is to tell the reader what the page is about, and since each page should have only one topic, it would make even more sense that if there are two or more competing topics, that they should each get their own pages with their own H1 heading.

    The H2 headings would thus be used to identify the major sections of the current Web page's content. Unlike the H1 heading, the H2 - as well as the other headings - should be used at least twice in sequence. If there's an orphaned H2, H3, H4, H5 or H6 heading, then there isn't enough content in that particular section to justify using it, so either get rid of it or add more content. Remembering how to write an essay from high school or college will really help here since the rules are essentially the same. :)

    H3s, H4s, H5s, and H6s follow the same rules as the H2 heading. Just remember that you cannot mix and match, nor can you skip them. A H1 followed by two H2s, one of which contains three H3s and a pair of H4s underneath one of those H3s, is semantically and structurally valid. A H1 followed by two H2s, one of which containing three H4s, is not. Neither is an H1 followed by two H3s. Descending importance is the name of the game here - just like an outline. Remember that, and you'll be fine.

    Just to recap, here's how a good heaidng structure would look:

    
<h1>Web Page Title</h1>
	<h2>Major Section Heading</h2>
		<h3>Minor Section Heading</h3>
		<h3>Minor Section Heading</h3>
	<h2>Major Section Heading</h2>
		<h3>Minor Section Heading</h3>
			<h4>Less Important Section Heading</h4>
				<h5>Insignificant Section Heading</h5>
					<h6>Least Important Section Heading</h6>
					<h6>Least Important Section Heading</h6>
				<h5>Insignificant Section Heading</h5>
			<h4>Less Important Section Heading</h4>
		<h3>Minor Section Heading</h3>
			<h4>Less Important Section Heading</h4>
			<h4>Less Important Section Heading</h4>
	<h2>Major Section Heading</h2>
		<h3>Minor Section Heading</h3>
		<h3>Minor Section Heading</h3>
    Code (markup):
    With most pages you probably won't go any further than the H3, but it is good to know that you can go further down if necessary. Remember that when marking up your headings, you are defining their structure, not their appearance. Need a heading to look larger or smaller than it really is? Give it a CSS style rule - it's that easy. Leave the semantics alone - not only will the search engines thank you, not only will your users thank you, but you'll also thank yourself the next time it comes to redesign the site because all you'll probably have to change are the stylesheet and some graphics, not page after page of HTML code.

    (Continued in the next post...)
     
    Dan Schulz, Jun 14, 2008 IP
    blueparukia, kloop and LawnchairLarry like this.
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ( ...continued from the previous post)

    Next up we have our links and images. As you know, the link consists of the anchor element, the href="" attribute, and the optional class, ID, rel and title attributes. Classes and IDs have nothing to do with SEO, but can be useful if you're using some advanced CSS-fu or need to have a script hook into them. The rel="" attribute on the other hand, does have some uses. You can use the "external" value to denote that it's an external link (mainly useful for using JavaScript to open a new tab or window instead of the deprecated - or obsolete - target attribute), or - and you can thank Google for this, "nofollow" to tell the search engines that "this is not the link you are looking for." Originally devised to block the flow of PageRank, Google now uses it to exclude links from its discovery processes as well (well, that's what they say anyway, some people have been able to "prove" otherwise, so the claim is debatable; I'm willing to give Google the benefit of the doubt here as sometimes people may not understand exactly what happened, accidentally tampered with an experiment, and so on). The last attribute to look at is the title attribute. This is used to provide extra information about the destination of thel ink. A good example of a title attribute would be "external link to article about the salmonella caused tomato recall". Keep the title attributes short, sweet, and to the point. If you are linking to an external page or resource, say so (this is a usability convention and has almost no direct bearing on SEO).

    Here's an example:

    
<a href="http://www.cnn.com/2008/HEALTH/conditions/06/11/tomatoes.salmonella.ap/index.html" rel="external" title="External link to CNN.com article about the salmonella caused tomato recall">FDA says it's 'very close' to identifying salmonella source</a>
    Code (markup):
    As for images, make sure your image file names are descriptive. If you have an image of a calico cat, then calico-cat.jpg would be a good file name to use for the image. Naturally such an image would need appropriate alt="" text, so let's say the image was of a calico cat with a litter of seven week old kittens. An appropriate use of alt="" text here would be "female calico cat with a litter of six healthy kittens" - if the page was about cats and kittens, the keywords used here would probably be "calico cat" "female calico cat" "kittens" and "litter of kittens" (makes sense). If you wanted to describe the image, you would then use the title="" attribute to do so. An example would be "Here is my calico cat, Sasha, with her seven week-old litter of kittens."

    It would thus look like this:

    
<img src="http://www.example.com/images/calico-cat.jpg" width="200" height="150" alt="female calico cat with a litter of six healthy kittens" title="Here is my calico cat, Sasha, with her seven week old litter of kittens.">
    Code (markup):
    Note: If an image is not contextual, it does not belong in the HTML code. Instead, serve it as a background image via an external stylesheet.

    Alt and title attributes do not hold much (if any these days) SEO weight of their own, but they can be used in combination with surrounding text to increase the relevance of the image and the text around it. If this was a Web page about a family's litter of kittens soon to be available for adoption, then content that informs the reader that the litter if kittens will be availabe for adoption in 6-7 more weeks would not only be appropriate, but relevant as well.

    Not that I mean to clear up any misconceptions, but the next FOUR elements I'll be talking about have a long history of being abused for SEO purposes as well. These are B, STRONG, EM, and I. The B tag is a presentational HTML tag (one of the few that are permitted) that is used to make an inline span of text visually bold regardless of a user agent's default display. It's bold, it's going to be bold, and the only way it's not going to be is if you change its display properties via CSS. If you're identifying a product or something of that sort, or need to make an inline span of text stand out when styling is disabled, this is the tag to use. Whatever you do, do NOT stick this inside a heading or attempt to sandbag them (by sandbagging I mean doing garbage like this: <b><b><b>blah blah blah</b></b></b>). Not only is it semantically unhealthy (since it doesn't add anything of value), but the search engines may also see it as an attempt to manilpulate their indexes - and they will slap you silly for doing so - often times without you even knowing it.

    STRONG on the other hand is a semantic HTML element meaning "strong emphasis or importance". Browsers are not required to display them as being bold - they're free to do whatever they please, but most (if not all) of them display them as bold anyway. This is not to be stuffed inside headings or sandbagged either. And in case you're wondering, search engines give both B and STRONG the same weight, but they are given less weight than headings (naturally so, given that headings are block-level elements while these are inline).

    If B is a presentational element that makes text bold, then I is the ever-faithful companion that's used to literally italicize inline spans of text. This element is best used to italicize books and ships' names, such as The Great Gatsby or the HMS Titanic. This is not to be used to give an inline span of text emphasis - instead, EM is.

    EM stands for "emphasis", and is used to give emphasis to an inline span of content. For example, back in the old days, when a child sticks a penny in an outlet and gets shocked, his father would look at him and say (with emphasis) "Don't you do that no more.". And like B and STRONG, EM and I are treated equally by the search engines (and thus given equal weight to each other).

    Don't forget other HTML elements as well, such as ABBR and ACRONYM. These stand for "abbreviation" and "acronym" respectively, and both make use of the title="" attribute. The first time you use an abbreviation or acronym on a page, mark it up with the respective tags, and be sure to include the title="" attribute to define it. A couple examples are below:

    
<abbr title="HyperText Markup Language">HTML</abbr>

<acronym title="Plain Old Semantic HTML">POSH</acronym>
    Code (markup):
    Note that Internet Explorer (up through version 6) does not support the ABBR element, so we're going to have to "cheat" a little bit to help people out who are still stuck (or comfortable) using these antiquated browsers. So to get around IE's bone-headed lack of support for ABBR, we're going to have to cheat. Here's what the code looks like:

    
<abbr title="HyperText Markup Language"><span title="HyperText Markup Language">HTML</span></abbr>
    Code (markup):
    It's not pretty, but it works.

    However, if used often enough, it can cause the site to be potentially flagged for a human review by Google - or worse, slapped with an automated penalty. If you're willing to give up on IE users who have JavaScript disabled or blocked, you can do this with the original ABBR code (the one without the SPAN).

    
function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML;
    reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
    newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
    document.body.innerHTML = newBodyText;
  }
}

window.onload = function(){
  styleAbbr()
};

isIE = (document.all) ? true:false;
    Code (markup):
    This script would go inside the library.js file that is linked inside the HEAD section of the page. What it does is replaces ALL instances of <abbr></abbr> with <span></span> while retaining the title attribute. I'm not going to describe HOW it works, but if you want to read more about it, then read styling <abbr> in IE over at www.sovavsiti.cz for more information (the script was copied from his article). One thing I do not like about this script is that it targets ALL versions of Internet Explorer. If it could be rewritten to target only IE versions through 6, then it would be perfect - no need for a conditional comment and the script could work in IE 5/6 without triggering in IE 7 and 8 (which is due out later this year). I'm not a JavaScript person, so I won't do it, but I do know it can be done employing some browser version detection (ideally it would have to be done by targeting IE versions less than 7, and then firing if the IE detected version matches - otherwise the call to the window load function doesn't get called).

    Next up are quotations. When quoting a block of text, make sure you use the BLOCKQUOTE element. This element has an attribute (cite) and requires a paragraph element inside it. Of course, the cite element gets used here as well to cite the source. Here's what it looks like:

    
<blockquote cite="http://forums.digitalpoint.com/showthread.php?p=8124087#post8124087">
	<p>
		"Dreamweaver is a steaming pile of overpriced crap - It can't
		handle 'real code', vomits up a mix of 1988 javascript and 2001
		HTML and claims that it's a website, and the only thing it can
		teach you about coding a site is how NOT to do it. My advice to
		ANYONE using dreamweaver is to deinstall it to recover the disk
		space, shred the manuals, burn the packaging, and use the CD
		for microwave art. If Dreamweaver is a professional grade tool,
		I'm inline to be the next Mahatma."
		<cite>deathshadow</cite>
	</p>
</blockquote>
    Code (markup):
    For inline spans of quoted text, the <q></q> tags would be used instead. Such as

    
The lyrics to <cite>Everclear's</cite> song <cite>I Will Buy You a New Life</cite> include following verse: <q>I will buy you that big house, way up in the west hills</q>.
    Code (markup):
    Notice the use of the cite element here. I'm citing the artist as well as the song, so in this case the citation is warranted via the CITE element, rather than I (for the song title). It's all about the context in which the element appears that governs how a tag or tag pair is used in a Web page.

    Enough of that though. This covers most of the major content area issues as it is; the more obscure ones are rarely encountered, so there's really no need discussing them here. Let's move on to the sidebar, shall we?

    
			<div id="sidebar">
				<!-- sidebar content goes here -->
			</div>
    Code (markup):
    I'm not a big fan of placing headings inside sidebars unless they contain relevant content that while being a part of the main page, deserves to be on its own. Otherwise, what I do is just use the proper markup for the job that I'm doing. The best practices I outlined above do apply here as well, so keep that in mind.

    
			<div id="footer">
				<em><span title="Copyright">&#38;169;</span> 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved</em>
				<ul>
					<li><a href="htp://www.example.com/page-7/">Footer Link 1</a></li>
					<li><a href="htp://www.example.com/page-8/">Footer Link 2</a></li>
					<li><a href="htp://www.example.com/page-9/">Footer Link 3</a></li>
					<li><a href="htp://www.example.com/page-10/">Footer Link 4</a></li>
				</ul>
			</div>
    Code (markup):
    Notice that I've given the copyright statement emphasis? I'm just using the DIV container as a generic container to hold the footer area's contents. Inside that I placed the copyright statement inside a pair of EM tags. Inside that, I put a copyright symbol inside a span and gave that a title attribute that reads "Copyright". Literary conventions state that it is not proper to include © and Copyright next to each other, and since I couldn't find a better way of expressing my intelectual property rights, I chose to settle on this. I'm not sure how "semantic" it is, especially in the literary sense, but at least it works for me. I could have used a paragraph here instead, but I chose the EM element to give the notice "emphasis", especially when styling is disabled. One way or another, that copyright statement is going to stand out. And yes the whole "Monster Under the Bed" and "All Rights to Scare Unsuspecting Children" lines are just placeholder text. If it was on my site, it would literally read © 2006-2008, Dan Schulz; All Rights Reserved, which clearly is not a complete sentence - it's a sentence fragment at best, and clearly not worth of a block-level element meant to denote paragraphs of text.

    After the copyright byline, I marked up a footer menu for demonstration purposes. All the instances of placeholders I mentioned back in the main menu section apply here as well, so keep that in mind. There's no need to include a class or ID since the footer menu can be referenced directly from the DIV (keeps the code weight down too), so all I have left to say is that that's a wrap. Le's see what the complete HTML code for this page template looks like, shall we?

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="content-language" content="en"> 
		<meta name="MSSmartTagsPreventParsing" content="true">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project -->
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print">
		<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld">
		<script type="text/javascript" src="http://www.example.com/scripts/library.js"></script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<img src="http://www.example.com/images/logo.png" width="200" height="80" alt="Example Logo" title="">
			</div>
			<form action="http://www.example.com/search/" id="search-form" method="get">
				<div class="fieldset">
					<fieldset>
						<legend><span>Search This Site</span></legend>
						<label for="search-input">Enter your Search Term Here</label><br>
						<input id="search-input" name="search-input" size="25" type="text">
						<input class="submit" type="submit" value="Search">
					</fieldset>
				</div>
			</form>
			<ul id="menu">
				<li><a href="http://www.example.com/">Home</a></li>
				<li><a href="http://www.example.com/page-2/">Menu Link 2</a></li>
				<li><a href="http://www.example.com/page-3/">Menu Link 3</a></li>
				<li><a href="http://www.example.com/page-4/">Menu Link 4</a></li>
				<li><a href="http://www.example.com/page-5/">Menu Link 5</a></li>
				<li><a href="http://www.example.com/page-6/">Menu Link 6</a></li>
			</ul>
			<div id="content">
				<div class="wrapper">
					<!-- your main content goes here -->
				</div>
			</div>
			<div id="sidebar">
				<!-- sidebar content goes here -->
			</div>
			<div id="footer">
				<em><span title="Copyright">&#38;#169;</span> 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved</em>
				<ul>
					<li><a href="htp://www.example.com/page-7/">Footer Link 1</a></li>
					<li><a href="htp://www.example.com/page-8/">Footer Link 2</a></li>
					<li><a href="htp://www.example.com/page-9/">Footer Link 3</a></li>
					<li><a href="htp://www.example.com/page-10/">Footer Link 4</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>
    Code (markup):
    Now all that's left to do is add content to the template and style it. Who wants CSS with that? :D
     
    Dan Schulz, Jun 14, 2008 IP
    Spider-Man likes this.
  5. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #5
    itcn, Jun 14, 2008 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It's actually HTML 4.01 Strict in this case, but that's beside the point. ;)
     
    Dan Schulz, Jun 14, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Here's a 'cleaner' version of that script to replace ABBR.
    var styleAbbrPrev=window.onload;
window.onload=function() {
	if (styleAbbrPrev) styleAbbrPrev();
	with (document.body) {
		innerHTML=innerHTML.replace(/<ABBR([^>]*)>([^<]*)<\/ABBR>/g,'<span class=\"abbr\" $1>$2</span>');
	}
}
    Code (markup):
    I figured if the you are going to use the script on a tag IE doesn't recognize - why in blazes would you leave the unrecognized tag in place? You are making a function for the onload, so why is there a separate function?!? The original was also a bit variable heavy for my tastes, and even if you KEPT the vars it was predeclaring them for no reason beside wasting bytes AND execution time. I also made it onload preserving so if other scripts are trying to deal with onload, so long as you do this LAST you won't have a problem.

    The biggest change though is stipping out the isIE check. Rather than waste time executing scripts for browsers that don't even need it, why not just put that into it's own .js and call it thus:

    <!--[if lt IE7]>
    <script type="text/javascript" src="fixIEAbbr.js"></script>
    <![endif]-->

    End of the sending the code to browsers that don't need it... I normally rail against using IE conditionals, but really THIS is what it was meant to do (not the stupid CSS tricks most people use it on)

    (sorry for the threadjack dan, but you asked for a version that didn't run in 7 or later)

    I'm wondering if there isn't a better approach to this, like using document.getElementsByTagName - but being it's an unknown tag in IE6/earlier you will get the list of tags, but the innerHTML will be empty.
     
    deathshadow, Jun 14, 2008 IP
  8. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #8
    Absolutely correct, my bad ... but still an awesome tutorial for others to learn from.
     
    itcn, Jun 14, 2008 IP
  9. nastynappy

    nastynappy Banned

    Messages:
    499
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Awesome tutorial !!!!
    but I think it would have been better if you taught us what does those meta tags actually do , but still, its great tutorial, thanks for this useful post :)

    btw what ABBR ?? :s
     
    nastynappy, Jun 14, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1

    Abbreviation. When you use an abbreviation, like say WWWA, you should mark it up to say what the abbreviation stands for - that way people who don't know what it means can just mouse-over or tab to it and see.

    Some examples:
    <p>
	Kei and Yuri are trouble-shooters for the 
	<abbr title="World Welfare Works Association">WWWA</abbr>.
	People often joke <abbr title="World Welfare Works 
	Association">3WA</abbr>? You girls are wrestlers, right?
</p><p>
	On the subject of wrestling, the <abbr title="World Wrestling
	Entertainment">WWE</abbr> used to be called the <abbr 
	title="World Wrestling Federation">WWF</abbr> until the World
	Wildlife Federation sued them for trademark infringement. Vince
	basically gave them the finger and renamed the company.
</p>
    Code (markup):
    It's an important tag from an accessability standpoint, that it often seems the majority of web developers never use and a great many have never even heard of - See BLOCKQUOTE, CITE, DFN, SAMP, ACRONYM, VAR, KEYBOARD, TH - basically if it's not DIV, SPAN, B, I, STRONG or EM, most developers can't seem to remember them and (incorrectly) throw classes in to do the job that we have tags to do.

    Personally, I'm sick to death of seeing:
    <td class="header"><div class="quote">

    It plays into what Dan is basically saying - Semantic markup. Put in tags that best describe WHAT your content is. At the same time, do not ABUSE a tag to apply meaning that is improper...

    What do we mean by improper?

    Calling a image a pargraph is a good example...

    Calling a sentence fragment a paragraph when it's not in content flow (like say, in the footer)

    Calling each menu item a paragraph or not marking them up as a LIST.

    Using a normal tag like DIV or TD for a heading (that's what H1..H6 and TH are for)

    Abusing a definition list on something that is NOT a list of terms and definitions. (you see this a good deal)

    This is a mistake people often make when they first start trying to be 'semantic' is they start throwing the WRONG tags at everything because they were told "everything needs to have 'meaningful' tags" - when quite often all they are doing is implying the WRONG meaning. DIV and SPAN exists for a reason too.

    How does this tie into SEO? Cleanly marked up code with a minimum of extra containers and meaningful tags applied to the CORRECT elements, combined with meaningful content of value will do more for the HEALTH of the site in terms of traffic than an entire cargo steamer stuffed to the gills with black hat SEO chicanery.
     
    deathshadow, Jun 14, 2008 IP
  11. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Well. I think this would be a more apprpriate way to do that:

    
<form action="http://www.example.com/search/" id="search-form" method="get">

  <dl class="def_list">

    <dt>Enter your Search Term Here</dt>
    <dd><input id="search-input" name="search-input" size="25" type="text"></dd>
    
    <dt>&nbsp;</dt>
    <dd><input class="submit" type="submit" value="Search"></dd>

  </dl><!-- close definition list -->

</form><!-- close form -->
    Code (markup):
    Then just style it via CSS - like this for instance:

    
.def_list {}

.def_list dt {
   clear:both;
   width:33%;
   float:left;
}

.def_list dd {
   width:66%;
   float:left;
   margin:0 0 0.5em 0.25em;
}
    Code (markup):
    IMHO definition lists are the best (and probably most semantical) way to mark up a form. The only problem I see is when some "list-item" would appear more than once in the form (then I wouldn't choose definition list probably) - fortunately that is not a case often with HTML forms.
     
    risoknop, Jun 15, 2008 IP
    Spider-Man likes this.
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Except that what you have as a DT is not a term, and what's in the DD is not a definition, AND even if that was semantically correct that's redundant since they ALREADY have semantic meaning - Specifically an input and it's label. Net result: you are saying it twice.

    ... and you lack a proper fieldset, meaning it's a total /FAIL/ from an accessability standpoint as well... In fact the definition list may in fact confuse the matter on devices like screen readers. We're talking about workarounds for EVERY browser being #DDD on styling a fieldset (mostly because the specification is absurdly vague on the subject) - that doesn't mean we shouldn't have one in there since for a lot of users they enhance navigation and accessability.

    Some proper indentation wouldn't kill you either ;)

    If we WERE to get rid of using a fieldset or worry about things like legends, there's NO reason to WASTE a definition list on throwing more UNNEEDED tags at it.
    <form action="http://www.example.com/search/" id="searchForm" method="get">
	<div>
		<label for="searchInput">
			Enter your Search Term Here
			<input name="searchInput" size="25" type="text" />
		</label>
		<input class="submit" type="submit" value="Search" />
	</div>
</form>
    Code (markup):
    Is all you need to do 99% of the formatting on a form people throw DL's, tables or all that other nonsense at for formatting... Hell I wouldn't even need floats most of the time. (and the DIV is mostly there just as lip service to get a block level container in there)

    Though unlike Dan's example, it's a /FAIL/ for accessability - which is why I say do it his way (though I tend to still nest my inputs inside their labels)
     
    deathshadow, Jun 15, 2008 IP
  13. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I have edited my definition list solution a little bit and added some basic CSS styling.

    I have added some ;)

    Anyways, according to HTML 4.01 Specification a dl can be used for pairing other than definitions, so it should be OK to use dl for forms... :confused:
     
    risoknop, Jun 15, 2008 IP
  14. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #14
    And as far as I know, there shouldn't be any accessibility issues. I could be wrong though. I haven't done much research about this.
     
    risoknop, Jun 15, 2008 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I have - some screen readers even choke on proper markup when it's applied incorrectly - and I'm not talking about third-rate software either. I'm talking about some of the better known ones, such as JAWS and Window Eyes.

    And think about it from this perspective - definition lists are meant to hold content, not containers. Is a form input content? No, it's just a container for holding other content. So what use does it have in a container meant to hold content?
     
    Dan Schulz, Jun 16, 2008 IP
  16. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #16
    From my testing this sorts it:
    http://www.ardfry.com/pngoutwin/

    I only have a windows machine, so I haven't tested on Mac or *nix.
     
    rochow, Jun 16, 2008 IP
  17. Loy Maben

    Loy Maben Peon

    Messages:
    298
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #17
    DAN
    hats off to you
    you always give such useful info
     
    Loy Maben, Jun 17, 2008 IP
  18. LawnchairLarry

    LawnchairLarry Well-Known Member

    Messages:
    318
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    118
    #18
    There goes your chance of becoming a DMOZ editor. Otherwise, it's an excellent HTML tutorial, Dan!

    BTW, what's the use of declaring the document language in both the HTML element (<html lang="en">) and the meta-element (<meta http-equiv="content-language" content="en">)?
     
    LawnchairLarry, Jun 24, 2008 IP
    Dan Schulz likes this.
  19. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Isn't that (there goes your chances of becoming a DMOZ editor) the 5th time you've said that, Larry? ;)

    As for the lang and http-equiv/content attributes, they're used to tell search engine spiders and screen readers what the language the document was written in is. Primarily screen readers and other assistive devices, but the search engines do "piggy-back" on this important accessibility feature.
     
    Dan Schulz, Jun 24, 2008 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #20
    ... and as with a good number of other things that have two different ways of being declared, you end up being 'safest' using both methods just becasue some programs will only read one or the other.

    For example, if you are putting out XHTML in hopes of parsing it in a XML engine, it's harder when doing sequential parsing to pull a specialty attribute off a unique tag, than it is to parse the name and value attributes off a common element type.

    Meanwhile, certain browsers (IE for example) pretty much ignore the existance of meta tags.

    When in doubt, especially on something as important as the language declaration, doing both is the 'safe' approach.
     
    deathshadow, Jun 24, 2008 IP
Page 1 of 2