3. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img
4.
5. ¶ This is my paragraph. There are many like it, but this one is
mine.
¶ My paragraph is my best friend. It is my life. I must master it
as I must master my life.
¶ My paragraph, without me, is useless. Without my paragraph,
I am useless. I must word my paragraph true. I must write
straighter than my editor who is trying to kill me. I must write
before he corrects me. I will...
6. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img
7. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img
8. Becoming a Standard
HTML2 was introduced in A SHORT
Geneva, May 1994 HISTORY
OF HTML
HTML2 spec, July 1994
IETF setup, Sept 1994
W3C launched in Dec 1994
HTML3 was a hot mess
Introduces tags like FONT FACE
and BGCOLOR
HTML no longer semantic
9. WAR!
IE fucks everyone, Aug 1995 A SHORT
Embeds ActiveX HISTORY
OF HTML
NS invents craps, Sep 1995
Adds frames
Browser designers start
driving HTML standards
HTML4 was published
But no one fully supported it
10. Years wasted on XML
XHTML invented in 1999
A SHORT
No one used it HISTORY
XHTML2 created in 2002 OF HTML
No one implemented it
HTML5
TBL basically forced W3C to
draft HTML5 in 2006
W3C is utterly neutered
Largely a secretary for what the
browser implementers want
Not necessarily a bad thing
Keeps implementers in sync
12. NEW SEMANTIC ELEMENTS
<article> D e fi n es a n a r t i c l e
<aside> Co n te nt a s i de fro m pa g e c o n te n t
<bdi> Is o la tes di re c t i o nal tex t
< c o mmand > Co m man d but to n t h a t a us e r c a n i nvo ke
< d et a i l s > D e fi n es a ddi t i o nal, to g g l eable det a i l s
< s u m mar y > A v i s ible h e a di n g fo r < det a i l s > e l e m ent
< f i gu re > Se l f - c o nt aine d c o n te n t ( l i ke di a g ra ms)
< f i gc a pti on > A c a pt i o n fo r a < fi g ure > e l e men t
< fo o te r> A fo ote r fo r a do c um e n t o r s e c t i on
<he a d e r > D e fi n es a h e a de r fo r a do c um e n t o r s e cti o n
< h gro u p > G ro ups a s et o f < h 1 > to < h 6 > e l e m ent s
< m a rk > D e fi n es m a rke d/ highlighte d tex t
< m ete r > A s c a l a r m e a s urement w i t h i n a ra n g e
< n av > D e fi n es n av i gat ion l i n k s
< p ro gre s s > Th e pro g re s s o f a t a s k
< ru by > Ruby a n n ot a t io n ( E a s t As i a n t y po g ra phy )
<rt> An ex pl a n a t ion/pro nun ciat ion o f c h a ra cte r s
<rp> Wh a t to s h ow w h e n ruby a n n ot a t ions a re un s uppo r te d
< s e c t i on> A s e c t i o n i n a do c um e n t
<time> A da te / t i m e
< wb r > A p o s s i b l e l i n e - bre ak
13. OTHER NEW ELEMENTS
< a u d i o> D e fi n es s o un d c o n te n t
<video> A v i de o o r m ov i e
<so u rc e > D e fi n es m ul t i ple m e di a re s o urc e s
<embed> A c o n t a i n er fo r a n ex te rn a l a pp ( pl ug i n)
< t r a c k> D e fi n es t ra c k s fo r < v i de o > a n d < a udi o >
< c a nvas > Us e d to draw g ra ph i c s o n t h e fl y, v i a s c ri pt i ng
< d a t al is t > Spe c i fi es a l i s t o f o pt i o n s fo r i n put s
< keyge n > A key - pa i r g e n e ra tor fi e l d ( fo r fo rm s )
< o u t put> Co n t a ins re s ul t o f a c a l c ul a t ion
14. DEAD ELEMENTS (FROM HTML 4)
<acronym> <font>
<applet> <frame>
<basefont> <frameset>
<big> <noframes>
<center> <strike>
<dir> <tt>
16. <!DOCTYPE html>
<html lang="en-US">
THE BASIC
<head> BASICS
<meta charset="utf-8"> Simple Page
L ayo ut
<title>Duck Page</title>
</head>
<body>
Text about Ducks
</body>
</html>
25. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
26. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
27. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
28. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
29. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
30. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>
31. <article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<hgroup>
<h1 itemprop=headline>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p itemprop=articleBody>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time itemprop=datePublished datetime="2012-06-
13">yesterday</time></p>
</footer>
</article>
32. <article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<hgroup>
<h1 itemprop=headline>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p itemprop=articleBody>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time itemprop=datePublished datetime="2012-06-
13">yesterday</time></p>
</footer>
</article>
33. <section>
<header>
<h1>HTML</h1>
</header>
<p>
HTML is so much fun.
</p>
<footer>
Learn <a href="http://developers.whatwg.org/">more</a> about HTML.
</footer>
</section>
34. <section>
<header>
<h1>HTML</h1>
</header>
<p>
HTML is so much fun.
</p>
<footer>
Learn <a href="http://developers.whatwg.org/">more</a> about HTML.
</footer>
</section>
<section>
<header>
<h1>JavaScript</h1>
</header>
<p>
JavaScript is a good language.
</p>
<footer>
Learn <a href=”http://w3schools.com/js/">JS</a>.
</footer>
</section>
35. <article>
<header>
<h1>Computer Languages</h1>
</header>
<section>
<h1>HTML</h1>
<p>HTML is so much fun.</p>
</section>
<section>
<h1>JavaScript</h1>
<p>JavaScript is a good language.</p>
</section>
</article>
41. <dl>
<dt lang="en-US"> <dfn>color</dfn></dt>
<dt lang="en-GB"> <dfn>colour</dfn></dt>
<dd>A visual sensation of different light wavelengths</dd>
<dd>Pretty eye inputs</dd>
</dl>
42. <pre><code data-language=ruby>
x="hello world!”
puts x
</code></pre>
<p>
The variable <var>x</var> was set a string. Press <kbd>enter</kbd> to
make it run. It will output <samp>hello world!</samp>
</p>
47. <!-- pre HTML5 -->
<p>
<cite title="Eats, Shoots, and Leaves: The Zero Tolerance Approach to
Punctuation">Lynne Truss</cite> said <q>Freeze or get stabbed, mate. It's your
choice.</q>
</p>
<!-- HTML5 -->
<p>
<cite>Eats, Shoots, and Leaves: The Zero Tolerance Approach to Punctuation</cite>
by <b>Lynne Truss</b> says <q>Freeze or get stabbed, mate. It's your choice.</q>
</p>
48. The cite element represents the title of a work … A person’s
name is not the title of a work … and the element must
therefore not be used to mark up people’s names.
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-
semantics.html#the-cite-element
49. The cite element represents the title of a work … A person’s
name is not the title of a work … and the element must
therefore not be used to mark up people’s names.
WRONG. BAD. STUPID!
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-
semantics.html#the-cite-element
50. <p>
The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
device that allows off-world teams to open the iris.
</p>
<p>
Don't forget the <a href="#gdo"><abbr title="Garage Door
Opener">GDO</abbr></a>.
</p>
51. <p>
There are <data value="8">bridges</data> of them.
There will be <data value="9">nine</data> on <time datetime"2012-11-12">
Nov, 12</time>.
</p>
52. <p>
My favorite color is
<del cite="http://en.wikipedia.org/wiki/Blue">blue</del>
<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!
</p>
53. <p>
My favorite color is
<del cite="http://en.wikipedia.org/wiki/Blue" datetime="2012-06-0123:59:59Z"
>blue</del>
<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!
</p>
54. Useful bits
and things
UTILITIES Eric
doesn’t
like
67. <table class="table table-striped">
<caption>
<strong>Actors and their Characters</strong>
<details>
This is a very short list, and is inspired by nothing more than who happened to be in my head at that
moment.
</details>
</caption>
<colgroup><col class="actors"><col class="characters"></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lou Ferrigno</td>
<td>The Hulk</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3 Actors</td>
<td>4 Characters</td>
</tr>
</tfoot>
</table>
68. <table class="table table-striped">
<caption>
<strong>Actors and their Characters</strong>
<details>
This is a very short list, and is inspired by nothing more than who happened to be in my head at that
moment.
</details>
</caption>
<colgroup><col class="actors"><col class="characters"></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lou Ferrigno</td>
<td>The Hulk</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3 Actors</td>
<td>4 Characters</td>
</tr>
</tfoot>
</table>
It’s generally considered to be invented in the 40’s, but the idea of marking up text is way older than that. Anyone know what this is?
This mark is called a PILCROW.
It is hypertext that denotes a paragraph.
What this tells you is that the web existed for 5 years before any sort of standards body started taking over. This is part of the reason why it’s taken so many years to get all of these browser manufactures to agree on any sort of standards at all. Although the W3C started publishing standards, the manufactures all had their own ideas.
Time Berners Lee
Older versions of IE will not display elements they don’t recognize.
So add this script to the top of all of your HTML files, and you can start using HTML5. It might not be styled at all, but at least it’ll display. You can always use CSS and javascript to get the behavior you want.
No more using language Javascript. The language tag is deprecated, and javascript is the only supported spec language. So you can just write “script” and optionally “src”
A section is a block of text. It’s much more structured than a div, but not as structured as an article.
You can often have multiple sections in a single page, but won’t as often have more than one article.
You can embed sections inside articles. Though you can also embed articles inside sections, it’s kind of a design smell. It’s allowed, but the general rule for articles is that they should could make sense as stand alone pages.
Along with article and section, one of the biggest layout changes has been more semantically meaningful navigation.Nav is like div. It has no style of it’s own, but it’s semantically meaningful, which is enough.
Menu are different from nav. Where nav is meant to manage navigation between pages on a single site, menus are meant to group actions that can be taken on a page. Like saving a form.Where you can use buttons, there’s a new element called command. It’s just like a button, but somehow more semantic.But before you decide to run out and start using them, you should know that NO BROWSERS currently support this tag.Of course, this doesn’t mean you can’t use it, you’ll just have to do a bit of extra JavaScript and CSS work to make the elements function.In short:nav: the navigation for the site.menu: the menu for a web application
Cite is a weird little tag. It’s been around since HTML2, originally for citing scientific works, specifically, the AUTHOR of the work.But it’s changed in the HTML5 spec to instead
Their justification is that, because browsers italicize the cite tag, and you generally don’t italicize people’s names in citation, then cite should be used for the work rather than the person.To quote Jeremy Keith:The tail is wagging the dog here.The spec wants you to trade semantically meaningful markup for non meaningful one just because browsers have weird default output.
These elements will not display. Again, just giving meaning so computers can understand your page. If you want SEO, if you want really detailed, maintainable and fancy CSS, use them. Give your text meaning.
If you really want to be a good citizen, use the datetime attribute to track WHEN the text was deleted.
If you really want to be a good citizen, use the datetime attribute to track WHEN the text was deleted.
I don’t like this element. It adds no semantic meaning to the document, but instead, just says what a block can do… which isn’t any different to me than elements and attributes that dictate how a document is displayed (like the “font“ tag). I begrudgingly use it, because the related DOM actions are useful. But I dislike it on principle, and prefer to use javascript to inject these attributes when necessary and leave this crap out of the markup entirely.
Scoped styles. I have mixed feelings on this one. On one hand, I like the idea of scoping extractable sections of the DOM to have their own visuals without polluting the whole namespace with special classes and ids. On the other hand, it promotes inlining styles, which I really don’t like. We’ll just have to see how it shakes out.That said, no browsers actually support this yet, except in a s uper secret development mode in Chrome. It was just introduced, so it may die in the boardroom. But I’m all for experimentation, so let me know if you like it.
Not supported in all browsers. However, there’s a jquery plugin to make a work in them.
Not supported in all browsers. However, there’s a jquery plugin to make a work in them.
Generates a secure cryptography on the browser, and sends it as part of a form.
Number input typ
Audio or video: multiple codecs. The browser will play the one it recognizes