New Mark-up Elements...

New Mark-up Elements

The following table lists the new elements for better structure:

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<embed>	For embedded content, such as a plug-in

New Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag	Description
<canvas>	For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for better input control before sending it to the server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field

HTML5...

A new version of HTML will soon be the standard for web pages and supported in the latest browsers. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

HTML5 - New Features
1) Functions for embedding audio, video, and graphics

2) Client-side data storage

3) Interactive documents

4) New structural elements<article>, <header>,<footer>, <nav>, <section>, and <figure>

5) New form controls calendar, date, time, email, url, search

6) JavaScript enhancements

HTML5 - Better Browser Support

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, Opera, and Microsoft Internet Explorer 9.0 all support many of the new HTML5 features.

In addition, the mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

Specific browsers supporting HTML5 are:

• IE 9+ (Windows), Firefox 3.0+ (all operating systems), Safari 3.0+ (Windows, OS X, and iPhone OS 1.0+ operating systems), Chrome, Opera 9.5+ (all operating systems)

Note: With all the current "buzz" regarding HTML5, support for various HTML5 features within browsers varies almost daily. HTML feature support information listed within the Quick Guide may become outdated quickly. Refer to the internet for updated information and watch for updates to the Quick Guide.

Recommendation: When developing web pages using HTML5, it is recommended to detect support for individual HTML5 features using JavaScript. To help with this, use Modernizr, a JavaScript library that detects support for HTML5 and CSS3 features.

HTML5 - New & Updated Elements

Since HTML4.01 was approved, some HTML elements are now obsolete, never used, or not used the way they were intended. These elements have been removed or re-written in HTML5.

In addition, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.

Web Design...

The internet is full of great Websites and there are many that are not so great, either they have fallen behind in keeping them up to date or the website is just a page or two that doesn't allow you to purchase or even order anything online, meaning that most shoppers go to these Websites get frustrated and go somewhere else, As we become more depended on the internet the user wants the visit to be prompt and hassle free.

There are many sources online that allow you to build your own Website, without been able to
code, using pre-designed templates, some of these sources are free or charge a monthly fee.

A few things to remember when designing your Website

• Keep the layout of the site clean.
• Have a clear understanding of how users will receive and use your website.
• Keep the navigation clean.
• Make it easy for user's to get back home.
• Don't have to many pop-up boxes as this gets annoying.
• Visually Differentiate between clickable and Non-clickable things.
• Make sure that the font & font colour make the text readable (use Web-safe Colours).
• Add the option to increase font size where possible.
• Make sure that your hyperlinks are working and don't take the user to an empty pages.
• Remember keep your site simple and easy to use.
• Use the two click theory (no more than two clicks should be required for visitors to reach any page of the site).
• Get friends / work colleagues to checkout your site and give you feedback. 
• Allow visitors to give you feedback or ask questions.

What is HTML and CSS...

HTML and CSS are the basis of building Web pages and Web Applications, HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices, along with graphics and scripting.

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.

Retrieve online information via hypertext links, at the click of a button.

Design forms for conducting transactions with remote services, for use in searching for    information,  making reservations, ordering products, etc.

Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers.
CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.
This is referred to as the separation of structure (or: content) from presentation.

CSS-Help-Sheet

HTML-Help-Sheet