Link to home
Get AccessLog in
Avatar of isnoend2001
isnoend2001Flag for United States of America

asked on

help validating the <p> tag with align attribute

The validator is giving me this error
the align attribute on the p element is obsolete. Use CSS instead.

    <P class="font12" align="right"><a href="#top">Return to the Top</a></p>
How can i write this ?
SOLUTION
Avatar of Adrian Crabtree
Adrian Crabtree
Flag of United States of America image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
SOLUTION
Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
I agree with ChrisStanyon of using a separate CSS file for all your styles. However, if this is just one time case, you could just use the inline styling method:

style="text-align:right"

Open in new window

instead of
align="right"

Open in new window

if this is just one time case,

That actually is how you end up with impossible maintenance.  Any inline style will override what is in a stylesheet.  Therefore anything you put inline becomes concrete and just gets in the way.  If you ever try to use that content within a theme that handles alignment with a class, you will break the theme.

In HTML5 the align attribute is not depreciated, it is obsolete, and any browser manufacturer can drop support for it without notice.

Cd&
@panterall - it's amazing how many times a 'one time thing' gets repeated over and over again. More often than not, inline styles start off as a quick hack, but quickly become a maintenance nightmare and it totally goes against the principle of separation between content and style.
Avatar of isnoend2001

ASKER

i added 3 classes to my css;
.pright { text-align:right; }

.pleft { text-align:left; }

.pcenter { text-align:center; }
Both ChrisStanyon and COBOLdinosaur are right. I did not mean it that way. I am a CSS evangelist ad well i do not like maintaining code line by line.

Apologies for the confusion.

Isnoend2001 i am glad you got it working!
@isnoend2001 - pleased you got it working and thanks for the points but the way you did is not considered 'good practice'. You are tying a style to an HTML element. Take your original example

<p class="pright"><a href="#top">Return to Top</a></p>

This is hardcoding an (implied) association between that paragraph (CONTENT) and the right alignment (STYLING). As discussed earlier, imagine if you have that on 500 pages and for some particular reason (new design requirements etc.), you decide that it no longer looks good aligned to the right and you want it aligned to the left - what are you going to do. You either search and replace 'pright' for 'pleft' in all of your 500 pages, or you edit your CSS, so it reads::

.pright { text-align:left; }

That just makes no sense and adds to the overall maintenace nightmare.

A better way would be to do something like this:

<p class="returnToTop"><a href="#top">Return to Top</a></p>

That class assignment is always going to make sense, and you can then completely change the look of all returnToTop links on all 500 pages simply by editing one line of CSS:

.returnToTop { text-align:left; color:red; border-top: 1px solid red; font-size: 10px; }
or
.returnToTop { text-align:right; color:blue; font-style:italic; }

That's the beauty, power and simplicity of CSS ;)
ChrisStanyon thanks for your feedback. i try to use descriptive names and i am a big fan not hard coding, but on the other hand I do not want get to a point where I don't want to do something because i might want to change it later.

 This is exactly why I make full use of include files. eg i have a tons of asp include files for just about everything header, menus with hyperlinks, footers

i am at a lost to see how returnToTop variable name refers to a <p> that is right aligned text.

In thinking back over writing my site i cannot remember using right aligned text very often,

But have hundreds of center aligned text especially in spans and a lot of left aligned text.

I have tons of this <div align="center">

<span class="BfontWhite12">Popular Roof Materials</span></div>

I remember a few years ago I changed all the <center> </center>
 to <div align="center"> </div> because the <center> tag was outdated.
now i feel i am losing the ability to code, because it may not written properly
if i was to code that returnToTop like you suggested for right aligned text. What would be the correct way for left and centered text ?
My point is that your class names should be used to describe the functionality of the particular elements, not the styling.

A class name of 'returnToTop' has absolutely nothing to do with right aligned text - it describes the functionality of a particular element. You then style that class in your CSS any how you like. If you want all Return To Top links, aligned right, then you add that to the CSS. If  you then want them aligned left, you simply change your CSS. Either way, your HTML still makes sense and should never need changing!

Again, take this example:

<div align="center"><span class="BfontWhite12">Popular Roof Materials</span></div>

You've hardcoded that fact that this text is going to be centred. You have also implied that it will always be white and 12px. Now think about what you need to do if you decide to change that to be left aligned, red and 15px!!

Lets assume for a minute that it's sub-heading. A better option would be to use either a suitable heading tag, or at the very least a functionally descriptive class:

<div class="mySubHeading">Popular Roof Materials</div>
<h3>Popular Roof Materials</h3>

You CSS would look like:

.mySubHeading, h3 { text-align:center; color:white; font-size:12px; }

and if you decide you want to change the style, all you need to do is change the CSS.

.mySubHeadings, h3 { text-align:left; color:red; font-size:15px; }

Again, your HTML stays semantically correct, and doesn't need changing!! Is any of this making sense yet??

As for the correct way to code for left and centre text, that's no different. By default most elements align left without any styling, so there's generally no need to style that. As for centred text, it depends on what part of your site is being centred. This is where you need to think through your design, because you should be designing based on functionality.

Let's say for example that throughout your site you have info that you want to draw attention to. You decide these elements should be centred, blue text, bold, with a border. Instead of adding a class such as 'blueboldcentre', you would be better off adding a class of 'popout' or 'attentionGrabber' or 'lookAtMe' and then styling that in your stylesheet

.lookAtMe { color: blue; text-align: center; font-weight:bold; border: 1px solid blue; }

if you change your mind about how you want your popouts to look, simply change 1 line of CSS:

.lookAtMe { color: green; font-size:18px; font-weight:bold; border-bottom: 2px solid green; }

AGAIN...your HTML remains valid, it make sense, it isn't swamped with inline style and changes to the presentation don't need changes to the content.

IT'S WHAT CSS IS FOR :)

FYI - changing the <centre> tags for 'centre' attributes simply replaced one deprecated element with another :(
Thanks ChrisStanyon for taking the time to add all that, It really does clear up a lot of things
The fact that text is left aligned by default I thought that but was never really sure. almost all my pages have 3 menus on the left side all have the same hyperlinks the 149 asp pages are easy to change i just change the include files

it's the 49 .htm pages. I wish i could change them to asp, but they rank high in the search engines as well as from other sites.

i still use FrontPage 2000 (stop laughing) mostly to save on typing and for site structure.
It has a Find-replace function with selections for replace on this page only or every page.
have used the one page a few times, but the never whole site. Would make sure to back everything before doing a whole site replace. don't trust frontpage that much.

After reading your very informative post i have decided to do this:
3 classes for menu titles with background color and BfontWhite12 centered text eg;
.estimating
.howto
.poproofmaterials
These have not changed in 10 years and I see not changing in the next 10.

I am going to miss updating the one page i constantly edit;
http://www.roofgenius.com/links.htm
In frontpage i click the the bottom row and press tab
it adds another row. I paste the url title into the cell highlight it and click the hyperlink icon
then paste the description into the next column.
highlight a row a click delete row and the row is removed.
this may be possible with css I will probably be asking when i get to that page
which is way down on my list. I am starting this conversation to css with my most popular pages. eg:
http://www.roofgenius.com/roofmaterialchoices.htm
http://www.roofgenius.com/roofpitch.htm
thanks for being here I will be bugging you,sorry





.
No worries. It will eventually sink in and make sense and when it does you will see the immediate benefits of doing what I'm advocating.

There's no reason to edit the links page any differently than you always have. It's displaying tabular data so keep it in a table. I would make use of proper class names and remove all the inline styling. Look at the table and you'll se you are using a class called font12 that sets the font-size to 10pt. A clear illustration of the point I made earlier - it makes no sense.  It may be that you don't even need class names in a table like this - add an ID to the table, and then use TH for the links and TD for the description. Have a look at the following fiddle. You will see that there is absolutely no styling or unnecessary tags in the HTML.

http://jsfiddle.net/ChrisStanyon/cErdG/

Unfortunately, you will never get clean code like this using FrontPage - you need to code by hand.

Good luck with it.

Chris
Thanks ChrisStanyon sure looks better better than mine. That would take me a week to write that. when i get to that page I am going to use your example code.
thanks for adding it