HTML & XHTML: Difference between revisions

From Elvanör's Technical Wiki
Jump to navigation Jump to search
Line 10: Line 10:
* <nowiki><div></nowiki> elements are not permitted inside a <nowiki><p></nowiki> element; it is DIV elements that should englobe other elements, not the contrary.
* <nowiki><div></nowiki> elements are not permitted inside a <nowiki><p></nowiki> element; it is DIV elements that should englobe other elements, not the contrary.
* As much as possible, use elements like <nowiki><strong>, <em>, <cite>, <h1>...</nowiki> 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).
* As much as possible, use elements like <nowiki><strong>, <em>, <cite>, <h1>...</nowiki> 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).
=== Head Elements ===
* The base element allows you to specify a base URL for all links and images. It should be an absolute URI (if it's not, Firefox ignores it, although IE does not).


== Embedding style sheets, JavaScript in HTML documents ==
== Embedding style sheets, JavaScript in HTML documents ==

Revision as of 03:21, 23 January 2010

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

Head Elements

  • The base element allows you to specify a base URL for all links and images. It should be an absolute URI (if it's not, Firefox ignores it, although IE does not).

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.
  • To write valid HTML code, the textarea element needs the rows and cols attributes. Just write
rows="1" cols="1"

and give the actual dimensions via CSS, as you will have cross platform problems without this technique.

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.

noscript Tag

  • This tag is not interpreted when browsers support JavaScript. This can be used to provide an block that should be hidden when JS is supported. The best would be to be able to read the content of the noscript tag, in order to update another block. This works in Firefox and Opera but not on IE 7
nor Safari / Konqueror.
  • The best technique I have currently found (in order not to duplicate the content) is to use a first block containing the content, with display: none; style, and then a noscript tag with a style tag:
<noscript>
	<style type="text/css">#welcomePage .Dialog {display: block !important;}</style>
</noscript>
  • This works in all browsers, however is not valid W3C code.

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.
Retrieved from "https://wiki.elvanor.net/index.php?title=HTML_%26_XHTML&oldid=3618"