homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Webmaster General
Forum Library, Charter, Moderators: phranque & physics

Webmaster General Forum

Proper Coding and Paragraphs
Probably a stupid question about code

 10:04 am on Sep 18, 2008 (gmt 0)

Every time I look at the code on my pages, I find it difficult to sort through all the code to find errors or sloppy coding because there is just so much code which I believe may be supurfluous!

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]



 10:54 am on Sep 18, 2008 (gmt 0)

Sounds as if your editor is:
1. Creating redundant code
2. Creating out of date code

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.


 11:28 am on Sep 18, 2008 (gmt 0)

Thanks for the response piatkow!

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>

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]


 1:33 pm on Sep 18, 2008 (gmt 0)

You need to investigate and learn CSS and familiarize yourself with the W3C code-validator (and doctypes).

Experiment with a single page and cut it down to its simplest form (that displays correctly).

You should then know enough to work out how best to proceed.



 9:40 pm on Sep 18, 2008 (gmt 0)

Thanks Kaled, The page actually does validate believe it or not ... as do all the others.

Using <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]

Fortune Hunter

 9:46 pm on Sep 18, 2008 (gmt 0)

You need to investigate and learn CSS

I would agree, a lot of this superfluous code will go away.

My site is 8 years old

You would probably benefit a great deal from a major overhaul of the site and update everything using CSS. I think you would be very happy with the end result.


 11:36 pm on Sep 18, 2008 (gmt 0)

Using <br><br> will insert a blank line.

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.



 3:57 pm on Sep 19, 2008 (gmt 0)

There are three concepts that might help you. Google [keyword] site:webmasterworld.com for many threads on semantics, tableless, deprecated.

Semantics are important because documents are meant to have a particular structure:

head 1
head 2
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>

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! */
<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>

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.


 5:07 pm on Sep 19, 2008 (gmt 0)

Don't use two blank lines between paragraphs, use proper paragraph tags around the paragraph.

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>

styled by:

div.ContentText p { ... ... }

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Webmaster General
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved