Jump to content
xisto Community
SilverFox1405241541

Coding Html Properly In The New Age

Recommended Posts

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).

 

<center><H3>Types of Staff</H3></center><H4>Administrators: <i>SilverFox, Danmidas</i></H4>
Above: Bad Code

Below: Good Code

 

<center><h3>Types of Staff</h3></center><h4>Administrators: <i>SilverFox, Danmidas</i></h4>
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.

 

This is a more normal, bad HTML code.<br><br>I'm not using self closing tags. <BR> Now I just used a capital one. Big bad-bad :P <hr>
Above: Bad Code

Below: Good Code

 

This piece of code is better. <br /> <br /> I just used self closing tags. <br /> and I didn't use a capital. <hr />
Make your Documents "well-formed"

 

Form them right.

 

<p>here is an emphasized <em>paragraph.</p></em>
Above: Bad Code

Below: Good Code

 

<p>here is an emphasized <em>paragraph.</em></p>
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).

 

<td rowspan=3><br /><a href=site goes here.net>
Above: Bad Code

Below: Good Code

 

<td rowspan="3"><br /><a href="site goes here.net">
Always quote attributes.

 

DocType

 

Most of us use

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
I recommend using:

 

<!DOCTYPE html 	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	 "http://forums.xisto.com/no_longer_exists/;
This is the way to the future.

 

Thanks

 

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

Edited by SilverFox (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 B).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.

Share this post


Link to post
Share on other sites

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 B) But I know that some people who come to asta surprisingly have almost no coding background, look at me.

@Chesso: I see.

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

I know I'll add that. I was speaking mainly of the actual code though :)
Edited by SilverFox (see edit history)

Share this post


Link to post
Share on other sites

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 B)

Share this post


Link to post
Share on other sites

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 B).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

 

<H3>Types of Staff</H3></center><H4>Administrators: <i>SilverFox, Danmidas</i></H4>
Above: Bad Code

Below: Good Code

 

<h3>Types of Staff</h3></center><h4>Administrators: <i>SilverFox, Danmidas</i></h4>
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.

 

This is a more normal, bad HTML code.<br><br>I'm not using self closing tags. <BR> Now I just used a capital one. Big bad-bad :P <hr>
Above: Bad Code

Below: Good Code

 

This piece of code is better. <br /> <br /> I just used self closing tags. <br /> and I didn't use a capital. <hr />
Make your Documents "well-formed"

 

Form them right.

 

<p>here is an emphasized <em>paragraph.</p></em>
Above: Bad Code

Below: Good Code

 

<p>here is an emphasized <em>paragraph.</em></p>
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).

 

<td rowspan=3><br /><a href=site goes here.net>
Above: Bad Code

Below: Good Code

 

<td rowspan="3"><br /><a href="site goes here.net">
Always quote attributes.

 

DocType

 

Most of us use

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
I recommend using:

 

<!DOCTYPE html 	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	 "http://forums.xisto.com/no_longer_exists/;
This is the way to the future.

 

Thanks

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

Share this post


Link to post
Share on other sites

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. B) 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 /> :(

Share this post


Link to post
Share on other sites

Good tutorial!!!

 

Is a well done reference to keep well maintained HTML code. In FCKEditor I noticed that when you look at the source code(clicking the button: source), the code is perfectly indented, well-formed and normalized. The same with Nvu(HTML editor based on Firefox) that is wonderful but only for HTML. When You edit the code and go back to preview mode, the engine reconstruct the code, generating a validated version to be rendered for the engine.

In my experience I learned to use only the needed tags. Bad code is rendered slower and isn't compatible with common browsers: Internet Explorer(IE), Firefox(FF), Safari. Some sites are using different versions of the same view for every browser. I prefer to have one unique code, compatible, tested and stable.

 

Talking about the use of DIV instead TABLE and P. I hate to see <DIV></DIV> instead <br /> or <BR>. Many people doesn't care about the code, they only use Dreamweaver or similar, then go to IE... if looks "OK" they think that the work is finished. There is another coders that did not used CSS rules good, then DIVs are a nightmare, because sometimes internal DIVs incorrectly inherit the font-style, margin and alignment. I hope that CSS3 improve drastically the way that HTML is coded.

 

In that while we still have to fight with clients that are still using IE 5.5 or 4.0, Netscape, Old Firefox 1.0.3 clones, etc. I know that some people uses XML to HTML converters, the problem is that this practice requires many CPU load, they have to use caching... Is terrible to have all this complications but is the way this world runs.

 

Have a good coding.

 

Blessings!

Share this post


Link to post
Share on other sites

Thats pretty good info for the rookie web developers out there. You covered the basis on xhtml and efficient coding techniques. I sometimes find myself messing up my nests of tags haha, But I eventually clean it up in the end. XHTML is definitely the future and will replace html itself soon. Now with the transfer of the new technology which is ajax, more people will try to learn xml which will make them eventually use xhtml style syntax. I just wish I could make more projects for myself so that I could perfect my skills.

Share this post


Link to post
Share on other sites

I just build everything for FireFox and it seems to generate, not good but usable in Internet Explorer 5/6 and presumably above.

 

I have no idea why anyone would replace <br /> or <br> with a <div> tag unless they are looking for specific control over the spacing between line breaks (unless the br tag can be styled to get the same effect?).

 

P.S.: Ajax is getting old and well out-dated, majority seem to be going PHP.

Share this post


Link to post
Share on other sites

P.S.: Ajax is getting old and well out-dated, majority seem to be going PHP.

Yeah, I have no personal experience with Ajax... But I am going to change as much as I can over to PHP.

I haven't really coded any website at ALL in like two years now and I'm trying to get back into it.

The last time I did... It was a small crappy website that was pretty much all HTML with a TINY bit of CSS. (I really hate CSS so I avoid using it as often as physically possible... Even if it's more efficient, I don't like how it's set up)

 

Anyway

As I was saying, just an hour or two ago I was reading up about PHP tutorials and such because I really need to learn more languages/whatever.

 

I'll soon need to start actually coding my website though, because people are starting to demand it of me and I've been wanting to make a new website for years... My only problem has been that I can never find a theme for it that requires the attention of other people... I think I've found one though...

But I'm starting to get way off topic, I apologize. <___<

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.