HTML5 Resources and Tutorials

html5

What is HTML5?


HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. According to the W3 Schools HTML5 is still a work in progress, but most contemporary browsers have some HTML5 support.

HTML5 New Features


Some of the most interesting new features in HTML5:

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content specific elements, like article, footer, header, nav, section
  • New form controls, like calendar, date, time, email, url, search

Examples


1. New Doctype:

XHTML: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML5: <!DOCTYPE html>

2. No More Types for Scripts and Links:

XHTML: <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />

HTML5: <link rel=”stylesheet” href=”path/to/stylesheet.css” />

3. Make your Content Editable:

This allows the user to edit any of the text contained within the element
XHTML: NOT Available
HTML5:

<p> To-Do List </p>
<ul contenteditable=”true”>
<li> Pick up milk</li>
<li> Go to the bank
<li> Study for test</li>
</ul>

4. Email Input Validation

XHTML:NOT Available
HTML5:

<form action=”” method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” /> <button type=”submit”> Submit Form </button>
</form>

5. Header and Footer Markup Elements

XHTML: NOT Available
HTML5:

<div id=”header”> </div>

<div id=”footer”> </div>

6. Audio Markup Element

XHTML: NOT Available
HTML5:

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>

7. Video Markup Element

XHTML: NOT Available
HTML5:

<video controls preload>
<source src=”video.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />
</video>

7. Mark Markup Element

XHTML: NOT Available

HTML5: <p> Hello <mark>”Don’t forget this”</mark>. </p>

Resources


Category: Web Development Orlando Tags: , , , No Comments
Orlando Website Design Florida WordPress Developers

Is Your Website Compliant With Color Accessibility Requirements?

Orlando Web Design Building websites for users with a wide range of abilities is imperative to make cyberspaces inclusi... Read More »
Orlando WordPress Developers

WordPress Plugin ACF 5.0. is now Compatible with Gutenberg!

Orlando WordPress Developer With Gutenberg's release just around the corner, we all want to make sure our WordPress web... Read More »

WordPress Coding Standards 1.1.0 are Now Available

Orlando WordPress Developer If you are a WordPress Developer, one of the major challenges in today’s development univ... Read More »