HTML

Parameters for Opening PDF Files
http://net.tutsplus.com/articles/web-roundups/10-rare-html-tags-you-really-should-know/
http://www.sitepoint.com/meta-tags-html-basics-best-practices/
http://hsivonen.iki.fi/doctype/
https://hsivonen.fi/doctype/
http://www.quirksmode.org/css/quirksmode.html
http://ejohn.org/blog/html5-doctype/
http://alistapart.com/article/doctype
http://24ways.org/2005/transitional-vs-strict-markup/
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
http://www.w3schools.com/tags/tag_doctype.asp
http://dev.w3.org/html5/html4-differences/#doctype

Use doctype:

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

<form enctype="application/x-www-form-urlencoded">
<form enctype="multipart/form-data">

Use "multipart/form-data" if you need to use <input type="file"/> for file uploading.

Use fieldset to encapsulate related fields, and label fieldset with legends. This allows developers and users to identify related fields easily. The fieldset element has a border by default, and the legend will lay itself over that border.

<fieldset>  
    <legend>Billing Address</legend>  
    <span>Address</span><input type="text" />  
    <span>City</span><input type="text" />  
    <span>Province</span><input type="text" />  
    <span>Postal Code</span><input type="text" />  
</fieldset>

Use The label Element to label form field.

<fieldset>  
    <legend>Billing Address</legend>  
    <label for="billAddress">Address</label><input id="billAddress" type="text" />  
    <label for="billCity">City</label><input id="billCity" type="text" />  
    <label for="billProvince">Province</label><input id="billCity" type="text" />  
    <label for="billPostalCode">Postal Code</label><input id="billPostalCode" type="text" />  
</fieldset>

When the 'for' attribute is defined, the label becomes a clickable area that will focus the input. For example, clicking the label of a text input will focus your cursor in the box. Clicking the label of a checkbox will check (or uncheck) the box.

Use optgroup to categorize / group options.

<select>  
    <optgroup label="USA">  
        <option>Alabama</option>  
        <option>Alaska</option>  
        <option>Arizona</option>  
    </optgroup>  
    <optgroup label="Canada">  
        <option>Alberta</option>  
        <option>British Columbia</option>  
        <option>Manitoba</option>  
    </optgroup>  
</select>

Use tabindex on your form elements.

Define accesskey when appropriate. The accesskey attribute creates a keyboard shortcut that will focus that input: the shortcut is Alt (Option) + the accesskey value. Don't forget to let users know about the shortcut; often this is done by underlining the letter, as it's usually part of the label.

<label for="search"><span class="shortcut">S</span>earch</label>
<input type="text" name="s" id="search" accesskey="s" />

Use the right content type. In most cases you won't need to put the enctype attribute on your form tag; it will default to "application/x-www-form-urlencoded." However, when you have a file input, which will allow the user to upload the file, you need to use "multipart/form-data."

<form action="verify.php" method="get" enctype="multipart/form-data">
    <label for="avatar">Upload your Avatar : </label>
    <input type="file" name="avatar" id="avatar" />
</form>

Validation:

<input type="text" name="name" value="<?=$name?>" id="name" class="v-required" />
<input type="test" name="email" value="<?=$email?>" id="email" class="v-required v-email" />
<input type="text" name="phone" value="<?=$phone?>" id="phone" class="v-required v-digits" />

In order to know how to validate each field in our form, we need to add specific classes to each one. v-required stands for a required field, v-digits is used for fields that should accept only digits while v-email is used for fields that expect and email address.

RSS Link:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://jeremy.zawodny.com/blog/index.rdf">

Meta Refresh:

<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10;url=http://www.wikipedia.org/" />

Meta http-equiv imagetoolbar:

This turn off Internet Explorer's toolbar that appears when you mouse over an image:

<meta http-equiv="imagetoolbar" content="no" />

URL syntax:

http://leonardr:pw@www.subdomain.example.com:6060/cgi-bin/mycgi.cgi?key1=val1#anchor
ftp://leonardr:password@ftp.example.com/a/file.txt
mailto:leonardr@example.com?Subject=Hello&body=Hi!

Avoid using img tag without specifying an src attribute, or specifying src="" See Empty string URLs - browser update

Some browser cannot handle this, and will try to fetch the page, and then realize that the content cannot be displayed. The extra request cause additional load on the server, and may trash our session data (due to race condition).

Avoid using iframe without specifying href attribute, or specifying href="" (See elsewhere on this wiki for more information)

Always assign complete attributes. checked="checked" disabled="disabled"

Put tabindex on your input fields. tabindex="1"

Define accesskey when appropriate. The accesskey attribute create a keyboard shortcut that will focus that input. The shortcut is Alt (Options) + the accesskey value. Obviously, you wouldn't put an accesskey on every input, but it would certainly be useful on, for example, a search box. Don't forget to let user know about the shortcut. Often, this is done by underlining the letter, as it's usually part of the label.

If you've never used XHTML before, your first step should be to ditch some ancient HTML preconceptions. Fortunately migrating from HTML to XHTML is extremely simple:

  1. Make all your tags lower case (<p> instead of <P>);
  2. Close all your tags, even empty ones (<br /> and <hr /> instead of<BR> and <HR>);
  3. Make all attribute names lower case and quote all attribute values; for example, <td colspan="2"> instead of <TD COLSPAN=2>, and onmouseover instead of onMouseOver;
  4. Give empty attributes a value—such as <input type="checkbox" checked="checked" /> instead of <INPUT TYPE=checkbox CHECKED>;
  5. Nest all your tags correctly.

Now your HTML has become XHTML. This is not enough, though. By choosing a DOCTYPE you have committed yourself to the Strict, Transitional or Frameset flavor, and you should make sure that you only use the tags and attributes that your chosen flavor allows.

When you think you're ready, validate your pages. The official W3C Validation Service is the most logical place to start. Nonetheless its error messages can be quite verbose and confusing to the uninitiated. W3C is experimenting with a new validator that gives more understandable error messages.

If you don't quite understand the error messages, ask groups.yahoo.com/group/XHTML-L for help. You're not the first one to run into a particular problem.

Even when your XHTML is perfectly valid it can contain bad coding. You have to avoid a few practices that, though not expressly forbidden, are strongly discouraged.

using one minimal table to roughly lay out your page is quite acceptable. Nonetheless, it is important to stress that this minimal table should be the only one. Do not insert more tables into your code. There's one single exception to this rule: you may use tables to display tabular data. If you're not sure if a certain data set requires a table, ask yourself how you'd display it in print. If you'd use a table even in print, the data is tabular.

Tagitis:

Tagitis is the adding of many useless XHTML tags. This header, for instance, suffers from tagitis:

<h3><em>Header</em></h3>

We don't need the extra <em> tag. One line of CSS would give the same effect:

h3 {
  font-style: italic;
}

Classitis and Divitis:

Deprecate Tags:

You don't need <FONT>. Instead, use:

body {
font: 0.8em verdana,sans-serif;
}

There are some issues with font sizes in table cells, though, so to be completely on the safe side you could extend this declaration to all common text containers:

body,td,li,p {
font: 0.8em verdana,sans-serif;
}

The ancient <CENTER> tag can safely retire, too. CSS is quite capable of centering text and blocks of content, though there's one catch. To center the text in div.text you do:

div.text {
text-align: center;
}

Centering entire blocks is somewhat trickier. If you want to center the entire div.text, the official CSS way is:

div.text {
margin-left: auto;
margin-right: auto;
}

auto means: “as much as you need.” The <div> takes as much margin as it needs and equally divides it between left and right. As a result it is centered.

Unfortunately the auto value does not work in Explorer for Windows. Instead, you must use text-align on a block containing div.text:

div.container {
text-align: center;
}

div.text {
margin-left: auto;
margin-right: auto;
text-align: left; /* overrule inheritance */
}

<div class="container">
    <div class="text">
    This entire block is centered
    </div>
</div>

This use of text-align is not quite standards-compatible, but it's the only way to make Explorer for Windows behave.

Accessibility:

When you've created and validated the entire XHTML file you should perform an accessibility check. Remove all style sheets and JavaScript from the XHTML and carefully look at this unstyled page. Is the content ordered logically? Is the navigation clear and usable?

If content and navigation are usable, you've passed the first test. You should perform many more checks to ensure perfect accessibility, but this rough test helps you catch the most important and serious issues.

To dive deeper into accessibility issues, read the official W3C Web Content Accessibility Guidelines. If you want some practical examples and tips, the excellent accessify.com website is your best bet.

Semantic HTML:

The Semantic Web: Speaking to Humans With Readable Code
Who Cares about Semantics Anyway?
http://www.vanseodesign.com/web-design/html5-semantic-elements/
http://www.thefutureoftheweb.com/blog/writing-semantic-html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.joedolson.com/articles/2008/04/guide-to-semantic-html/
http://www.heidicool.com/blog/2009/08/11/making-sense-of-semantic-html/
http://davidwalsh.name/when-webmasters-attack
http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/

http://davidwalsh.name/dns-prefetching
http://snook.ca/archives/html_and_css/definition-lists-v-tables
HTML Image Map
Alternatives for Deprecated Elements and Attributes
HTML array
HTML and Semantics – Conjoined twins of the Future Web !
http://www.cssnewbie.com/understanding-xhtml-semantics/
http://www.cssnewbie.com/on-calendars-lists-tables-and-semantics/
http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/
http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/
HTML 4.01 / XHTML 1.0 Reference
Comparison of Strict and Transitional XHTML
HTML Entities
The 10 HTML Tags Beginners Aren’t Using
10 Underused Html Elements, and how you should be using them!
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
Semantics and sensibility
20 HTML Best Practices You Should Follow

<APPLET>
<EMBED>
<OBJECT>
<PARAM>

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License