HTML5 Resources and Tutorials

m5 design studio logo

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

Author

M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.


Google Chrome Is Getting Rid Of Cookies

Google Chrome is getting rid of cookies: The Future of Digital Marketing in a Cookieless World

Digital Marketing Agency The digital marketing landscape is undergoing a major transformation with the impending dep
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
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

Comments are closed.