HTML Tag Reference
http://www.w3schools.com/tags/ref_byfunc.aspHTML Special Characters
See Full List
How to Validate HTML
http://validator.w3.org/Minimal Html Page
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="description" content="this is useful information.."/>
</head>
<body>
</body>
</html>
Minimal Html Page with jQuery Script and CSS
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="description" content="this is useful information.."/>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>
XHTML Page with Layout
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="description" content="this is useful information.."/>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
HTML5 Page with Layout
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="description" content="this is useful information.."/>
</head>
<body>
<header></ header >
<nav></nav>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
When using new HTML5 tags, to support old browsers, the CSS should include the following.
address, article, aside, canvas,
figcaption, figure, footer, header,
hgroup, nav, section, summary {
display: block;
}
XHTML and HTML5 rules
- Tags and attributes are entered in lowercase
- Closing tags are required
- Empty tags end with />. For example, <br />
- Only one root element is allowed i.e. <html>...</html>
Viewport meta tag
To control the size and scaling of the page, for instance when you are making a mobile-optimized web app with a native feel. It is here that the viewport meta tag and the new @viewport rule come in handy: they enable you to override that default 980px viewport value, define a maximum viewport height, and more, allowing you to manipulate the browser’s display and zoom behavior as you please.Overriding the default viewport can be done by including a viewport meta tag in the <head> section of your page.
<meta name="viewport" content="width=device-width">
Block Elements
Block level elements occupy 100% of the available page width. Can specify less 100% as width to create element smaller than the container.- body - styling can be applied to body. <body style="text-align:center;">
- div - used to divide a page into sections (divisions) instead of tables. OK to use tables within a div. div elements are usually named using an id attribute. The name used for id should indicate the purpose of the div. div should be styled using the id. Place a comment after diiv end tag for readability of nested div tags.
- h1, h2, h3, h4, h5, h6 - Used for creating an outline of the page; not formatting of displayed text
- img - Attributes: src, alt, height,width. If only height or width are supplied, the other dimension is calculated based on the original size aspect ratio. Supported formats: gif, jpeg, png. Enclose img tag in p tag to separate from surrounding text. Public domain clip art http://www.clker.com/ . Public domain photos http://public-domain-photos.com/ . More clip art and photos http://www.graphicsfactory.com/
- li - item within an ordered or unordered list
- ol - ordered list
- ul - unordered list
Inline Elements
- a - create a link. Attributes: href, target
- a - anchor. <a name="QB12"/>. To create a link href="#QB12"
- em - italicized
- strong - bold
- <!-- comments -->
Accesskey
The accesskey attribute specifies a shortcut key to activate/focus an element.
<a href="http://sal-razzaq.blogspot.com/" accesskey="c">My Blog</a>
Attributes Used for Styling
- id - used to name an element. Must start with with a letter, no spaces. Must be unique on a given page. Is case-sensitive.
- name - name of the field on a form; serialized for form post; unique on a given form.
- class - used for styling a group of elements belonging to class. Multiple classes can be specified for an element <h1 class="navytext main"></h1>
- style - for specifying inline styles for the element
Layout Types
- Liquid or fluid layout - Layout and elements within layout resize with size of the browser window
- Fixed layout - Page contents maintain a constant width. Horizontal scroll bar may appear.
<body><div id="wrapper"></div><!-- end wrapper--></body>
Preferred fixed width layouts are 760px (800x600) or 980px (1024x768)
Tables
- table - Attributes: border, cellspacing (space between cells), cellpadding (space between content of cell box and the edge of the cell box)
- tr - table row
- th - table header and footer cell (boldface)
- td - table data cell . Attributes: colspan (merge cells from multiple columns), align (left, center, right), rowspan (merges cell on multiple rows)
- <td> </td> - to display empty cell
<table rules="all | row | col">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
