HTML & XHTML: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
m (HTML & CSS Design moved to HTML & XHTML) |
(No difference)
| |
Revision as of 14:58, 18 April 2008
Various important things I noticed when writing HTML & CSS code.
HTML
Elements
- <span> elements are like DIVs, but inline.
- <textarea> elements are not block elements, they behave like inline elements. Actually they are inline-block elements, which means that their content is treated like a block, but the element itself is treated like an inline element.
- Most of the form elements (<label>,<input>,<button>) are inline elements.
- <div> elements are not permitted inside a <p> element; it is DIV elements that should englobe other elements, not the contrary.
- As much as possible, use elements like <strong>, <em>, <cite>, <h1>... Do not try to define styles that will render as these elements. Not only doing this adds better structure to the document, thus helping others to understand it, but it also helps for search engines (hopefully).
Embedding style sheets, JavaScript in HTML documents
- Not too sure about that, but it seems you can use a <link> tag only in the <head> section of the document.
- Do not use <link> for JavaScript code. You must use <script src="code.js" > </script> syntax. Avoid closing the <script> tag in the same element (eg, <script />); it won't work, and will completely confuse the browser! It is maybe possible to use <link> for JS code but then the <script> tag must appear in the file (untested).
Forms
- If you use the GET method on a form, on the action URL, don't give an URL already containing variables encoded in GET style. The browser will just rebuild the URL when you submit the form, and thus the variables will be ignored. Eg, something like:
<form action="myurl.html?myVariable=yes&myCounter=3" method="GET"><button type="submit></button></form>
won't work. If you want to pass variables and use a GET method, just create hidden input fields.
- If you want to provide a styled submit button (an image, or even more complex CSS), use the button element, not the input (with type=submit) element. To remove the actual button in a cross-browser way, you should:
- Set background-color: transparent; border: 0px.
- Set the height and width of the button to the dimensions of the images (height should actually be one pixel more, for Firefox).
- You can also use the <input type="image"> tag to generate a submit button.
Tables
- <div> elements are not permitted, only and .
- The <tbody> tag is not mandatory, but the element is. This means a tbody element will be created in the DOM even if you don't specify the tags in your HTML source. Be aware of this as it can lead to subtle errors if you manipulate the DOM later.
- You usually want the HTML attributes cellspacing and cellpadding set to 0 on your tables.
Inner Frames (iframes)
- DISCLAIMER: iframes are bad; do not use them if you can avoid that.
- POSTing to an iframe from the outside is possible, see the code below:
<iframe src='form_handler.php' frameborder="0" name="reference_tag" />
<form method='post' action='form_handler.php' target='reference_tag'>
<input type='text' value='Random text'>
<input type='submit'>
</form>
Note that the src attribute on the iframe is not mandatory with this technique.
- You can use an inner frame to "erase" Flash content. This is especially useful on Linux; it allows you to erase parts of a Flash to redraw dynamic HTML over it (the Flash player has a bug on Linux that normally prevents HTML content to be drawn over a Flash object). An useful link.
XHTML 1.0 & 1.1
- Don't use the name attribute on forms, a, img or map elements. Only use id.
- XHTML documents should be served with the MIME type "application/xhtml+xml" and NOT "text/html". If served properly as XML documents, this will cause Firefox to parse them using the XML parser, not the TagSoup parser. When served as text/html, the TagSoup parser will be used even if the document type is declared as XHTML.
- However, currently there are lots of problems associated with XML documents. In particular, the JavaScript code document.write() does not work. This leads Script.aculo.us (for example) to fail. So actually it is almost impossible to use XML parsing.
- Also note that IE 7 does not support "application/xhtml+xml" at all.
- An empty self-closing div () is perfectly legal in XHTML. However, it will cause problems if parsed by Firefox HTML parser, so you must not use it. Always close your divs with a.
XHTML Strict
- The iframe tag is not legal, as well as the target attribute in a link or form. This makes the use of Ajax upload almost impossible to achieve in an XHTML Strict compliant way.
Validation
- When using Firefox, be very careful of the difference between "generated source" or "simple source". The generated source is produced by Firefox, and so contains the changes brought by DHTML, Ajax etc. However, this also means that this is the source once it is reinterpreted by Firefox which may add elements or remove some...
- Even if you save the page, it will save the source reinterpreted by Firefox. Almost the only way to obtain the source as first sent by the server is to view the source and then save it in Firefox. This of course precludes any DHTML changes.
- So the real solution is to install a special Firefox extension for validation. TotalValidator seems a good one.