Embed Size (px)
Citation preview
Hypertext Mark-up Language 5
Introduction What is it? Why is it important? How does it fit with PHP? Pros and Cons Traditional HTML Code examples Examples of live applications Critical appraisal
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5What is HTML5?• HTML4 became a W3C Recommendation way
back in 1997
• HTML5 adds some new ways of structuring documents
• It adds media handling and navigation awareness
• It gets rid of some deprecated tags
• It’s cleaner, more modern, more semantic, yet broadly compatible with HTML4
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Why is it important?• Web page usage has changed a lot since the
mid 1990’s
• HTML5 provides a standardized platform for desktop and mobile systems to use
• HTML5 builds on the strengths of older HTML but removes some weaknesses
• Many developers will be comfortable with HTML5 immediately
• Limited updating required for server-side code
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5How does it fit with PHP?• PHP runs at the server
• HTML5 markup is rendered at the browser
• PHP is often used to generate HTML output
• If you write valid HTML5 out from the server using PHP, all is well
• Some HTML editors (CS6/DW for example) will complain about <?php …. ?> blocks – but needlessly, for the reasons given above
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Pros and Cons• HTML5 has many helpful features to simplify
page and site design
• Additional tags and attributes and new ways of using those tags enhance semantic content
• For example: Kludgy solutions for technologies like audio output are replaced by a simple, clean approach
• But older browsers don’t support these goodies
• Newer browsers aren’t yet reliable [as of early 2014]
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Traditional HTML• Traditional HTML pages will work well in
HTML5-compliant browsers
• Many years will pass by before server-side output becomes predominantly HTML5-based
• Skills in HTML4 can be enhanced to take into account the stable parts of HTML5
• Note that HTML4 is still the most up-to-date, complete, published standard for web markup
• HTML5 may be fully ratified some time between 2014 and 2022
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Code examples<form method="post" action="somescript.php">
<label for="myName"> Your Name: </label>
<input type="text" id="myName" name="myName" placeholder="N.E.Bodhi" required autofocus><br>
<label for="myEmail"> Your Email: </label>
<input type="email" name="myEmail" required placeholder="[email protected]"><br>
<button type="submit">Send</button>
</form>
•A simple form which allows for “example text” in the input boxes.
•Note that the form requires input in both fields before it can be sent.
•Also note that the email input does some structural validation.
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Examples of live applications
Nic Shulver, FCET, Staffordshire University
http://www.cuttherope.ie/
Hypertext Mark-up Language 5Critical appraisal of HTML5• HTML5 has specific browser support, it's built
into most modern browsers (but…)
• may not yet be available on all mobile devices
• Trends in web application development are towards open standards and vendor neutrality, key for businesses
• It has taken a long time to develop
• Support has been inconsistent
• It is changing the web
Nic Shulver, FCET, Staffordshire University
Hypertext Mark-up Language 5Background Reading• W3C: HTML5 differences from HTML4
http://www.w3.org/TR/html5-diff/
• What's New in HTML 5 - Jennifer Kyrninhttp://webdesign.about.com/od/html5/a/html_5_whats_new.htm
• 28 HTML5 Features, Tips, and Techniques you Must Know - Jeffrey Wayhttp://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
Nic Shulver, FCET, Staffordshire University
