Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
A:
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.
SeanJA
2010-03-30 11:35:28
Indentation definitely matters else the code looks annoying..
Hulk
2010-03-30 11:39:38
+1
A:
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
- Proper indentation
- Resisting the temptation to add too much markup i.e. keep the markup simple
- Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
- Avoid deprecated tags e.g.
<font> - Choosing generic class names e.g. mainHeader instead of largeRedHeader
- Use classes for repeating elements and ids for elements that appear once
- Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
Nick Allen - Tungle139
2010-03-30 11:47:16
+1
A:
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Petri Pennanen
2010-03-30 12:01:38
+1
A:
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
SHiNKiROU
2010-03-30 23:19:37
+1
A:
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello <a href="http://somewebsite.com/">World</a></p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello <a href="http://somewebsite.com/">World</a></p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Sohnee
2010-04-07 12:06:58
@iconiK - well spotted! Indentation rules don't help too much with inline elements as the standard is to not wrap them! I will edit the example to correct that, but +1 for the eagle eye!
Sohnee
2010-04-08 07:38:45
That's the reason I usually also indent the contents of the <p>, so it's clear where the inline elements start and end.
iconiK
2010-04-08 08:41:08