Avatar of isnoend2001
isnoend2001
Flag 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 ?
CSS

Avatar of undefined
Last Comment
isnoend2001

8/22/2022 - Mon
SOLUTION
Adrian Crabtree

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
panterall

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
panterall

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

COBOLdinosaur

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&
Chris Stanyon

@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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
isnoend2001

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

.pleft { text-align:left; }

.pcenter { text-align:center; }
panterall

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!
Chris Stanyon

@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 ;)
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
isnoend2001

ASKER
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 ?
Chris Stanyon

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 :(
isnoend2001

ASKER
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





.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Chris Stanyon

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
isnoend2001

ASKER
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