HTML

http://www.sitepoint.com/10-typical-html-interview-exercises/
https://hsivonen.fi/doctype/
http://hsivonen.iki.fi/doctype/
http://www.sitepoint.com/10-typical-html-interview-exercises/
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://www.sitepoint.com/everything-need-know-html-pre-element
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

Tables
Selects
Conditional comments

// HTML:

<!DOCTYPE html>

<!--
Your unwanted HTML code
-->

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<style media="screen" type="text/css">
</style>

<h2 style="color:red;background:black;">Inline style</h2>

<style type="text/css" media="print">
    body {
        margin: 8px;
    }
</style>

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

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="post" enctype="multipart/form-data">
    <label for="avatar">Upload your Avatar : </label>
    <input type="file" name="avatar" id="avatar" />
</form>

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

// label can also wrap around the input tag:
<label>
   <input type="text" name="lastname" />
   Last Name
</label>
// However, this technique cannot be used when a table is being used for layout, 
with the label in one cell and its associated form field in another cell, which 
would result in HTML that are not valid.

// Adding favicon:
<link rel="icon" type="image/png" href="..." />

The favicon need to be 16px by 16px. If one image type does not work, try 
another image type (gif, png, jpg, etc)

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">

How to comment out a block of HTML?

<!--
Your unwanted HTML code
-->

How to include css?

<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<style media="screen" type="text/css">
</style>

<h2 style="color:red;background:black;">This is a red heading with a black background</h2>

Use appropriate form enctype

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

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="post" enctype="multipart/form-data">
    <label for="avatar">Upload your Avatar : </label>
    <input type="file" name="avatar" id="avatar" />
</form>

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. The label itself may be positioned before, after or around the associated control:

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Notice that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell, which would result in HTML that are not valid.

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" />

Do 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. This is just one suggestion. You probably should use a JavaScript library or framework to handle client-side validation. Client side validation is used to give the user immediate feedback. However, for security reason, we should not rely on client-side validation alone. We must always implement server-side validation.

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:

See:

Avoid using img tag without specifying an src attribute, or specifying src="":

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=""

Same as for img tag

Always assign complete attributes:

For example:

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.

Make sure that your tags are appropriately terminated / closed:

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.

Avoid 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>

How can we add a favicon?

<link rel="icon" type="image/png" href="..." />

The favicon need to be 16px by 16px. If one image type does not work, try another image type (gif, png, jpg, etc)

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