Forum Moderators: phranque
So here's my question ... is there a good reason why you need to start every paragraph in a block of writing with:
<font color="#000066" size="2" class="ContentText>
and end with </font></p>?
isn't it cleaner and easier to read if you just use 2 <br> between paragraphs?
I have never understood the need. Can someone explain?
[edited by: Liane at 10:07 am (utc) on Sep. 18, 2008]
Switching to better editing software would be a good start.
If you want to use a single font for the body of every page in the site then the best option would be to shift this definition to a separate stylesheet. You should be loosing the font tags anyway as they have been deprecated in html for some time.
Personally I find that the P tag, used properly, makes code easier to read than by sticking in extra BR tags. Its not good coding but if you are not inserting any additional attributes you can get away without closing your P tags.
My site is 8 years old and was created using Dreamweaver. I can't remember which version.
I now have Dreamweaver 7.0.1
The code is driving me crazy because the new Dreamweaver sticks in new code amongst the old code and I have no idea what is supposed to be there and what isn't. It looks like a dog's breakfast! For instance:
<td width="300"><p><span class="ContentText"><font size="2" color="#000066" class="ContentText">Generic sample content text. Generic sample content text. Generic sample content text.</font></span></p>
<p><span class="ContentText"><font color="#000066" size="2" class="ContentText">More generic sample content text.</font></span></p>
<p><span class="ContentText"><font color="#000066" size="2" class="ContentText">Yet more generic sample content text.</font></span></p>
<p><span class="ContentText"><font color="#000066" size="2" class="ContentText">Generic sample content text again!</font></span></p></td>
</tr>
This kind of crap is all over my site on every page.
I have some time right now to clean it up page by page ... but as being a webmaster is not my profession, it is somewhat difficult to know exactly what to do and where to start.
Any suggestions gratefully received!
[edited by: phranque at 9:23 pm (utc) on Sep. 18, 2008]
[edit reason] exemplified content text [/edit]
Using <br>
<br>
makes it display correctly and is pretty simple. I just thought someone may have an explanation as to why it does this and if there was a simpler (cleaner) way to do it. Thanks anyway ... I'll look into it.
[edited by: Liane at 9:40 pm (utc) on Sep. 18, 2008]
Using <p>...</p> will insert space according to CSS rules.
The latter is better a) because it gives you finer control and b) because it easier to change the style of the whole page (only one rule change is required).
I sometimes use a load of <br>s at the end of a page to allow additional scrolling, but it's not the best way to do it.
Kaled.
Semantics are important because documents are meant to have a particular structure:
head 1
Paragraph
head 2
paragraph
list
head 3
paragraph . . . .
True, two break tags add a space like a paragraph does, without adding space above. Visually, it does the same thing. But beneath it all, it's a poor approach to constructing a semantic document. By approaching the document from a semantic viewpoint instead of presentational, you begin to understand why a break tag is like a wedge holding up the house, when what you really need is a foundation.
The font tag has been deprecated since (I believe) 1999. I am still amazed that WYSIWYG editors still generate this element.
The concept of semantics leads to tableless layouts as well. Using tables for layout is a topic of high debate, but the bottom line is that it makes for documents with poor semantic structure. When a table is encountered, it should be tabular data.
So using your example:
<td width="300"><p><span class="ContentText"><font size="2" color="#000066" . . . . . . </span></p></td>
</tr>
Creating an equivalent, semantic approach is easier than you think:
<style type="text/css">
.ContentText { width: 300px; }
.ContentText p { color: #000066; font-size: 2px; }
/* I hope this isn't supposed to be visible text, 2px! */
</style>
.....
<div class="ContentText">
<p>Generic sample content text. Generic sample content text.</p>
<p>More generic sample content text.</p>
<p>Yet more generic sample content text.</p>
<p>Generic sample content text again!</p>
</div>
The most common reason for throwing in a couple wedges (break tags) is because "I want the space between, not above." Add to the style:
.ContentText p { color: #000066; font-size: 2px; margin-top:0; }
And you've just made the <p> into a "break tag" while keeping document semantics intact.
One line of CSS in an external file can style them all.
I never use line breaks, font tags, or inline CSS.
<div class="ContentText">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
styled by:
div.ContentText p { ... ... }