HTML5: cutting edge web design

10 Good Reasons to Upgrade to HTML5

Html5 is the cutting edge website development language for embedding streaming video and audio files, frying Flash in the pan. Html5 semantically interprets MicroData in the spirit of forward compatibility with XML.

Most importantly, html5 finally eliminates the need for various DocType Definitions, and supports dynamic interactivity such as Canvas drawing and Presentation capabilities.

San Diego Web Studio picked just ten of the numerous reasons and benefits Html5 provides for upgrading website design structural code and dynamic media delivery!

What are some of the differences and benefits of Html5 over previous versions, such as Html4?

it's dynamic!

1. Html5 delivers very enhanced capabilities and support for video, audio, canvas drawing, dynamic content, storage, and functionality. Html5 supports easy, lightweight embedding of movies, sound, images, and vastly improved functionality for forms and intermutual files. Along with newly introduced elements such as navigational and webpage designations, Html5 also includes deprecation of outdated and unnecessary features from previous versions of Html.

open-source!

2. Html5 is open-source and nonproprietary! There is no cost or purchase necessary to implement Html5 and derive the many benefits, including increased download speed of webpages, client-side storage capabilities, image galleries and picture slideshows, intuitive and seamless web form completion and submission, and more. Html5 is supported and endorsed by nearly all major online communities including Google, Mozilla Firefox, Microsoft, Opera, Apple, IBM, Nokia, AOL, and hundreds of other vendors that comprise almost every significant online entity.

All new features of Html 5 are based on Html, CSS, Javascript, and the DOM.

next-generation standardized...now!

3. Html5 is the planned standard web building language. Html is replacing use of all previous versions of Html, xHtml, and the Html DOM. Html is the collaborative product resulting from the co-contributions of the W3C and the WHATWG.

google love ...

4. Google retracted "Google Gears" in support of Html5 and Open Source Programming Languages. Earlier this year, after launching and introducing a program called "Google Gears", the leading search engine formally abandoned their proprietary and client-side storage driven program in support of Html5. Google is also a strong advocate of open source programming vs. proprietary applications such as Flash.

no flashing...

5. Don't Flash Me! The word among web developers is that Html5 will replace the controversial and slow-loading use of Flash, a proprietary and search engine non-friendly animation program now owned by Adobe. Ipads and Iphones are already manufactured without the ability to render Flash based elements and websites. Html5 decreases the need for external and proprietary browser plugins. Apple doesn't like Flash...(and we don't either).

multi-browser compatible...

6. Html5 is supported and effective in almost every modern browser's latest version. The latest versions of Google Chrome, Safari, Mozilla Firefox, and and Opera are Html5 compatible. Microsoft's Internet Explorer, in atypical fashion of IE, is also planning Html5 support in the upcoming IE9 Release. One of the many objectives of Html5 is standard compliant multi-browser compatibility. Another objective is elimination of the need for various DocTypes, as with previous versions for Standards and Quirks mode. The new Html is replacing use of all previous versions of Html, xHtml, and the Html DOM. Html is the collaborative product resulting from the co-contributions of the W3C and the WHATWG.

device independent ...

7. Html5 is device independent regardless of brand or gadget. Want your website to render gracefully on any device or computer? Try that with proprietary software programs!...Open Source Html5...we've got you covered! Html5 is technically engineered to render gracefully among all devices and brands, whether viewed via a mobile phone, an iPad, a PC, or a Mac, to name just a few of the devices and computers supported by Html5.

simplicity...

8. Less plugins required, less scripting, only one document type! Html5 requires only one document type, as opposed to numerous document types required in previous versions of Html.

Document Type declarations for webpages have long been a source of confusion and hindrance to web developers in past html versions, not to mention a frequent cause of chaos when validating code per w3c standards. The one and only document type required for Html5 is: !DOCTYPE HTML. Html5 is much more efficient at handling errors caused by browser bugs and...ahem, web development mistakes.

robust capabilities...

9. What can Html5 do that old Html can't? A lot! Html5 can create a canvas that facilitates freestyle drawing by mouse or other input device. The new version also enables integration of advanced video and audio controls for site visitors to playback media seamlessly, offline storage on site visitor's computer or portable storage device, such as a flash drive or mp3 player, electronic forms with interactive features that include date, time, email, url, search, and calendar. Also supported are web document section specifiers, such as "section", "header", "footer", and "navigation".

new markup ...

10. What's all the further hype about Html5? Html5 can do so much, and tell search engines exactly what they want to know by use of enhanced semantical markup of elements. It can also give site visitors and end users more control, quicker and increased interactivity, and superior functionality. The following new elements are listed, along with their proper purpose, for our technically savvy clients who monitor the coding of their websites during new site construction and website repair and site redesign. In the event you see elements in the code you're not familiar with, the following list can serve as a quick reference resource:

* (Html5 presents a dynamic and creative playground! Note the trend toward semantical markup...Google is encouraging [ultimately driving the web toward] Ontology Web Language [OWL])

New HTML5 Elements:

accessible markup capabilities:

article:

The "article" designation is intended to identify and reference externally acquired or generated content originating at another location on the web, or offline.

aside:

The "aside" element is intended for content related to the main topic with which it is included, however content tagged "aside" should be supplemental, related, auxiliary, or augmented, such as an afterthought, commentary, or editorial, as in an individual's opinion, for example. It is not intended to be used as a sidebar or navigational section, unless pointing to

command:

The command button is intended to designate a "command button", or end user choice, such as a checkbox, checked or unchecked , a button , or radio box .

details:

The "details" element is intended to define the details related to a specific document, details aimed at a specified section of a webpage, or other part(s) of the page. It is an "about" information tag.

summary:

The "summary" element is intended for use within the "details" element. As the tag name implies, a summary tag will provide a concise description of the of the content that the "details" element defines.

figure:

The "figure" tag is designed to group internal elements of a section on a webpage. The grouping inside of a figure tag should be stand-alone information, that if moved to outside the document, will suffice enough information to be independent. Examples of elements appropriately contained in a "figure" tag are H1, H2, Paragraph, etc.

figcaption:

The "figcaption" tag is intended for use inside the "figure" element, described above, and should designate a caption entry of the content tagged "Figure". A caption typically describes a photograph, video, chart, or some other visual presentation.

footer:

The "footer" tag, as the name implies, officially designates the bottom "footer" area of a document, or the bottom footer area of a section of an html document. In Html5., it is the sister tag to the new "header" element, described below.

header:

The "header" element, somewhat self-explanatory, is intended to designate the top section of a webpage, and typically precedes the document's content area and includes the logo and slogan. The header tag often contains a horizontal navigation bar.

hgroup:

The "hgroup" element is intended to designate a group of heading tags, from h1 to h6, with h1 being the topmost heading in largest font, and decreasing in size with every subheading from h2 to h6.

mark:

The "mark" element designates "marked" content or text and is very versatile. "Mark" can be styled in CSS and used to highlight, emphasize, separate, bolden, increase or decrease font size, or otherwise make text stand out. It is a convenient alternative to the "em" and "span" tags.

meter:

The "meter" tag was created in Html5 to define a measurement, but to be used only in instances where the exact minimum and maximum measurements are established. For proper use of the "meter" tag, the range of measurement must be specified.

nav:

The new "nav" tag defines a navigational area. Placing menus, sidebar menus and navigational areas inside a "nav" element is optional. However, when creating paginated menus, such as "next" and "previous" buttons and/or or number only buttons, commonly found on blogs, it is strongly recommended that these buttons are enclosed in the "nav" tag.

progress:

The"progress" element designates work in progress, such as a download in progress, a partially finished project, a process, or some other measurable entity marked by a percentage or other compatible measurement.

ruby:

The "ruby" element contains one or more characters necessitating pronunciation support and / or definition. "Ruby" is used in East Asia for pronunciation purposes. Ruby tags are supported by "rp" and "rt" elements, defined below.

rt:

The "rt" tag is related to the "ruby" and "rp" tags. It is intended for supporting pronunciation and definitions in Eastern Asiatic languages. To be used internally with the "ruby" tag defining the pronunciation of the word(s) or symbols contained in the "ruby" tag.

rp:

The "rp" tag acts as an auxiliary support tag for browsers that do not support the "ruby" element that "rp" is associated with. In the event the site visitor's browser does not support "ruby", the end user will

section:

The "section" element denotes different "areas" or "parts" of a document. Appropriate document areas for use of section tag include the header, footer, navigation area, content area, or any other "section" enhanced by more extensive designation or styling.

time:

As the "time" tag name implies, "time" is intended to designate a specific time and / or date. The tag is "semantical" in nature, as it tells the search engines what is enclosed in the element. Ie, written at 10:00 a.m.. The text in italics would be enclosed in the "time" tag, and let the search engines know what type of data is indicated by the tagged text. The time tag itself, like other html5 elements, can be defined by a "title" entity that provides further information to the site visitor on mouse-over, or in the form of a "tooltip".

wbr:

Lastly, the "wbr" tag is associated with layout regarding word wrap. Instead of specifying "no-wrap", "wbr" is an abbr for "word break", directing the browser to break a line of text at a specific point, or word in the sentence. For example, a document might contain a sentence such as "it was a 70 year old building", and you may want to break the line specifically after the word "a" vs. "70". Menial? No. Developers dedicated to proper code and markup hate using the "break" tag; "wbr" is a clean solution that can be kept off page in the CSS styling.

New HTML5 Canvas Element:

canvas attributes

The "canvas" element, intended as a graphic "container" only, works in conjunction with scripting to provide a "drawing" canvas that is interactive with the end user's input device, such as a mouse or other hardware device. The canvas area takes a rectangular shape and allows the end user to control the pixels within the canvas area. The "canvas" element is supported by several drawing methods, including characters, circles, boxes, paths, drag and drop capabilities for images. JavaScript support is required to enable the canvas to be drawn upon by the site visitor.

got code?

We do! And we sure would like to give your site a makeover. Give us a call for improved performance. Put your site on vee-ag-gra with html5 and css 3. Wow! 619.504.0450

html5: website vee-a-grah!