VietMX Staff asked 3 years ago
HTML 5 adds a lot of new features to the HTML specification
New Doctype
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.
<!DOCTYPE html>New Structure
<section>– to define sections of pages<header>– defines the header of a page<footer>– defines the footer of a page<nav>– defines the navigation on a page<article>– defines the article or primary content on a page<aside>– defines extra content like a sidebar on a page<figure>– defines images that annotate an article
New Inline Elements
These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
<mark>– to indicate content that is marked in some fashion<time>– to indicate content that is a time or date<meter>– to indicate content that is a fraction of a known range – such as disk usage<progress>– to indicate the progress of a task towards completion
New Form Types
<input type="datetime"><input type="datetime-local"><input type="date"><input type="month"><input type="week"><input type="time"><input type="number"><input type="range"><input type="email"><input type="url">
New Elements
There are a few exciting new elements in HTML 5:
<canvas>– an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.<video>– add video to your Web pages with this simple tag.<audio>– add sound to your Web pages with this simple tag.
No More Types for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Make your content editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>Attributes
requireto mention the form field is requiredautofocusputs the cursor on the input field
