Quick Notes on HTML 5: Document Skeleton and Basic Rules

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>Titles goes here</title>
<link href="style.css" rel="stylesheet">
<script src="script.js></script>
</head>
<body>
<p>Contents are here</p>
</body>
</html>

1. Use of <html>, <head> and <body> tags is optional. If they are not present, browser renders them automatically. Usage is still recommended for cleanness purposes.

2. <!DOCTYPE html> is required to prevent browsers from displaying document in quirks mode

3. <meta charset=…> definition is highly recommended right after <!DOCTYPE… or at the top of <head> section. UTF-8 is the most widely used encoding (most compact and fastest for pretty much all browsers).

4. Natural language specification, e.g. lang=”en” is optional, but recommended, as it allows search engines and screen readers to identify section correctly. Specifying language for html tag defines it for entire page, however it also can be specified for elements, such as div.

5. Stylesheet definition does not require type=”text/css” specification, since “rel” (relationship) defines link as stylesheet, and css is the only style sheet language.

6. Similarly, no need to specify language=”JavaScript” for script tag: JavaScript is assumed by default.

7. Closing </script> tag is required, even when referring an external JavaScript file.

8. Comment <!– saved from url=(0014)about:internet –> is only required to enable debugging of local page in IE; if not specified, when you load local page, IE prevents running any JavaScript on the page, unless you explicitely click “Allow blocked content” (this comment is ignored by any other browser)

9. Tags can be lower and/or upper case.

10. Attributes can be specified without values (e.g. <input type=”checkbox” checked>). This is not commonly used, however, since inconsistent with other attributes. XHTML standard required value for each attribute (e.g. <input type=”checkbox” checked=”checked” />).

11. Closing tags are not required for void elements (elements without nested contents) such as <br>, <img> and <hr>. Again, XHTML required <br />, <img … /> and <hr />.

12. Quotation marks around attribute values are only required if attribute values contain >, = or space. E.g. “<img alt=”This is an image” src=image.gif> is valid for HTML5, but not XHTML.

Loose rules 9-12 are likely to fail on validators. It also may be considered a bad “not-so-clean” style. From the browser perspective, however, those inconsistencies do not add any overhead, and thus following XHTML rules is not necessary from performance or compatibility perspective.

Quick Notes on HTML 5: Document Skeleton and Basic Rules

How to add Google search form to a site

It basically comes to reverse-engineering Google URL and constructing a form based on it:

  • URL before question mark, becomes “action” of the form
  • All properties after question mark, become inputs of the form, with the name that corresponds the name of the property. You may need several types of inputs:
    • Text field, which allows the user to input free text
    • Hidden input, where you can pass some parameters for the query without showing any choice to the user.
    • Other types of inputs, e.g. checkboxes, radio buttons, or lists.
  • Finally you need an input of type “submit” – that’s a search button

So a simple Google Search URL http://www.google.ca/search?q= converts into the following form:

<form method="get" action="http://www.google.ca/search"/>
    <input name="q" maxlength="255" value="" />
    <input type="submit" value="Search"/>
</form>
Next, it may be required to limit search to only specific site, which can be done in 2 different ways:
  • Without giving user an option (always search specific site). As I said above, this is done using “hidden” input:

    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
  • By showing 2 radio buttons: one allowing to search the entire Web, and the other limited to your site. In the following example, by default the site is searched:
    <input type="radio" name="sitesearch" value=""/>
    <input type="radio" name="sitesearch" value="yoursite.com" checked="checked"/>

In either case this input needs to be added to the form, wherever the design of the form makes sense, e.g.:

<form method="get" action="http://www.google.com/search"/>
    <input name="q" maxlength="255" value="" />
    <input type="submit" value="Search"/>
    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
</form>

And finally, many other arguments can be added, which will influence search results. The best way is to tweak your search options in Google (using advanced search for example), and then transform this URL into a form, as described above. For example, the URL

http://www.google.ca/search?q=whatever&lr=lang-en&as_sitesearch=mysite.com&as_qdr=w

can be broken down into:

  • Search where: http://www.google.ca/search
  • What are we looking for: q=whatever
  • Language: lr=lang-en
  • Search on site: as_sitesearch=mysite.com
  • Search only pages from past week: as_qdr=w

Which can be converted to a form, which implicitly sets a few search parameters:

<form method="get" action="http://www.google.ca/search"/>
    <input name="q" maxlength="255" value="" />
    <input name="lr" type="hidden" value="lang-en" />
    <input name="as_qdr" type="hidden" value="w" />
    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
    <input type="submit" value="Search"/>
</form>
How to add Google search form to a site