Coding Html Properly In The New Age

In all your html there are things you want to follow.

Always use lowercase for your HTML Tags
Don't use upper case. Upper case is bad (this can be hard to do if your like me and tend to write <I> and then </i> for closing:P).



Above: Bad Code
Below: Good Code



Use Self-Closing Tags
In html certain tags (ex. img, br, hr) didn't need closing tags. However its best to write them with something called self-closing tags.



Above: Bad Code
Below: Good Code



Make your Documents "well-formed"

Form them right.



Above: Bad Code
Below: Good Code



Might take you a while to pick up on thise one. In the first example the <p> was closed then the <em>. However that's over-lapping and it isn't good.

Always Quote

Some might have a problem with this thankfully I never have (writing the bad code in the example I found I had written it right without trying).



Above: Bad Code
Below: Good Code



Always quote attributes.

DocType

Most of us use



I recommend using:



This is the way to the future.

Thanks

EDIT: Added <center> to examples that didn't have a start tag.

 

 

 

Comment/Reply (w/o sign-up)

Interesting enough the new way of coding has been talked about since xhtml was introduced back in 2000 I think, so it's nothing really new if your coding career start with the xhtml era. Of course the books I have been coming across with recently show like ot emphasize that particular note as well including the use of the "&" symbol in your html coding.

One thing I do like to comment on is the doc type which I recently found out myself, you really don't need to use XHTML doc type if you don't plan on using XML with in your site, HTML 4.01 strict is the closes thing to xhtml then it can get with some minor differences. Although people have been using xhtml since it first came out since it was cleaning, some designers especially those who make web template still use html 4.01.

But hte one thing I thought was a bit annoying was the fact you need to close every tag in your document like <br> and image tags, I think was a bit unnecessary of course I haven't heard to much about xhtml 2 yet so who knows what they changed with that coding structure.

Another thing I would like to point out with the quote thing make sure your using the right quotes since most programming languages uses both " and ' within it's structure. Although a interesting topic it should cover more uncommon things that most designers don't know about or trying to figure out, especially now that ajax is coming around and you got all thes video and photo sites showing up.

 

 

 

Comment/Reply (w/o sign-up)

Well mostly self closing tags are there because these tags have no need for an additional close tag.

However, without some hard-coded checking, how will the parser know when these tags have finished? The answer was of course, self-closing them .


I also use the XHTML doctype (1.0 transitional).

By the way I am pretty sure P isn't a self closing tag, it stands for Paragraph and you normally have the paragraphed text within it (e.g. <p>This is a paragraph.</p>).

Oh and don't forget code indenting, it's extremely usefull for readability for future maintenance.

The simplest form is to push code in by 1 line, every time it goes inside of something else, and when you start closing those tags off, you start indenting back to the left side until the start tag which has no indendtation, ends up back that way.

Comment/Reply (w/o sign-up)

saint-michael, the reason I called it new age is you'd be surprised how many people are using non-XHTML compliant stuff.

This is about XHTML so " is the valid quote...at least for my examples.

And I don't know the uncommon things that often But I know that some people who come to asta surprisingly have almost no coding background, look at me.

@Chesso: I see.



I know I'll add that. I was speaking mainly of the actual code though

Comment/Reply (w/o sign-up)

I would also recommend avoiding the <center> tag. Instead, use <div style="text-align: center;">. What's more, the first tag isn't even supported in XHTML 1.0 Strict

Comment/Reply (w/o sign-up)

That is true that a lot of new people come to the forums some have little experience and of course the hundreds of questions are asked, of course you could say some new people don't have much forum experience either. Especially when they post the same question that 20 other people posted before.

thats why I pointed that different languages use both " and ', you could say that was a little reminder to be able to tell the difference. Well I know some big name sites are changing over and out of curiosity I looked at yahoo site and they are still using html strict . I even check google main page and they have no doc type whatsoever and filled with many errors . But like I said the only reason some are still not using xhtml, because they don't use anything that requires XML support. Then you have those who use pre-made templates and just stick with the original coding because the time consuming process it takes to convert tables to divs, I been going at it on and off for a couple of months and it is time consuming. But I won't talk about myspace coders because I would like to sleep good at night knowing that html coding is getting better and not worse .

Comment/Reply (w/o sign-up)

Hey now don't forget CSS's text-align property can have undesired effects (center text instead of an object/container or center both).

They really need one for text only and one for objects/containers.

Otherwise you got to use even more code to stop it from centering things you don't want it to.

Comment/Reply (w/o sign-up)

That's basically the tutorial for coding XHTML. Great tutorial! It's very straight forward and easy to learn in minutes.

Comment/Reply (w/o sign-up)

the only thing I don't understand is the center tag used in the Good Code examples, the </center>, but I don't see the start of it, and anyway, it is a bad idea to use center nowadays, so this is a new age html coding but with some (some, I saw one?) stone age elements. To say something funny, p tag isn't popular anymore or tables/tr/td/th everyone likes to use div, even though I don't believe in this, due to sometimes I need to use <p> to avoid using extra break lines <br />

Comment/Reply (w/o sign-up)

I personally don't use <p> either and I'll see if I left out the center...I know people like to use div but its not overly important to validating XHTML 1.0.

Comment/Reply (w/o sign-up)