Forum Moderators: open
The site in question uses nothing but basic HTML, CSS, and one very tiny bit of Javascript. This is also the first site I've made using CSS (instead of tables) and in one of the CSS how-to's I came across, it used this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...and I've sort of adopted it for this site. The only thing is, I have no idea if it's what I should be using. So uh, IS this what I should be using? If not, what do you think it should it be?
Thanks in advance.
However you should out of curiosity going to the WC3 and validate your markup. [validator.w3.org]
In light of that thread you should develop by using HTML strict
again W3C will give you the pointers.
[edited by: encyclo at 11:03 pm (utc) on June 11, 2006]
[edit reason] fixed link [/edit]
For a CSS-based (table-less) design, HTML 4.01 Strict is the best choice. You can use the following doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Make sure you validate your markup, as henry0 suggests. :)
I tried validating using that DOCTYPE, and I get a few errors like:
no attribute "BORDER"
no attribute "ALIGN"
no attribute "TARGET"
element "U" undefined
But if I use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
...it's all good. What the difference?
For example, since "BORDER," "ALIGN," "TARGET," and "U" can no longer be used, what are their valid replacements?
I know I can use <div style="text-align: center"> to align text, but what about images?
Thanks again.
For example, since "BORDER," "ALIGN," "TARGET," and "U" can no longer be used, what are their valid replacements?
Border is presentational. You should be using CSS for this. For example, in the head of your document:
<style type="text/css">
.sideBar { border: 1px solid red; }
</style>
Then in your body:
<div class="sideBar">...</div>
Align is presentational. Use CSS for this as well. If you're looking to have an image "float" left or right, then use the float style:
img { float: right; }
U is presentational. The CSS rule would look like this:
text-decoration: underline;
Target is depreciated. That is, the HTML specs don't think you should be opening up windows for the user, and instead the user should decide whether or not to open a link in a different window. If you must use Target, then you'll need to use the Transitional DTD instead of the Strict.
I know I can use <div style="text-align: center">
You should avoid inline styles if your goal is maintainability. Putting styles inline is almost no better than tag soup. Only use inline styles if you have some code fragment that might be shared among different apps where you don't have control of the <head> to include styles.
Hope that helps.
Border is presentational. You should be using CSS for this. For example, in the head of your document:<style type="text/css">
.sideBar { border: 1px solid red; }
</style>Then in your body:
<div class="sideBar">...</div>
The "border" that caused the validation error was for an image. How would I specify in my external css file that I want every single image to have a border of 0?
Align is presentational. Use CSS for this as well. If you're looking to have an image "float" left or right, then use the float style:img { float: right; }
I'm actually trying to center the image. I'm looking to replace this code with something valid:
<div align=center><img src=blah.gif></div>
U is presentational. The CSS rule would look like this:text-decoration: underline;
I know I can use <div style="text-align: center">
You should avoid inline styles if your goal is maintainability. Putting styles inline is almost no better than tag soup. Only use inline styles if you have some code fragment that might be shared among different apps where you don't have control of the <head> to include styles.
Ok, so let's say I wanted to remove all inline styles. How exactly would I, for example, underline one word of text and not the other 499 words around it? (Or, align one sentence in the center, not not anything else?)
Thanks again.
The "border" that caused the validation error was for an image. How would I specify in my external css file that I want every single image to have a border of 0?
img { border: 0; }
I'm actually trying to center the image. I'm looking to replace this code with something valid:<div align=center><img src=blah.gif></div>
CSS:
#blah { text-align: center; }
HTML:
<div id="blah"><img src="blah.gif"></div>
Ok, so let's say I wanted to remove all inline styles. How exactly would I, for example, underline one word of text and not the other 499 words around it? (Or, align one sentence in the center, not not anything else?)
Use semantic HTML and then apply the styles to those elements. If there is no semantic meaning to some of your content, then use generic <div> or <span> elements and give them class or id attributes to give them pseudo semantic meaning. For example:
CSS:
p { text-align: left; }
.number { text-decoration: underline; }
p.singleQuestion { text-align: center; }
HTML:
<p>
Ok, so let's say I wanted to remove all inline styles. How exactly would I, for example, underline one word of text and not the other <span class="number">499</span> words around it?
</p>
<p class="singleQuestion">(Or, align one sentence in the center, not not anything else?)
</p>
The HTML does not include any presentational hints. It's semantically correct, and has some psuedo semantics applied via the classes "number" and "singleQuestion". Given more time, I may have come up with something better than "singleQuestion", but I just wanted to give you a quick example.
I corrected everything except the image borders. Can you give a little more detail to the img { border: 0; } code? Where it should go, what I then need in the html (if anything).
The only thing not validating as of right now is the "Add to del.icio.us" code which is:
<a href="http://del.icio.us/post?url=http://www.mysite.com&title=The%20Name%20Of%20Website">
These are the errors:
cannot generate system identifier for general entity "title"
general entity "title" not defined and no default entity
reference to entity "title" for which no system identifier could be generated
Is there a way to fix that, or should I just ignore it? Thanks again for you're help.
Can you give a little more detail to the img { border: 0; } code? Where it should go, what I then need in the html (if anything).
You don't need anything special in the HTML in this case becuase it's applying to the style to all images.
Here's a snippet of code to help give you an idea:
<html>
<head>
<title>Test</title>
<style type="text/css">
img { border: 0; }
</style>
</head>
<body>
<!-- These images have no border because of styles -->
<img src="...">
<img src="...">
<img src="...">
</body>
</html>
The only thing not validating as of right now is the "Add to del.icio.us" code which is:
<a href="http://del.icio.us/post?url=http://www.mysite.com&title=The%20Name%20Of%20Website">These are the errors:
cannot generate system identifier for general entity "title"
general entity "title" not defined and no default entity
reference to entity "title" for which no system identifier could be generated
You have an ampersand (&) in your URL. Ampersands need to be escaped in URLs. Just replace & with &
For example:
href="http://del.icio.us/post?url=http://www.mysite.com&title=The%20Name%20Of%20Website">
Change that to:
href="http://del.icio.us/post?url=http://www.mysite.com&title=The%20Name%20Of%20Website">
Thanks again for all your help. It is very much appreciated.
