User281315223 posted
HTML 5 Compliancy is a rather "vague" term (as you indicated).
The extent to which some of the newer HTML5 tags and CSS3 properties (which typically go hand-in-hand with HTML5) are supported varies from browser-to-browser and often many of them are not exactly applicable to most web sites or applications.
The release of HTML5 added several new tags that can now be used to help more easily organize content within your pages, however they are by no means necessary current and using <div> elements is still completely "HTML5 Compliant".
New HTML5 Tags and Explanations
There were a few different types of elements that were added in within the last addition of HTML elements and they can be broken down into the following categories :
Media-Related
These elements refer to as the title mentions "Media" and media elements that are used to handle video, audio and other interactive and embeddable objects :
- <canvas> - used primarily in conjuction with Javascript to handle all sorts of functionality and interactivity.
- <audio> - handles audio content and audio files (playing, fast-forwarding, rewinding etc)
- <video> - much like <audio> this is specifically used to handle video media.
- <embed> - used to insert external applications or to run plug-ins such as Flash etc.
- <source> - allows you to define resources for both <audio> and <video> elements.
- <track> - stores information regarding a single track for an audio or video element.
Form Elements
Forms recieved a few new elements primarily related to data and outputting data :
- <keygen> - defines key-value pairs for forms
- <output> - stores the result of calculations
- <datalist> - stores optional information about specific inputs or other controls
Structural Elements
This refers to the most commonly encountered objecst and those that you mostly mentioned and the new elements introduced actually make reading source and markup for sites much more "readable" and descriptive :
- <article> - stores an entire article much like you would find on a page or a story.
- <aside> - this is used to store side content that would be set next to the actual content (like calendars, menus etc.).
- <bdi> - used to isolate a part of text that might be formatted in a different direction from other text outside it.
- <command> - designed to store a specific command button.
- <details> - a togglable section displaying details about a particular section or article.
- <dialog> - used to define a dialog box or window.
- <summary> - the heading for a <details> element
- <figure> - used to store figures, charts, graphs, illustrations etc.
- <figcaption> - a caption for <figure> elements.
- <footer> - defines the footer content of a document or section.
- <header> - defines the header for a document or section.
- <hgroup> - used to group sets of heading elements <h1>,<h2>, ...
- <mark> - defines highlighted text.
- <meter> - used to define a unit or level of measurement as a gauge.
- <nav> - defines and stores navigation elements such as a menu.
- <progress> - stores information about a particular progress.
- <ruby> - defines a ruby annotation (for East Asian typography)
- <rt> - defines an explanation/pronunciation of characters (for East Asian typography)
- <rp> - defines what to show in browsers that do not support ruby annotations
- <section> - defines a section in a document, which can be used to store an article etc.
- <time> - defines a date/time
- <wbr> - defines a possible line-break
The HTML5 DocType
If you plan on using any of these elements or you want your markup to be considered "HTML5", you will need to use the HTML5 DocType declaration in the top of your page (it will replace your existing DocType declaration) and it looks like this :
<!DOCTYPE html>
Additional HTML5-related Discussions and Resources
Since this topic can be rather vague, so I'll include a few other discussions that might shed some light and help you decide what your opinion of HTML 5 Complicancy is (because if your client isn't very tech-savvy, they may not really know themselves
and are just trying to throw out a "buzzword") :
Opinion
Since it's fairly clear there is no specific things you can do to make your application "HTML5 Compliant", I would recommend doing the following to your application, which should be fairly impressive to your clients and should help ensure
that your application looks and performs solidly for both HTML5 and non-HTML5 supported browsers :
- Ensure your markup is valid - Ensure you have proper opening and closing tags for all of your elements and aren't using any attributes that are not supported or may be obsolete.
- Consider using a Responsive Design Framework - A Responsive Design framework will add the all kinds of references and functionality into your application to ensure that it not only looks good across all browsers and devices, but also
handle newer HTML5 supported features (as well as falling back when support is lacking).
- Don't Freak Out - Don't go crazy trying to switch or make unnecessary changes to migrate everything to HTML5. There are a lot of new tags out there that may seem like they would be worth using, but if they are used incorrectly, you
might just end up with some messy markup. Keep your markup simple and practical and you should be fine.
Regarding the Responsive Design Comment
Responsive Design is a very common term which can refer to scaling all of your content based on the current resolution of your browser or device. (This
is done primarily through CSS and occasional use of Javascript)
It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using).
There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap (and
a varitety of others).
These could fairly easily be integrated into a Web Forms application and would basically be all that you would need to use :
