Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.
2. SHAY HOWE
www.shayhowe.com – @letscounthedays
Quality Development with HTML5 & CSS3 @letscounthedays
3. HTML5 CSS3
Markup language to give Presentation language to
content structure and give content style and
meaning. appearance.
Quality Development with HTML5 & CSS3 @letscounthedays
7. DOCTYPE
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/
html4/loose.dtd">
HTML5
<!DOCTYPE
html>
Quality Development with HTML5 & CSS3 @letscounthedays
25. MARK
<h1>Search
results
for
'chicago'</h1>
<ol>
<li><a
href="http://www.shayhowe.com/">
Shay
is
from
<mark>Chicago</mark>.
</a></li>
</ol>
Quality Development with HTML5 & CSS3 @letscounthedays
26. METER
<meter>7
out
of
10
stars</meter>
<meter
max="10">7
stars</meter>
<meter
min="0"
max="105"
low="5"
high="65"
optimum="45"
value="47">The
car
is
moving
at
a
decent
average
mile
per
hour.</meter>
Quality Development with HTML5 & CSS3 @letscounthedays
27. PROGRESS
You
are
<progress>50%</progress>
complete.
<progress
min="0"
max="100"
value="50">Hold
tight,
your
getting
there.</progress>
Quality Development with HTML5 & CSS3 @letscounthedays
35. NEW INPUTS
• color • range
• date • search
• datetime • tel
• datetime-‐local • time
• email • url
• month • week
• number
Quality Development with HTML5 & CSS3 @letscounthedays
60. A
OLD
<p><a
href="http://www.shayhowe.com/">Shay
Howe</a>
is
a
front-‐end
web
designer
and
developer.</p>
NEW
<a
href="http://www.shayhowe.com/">
<h1>Shay
Howe</h1>
<p>Front-‐end
web
designer
and
developer.</p>
</a>
Quality Development with HTML5 & CSS3 @letscounthedays
61. B
OLD
Text rendered as bold.
NEW
Text stylistically offset without importance.
Quality Development with HTML5 & CSS3 @letscounthedays
62. CITE
OLD
Reference to another source.
NEW
Specifically a reference to a title of work.
Quality Development with HTML5 & CSS3 @letscounthedays
63. HR
OLD
Render a horizontal rule.
NEW
A paragraph-level thematic break.
Quality Development with HTML5 & CSS3 @letscounthedays
64. I
OLD
Text rendered as italic.
NEW
Text in an alternative voice or tone.
Quality Development with HTML5 & CSS3 @letscounthedays
65. MENU
OLD
A single column menu list.
NEW
A group of controls, most commonly used within web
applications.
Quality Development with HTML5 & CSS3 @letscounthedays
66. S
OLD
Text rendered with a line through it.
NEW
Text struck from the content that is no longer accurate or
relevant.
Quality Development with HTML5 & CSS3 @letscounthedays
67. SMALL
OLD
Text rendered as small.
NEW
Text within side comments or small print.
Quality Development with HTML5 & CSS3 @letscounthedays
68. OBSOLETE ELEMENTS
& ATTRIBUTES
Quality Development with HTML5 & CSS3 @letscounthedays
69. OBSOLETE ELEMENTS
• acronym • frame
• applet • frameset
• basefont • isindex
• big • noframes
• center • strike
• dir • tt
• font •u
Deprecated from HTML 4.0
Quality Development with HTML5 & CSS3 @letscounthedays
70. OBSOLETE ATTRIBUTES
• align • frame • profile
• alink • frameborder • scrolling
• background • hspace • shape
• bgcolor • link • size
• border • name • target
• cellpadding • nohref • text
• cellspacing • noshade • type
• coords • nowrap • valign
Quality Development with HTML5 & CSS3 @letscounthedays