Compare Revisions


Change Revisions

Revision 319187:

Revision 319187 by Ashprit on

Revision 319301:

Revision 319301 by juliepagano on

"References", "HTML", "HTML5", "Web Development"
"References", "HTML", "HTML5", "Web Development"

Revision 319187
Revision 319301
t7    <pre class="brush:html;">t7    <div class="callout-box">
8&lt;div class="fb-like-box" data-href="      <div style="font:normal 20px 'Bebas Neue','League Gothic',H
>fakt.mazichaahes143" data-width="300" data-height="550" data-colo>aettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:u
>rscheme="dark" data-show-faces="true" data-border-color="Gold" da>ppercase;">
>ta-stream="true" data-header="true"&gt;&lt;/div&gt; 
9</pre>9        HTML5 Demos
10      </div>
11      <p>
12        A <a href="/en-US/demos/tag/tech:html5" title="demos/tag/
 >tech:css3/">collection of demos</a> showing the latest HTML techn
 >ologies in action.
13      </p>
14      <p>
15        <a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="
 >HTML5_Logo_128.png" class="internal default" src="/@api/deki/file
 >s/6020/=HTML5_Logo_128.png" style=""></a>
16      </p>
17    </div>
18    <p>
19      <span class="seoSummary"><strong>HTML5</strong> is the late
 >st evolution of the standard that defines <a href="/en-US/docs/HT
 >ML" title="/en-US/docs/HTML">HTML</a>.</span> The term represents
 > two different concepts:
20    </p>
21    <ul>
22      <li>A new version of the <em>language</em> HTML, with new e
 >lements, attributes, and behaviors.
23      </li>
24      <li>A larger set of technologies that allows more diverse a
 >nd powerful Web sites and applications: this set is called <em>HT
 >ML5 &amp; friends</em> and often shortened to just <em>HTML5</em>
25      </li>
26    </ul>
27    <p>
28      <span class="seoSummary">Aimed at all Open Web developers, 
 >this reference links to numerous resources about HTML5 technologi
 >es, classified in several groups</span>, based on the function: <
 >em>semantics</em>, allowing to describe more precisely what the c
 >ontent is, <em>connectivity</em>, allowing to communicate with th
 >e server in new ways, <em>offline &amp; storage</em>, allowing to
 > optimize Web site to store locally data and perform better even 
 >when the browser is offline, <em>multimedia</em>, making of video
 > and audio first-class citizen of the Web, <em>3D, graphics &amp;
 > effects</em>, achieving much more complex presentation, <em>perf
 >ormance &amp; integration</em>, allowing for more speedy Web site
 >, with better integration with the computer, <em>device access</e
 >m>, allowing to use more input and output devices, and <em>stylin
 >g</em>, letting authors to write more sophisticated themes.
29    </p>
30    <table class="topicpage-table">
31      <tbody>
32        <tr>
33          <td>
34            <h2 id="Semantics" style="margin:0 0 .25em;font:200 2
 >4px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow
 >',sans-serif;letter-spacing:1px;text-transform:uppercase; border:
 > none">
35              <img alt="" src="/files/3827/
 >g" style="vertical-align:middle;width: 64px; height: 64px; paddin
36            </h2>
37            <dl>
38              <dt>
39                <a href="/en-US/docs/Sections_and_Outlines_of_an_
 >HTML5_document" title="Sections and Outlines of an HTML5 document
 >">Sections and outlines in HTML5</a>
40              </dt>
41              <dd>
42                A look at the new outlining and sectioning elemen
 >t in HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article
 >") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ 
 >HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLE
 >lement("hgroup") }}.
43              </dd>
44              <dt>
45                <a href="/en-US/docs/Using_HTML5_audio_and_video"
 > title="Using_audio_and_video_in_Firefox">Using HTML5 audio and v
46              </dt>
47              <dd>
48                The {{ HTMLElement("audio") }} and {{ HTMLElement
 >("video") }} elements embed and allow the manipution of new multi
 >media content.
49              </dd>
50              <dt>
51                <a href="/en-US/docs/HTML/Forms_in_HTML" title="F
 >orms in HTML5">Forms in HTML5</a>
52              </dt>
53              <dd>
54                A look at improvements to web forms in HTML5: the
 > constraint validation API, several new attributes, new values fo
 >r the {{ HTMLElement("input") }} attribute {{ htmlattrxref("type"
 >, "input") }} and the new {{ HTMLElement("output") }} element.
55              </dd>
56              <dt>
57                New semantic elements
58              </dt>
59              <dd>
60                Beside sections, media and forms elements, numero
 >us new elements, like {{ HTMLElement("mark") }}, {{ HTMLElement("
 >figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("dat
 >a") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {
 >{ HTMLElement("progress") }}, or {{ HTMLElement("meter") }}, incr
 >easing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_elemen
 >t_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">valid H
 >TML5 elements</a>.
61              </dd>
62              <dt>
63                Improvement in {{HTMLElement("iframe")}}
64              </dt>
65              <dd>
66                Using the {{htmlattrxref("sandbox", "iframe")}}, 
 >{{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdo
 >c", "iframe") }} attributes, authors can now precise the level of
 > security and the wished rendering of an {{HTMLElement("iframe")}
 >} element.
67              </dd>
68              <dt>
69                <a href="/en-US/docs/MathML" title="/en-US/docs/M
70              </dt>
71              <dd>
72                Allows to directly embed mathematical formulas.
73              </dd>
74              <dt>
75                <a href="/en-US/docs/HTML/HTML5/Introduction_to_H
 >TML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">Introd
 >uction to HTML5</a>
76              </dt>
77              <dd>
78                This article introduces how to indicate to the pr
 >oblem that you are using HTML5 in your web design or web applicat
79              </dd>
80              <dt>
81                <a href="/en-US/docs/HTML/HTML5/HTML5_Parser" tit
 >le="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a>
82              </dt>
83              <dd>
84                The parser, which turns the bytes of an HTML docu
 >ment into a DOM,&nbsp; has been extended and defines precisely th
 >e behavior to have in all case, even facing invalid HTML, leading
 > a to far more predictability and interoperability between HTML5-
 >compliant browsers.
85              </dd>
86            </dl>
87            <h2 id="Connectivity" style="margin:0 0 .25em;font:20
 >0 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Nar
 >row',sans-serif;letter-spacing:1px;text-transform:uppercase; bord
 >er: none">
88              <img alt="" src="/files/3839/HTML5_Connectivity_512
 >.png" style="vertical-align:middle;width: 64px; height: 64px; pad
89            </h2>
90            <dl>
91              <dt>
92                <a href="/en-US/docs/WebSockets" title="WebSocket
 >s">Web Sockets</a>
93              </dt>
94              <dd>
95                Allows to create a permanent connection between t
 >he page and the server and to exchange non-HTML data through that
 > mean.
96              </dd>
97              <dt>
98                <a href="/en-US/docs/Server-sent_events/Using_ser
 >ver-sent_events" title="/en-US/docs/Server-sent_events/Using_serv
 >er-sent_events">Server-sent events</a>
99              </dt>
100              <dd>
101                Allows a server to push events to client, rather 
 >than the classical paradigm where the server could send data only
 > in response to a client 's request.
102              </dd>
103              <dt>
104                <a href="/en-US/docs/WebRTC" title="/en-US/WebRTC
105              </dt>
106              <dd>
107                This technology, where RTC stands for Real-Time C
 >ommunication, allow to connect to other people and control videoc
 >onferencing directly in the browser, without the need for a plugi
 >n or an external application.
108              </dd>
109            </dl>
110            <h2 id="Offline_.26_storage" style="margin:0 0 .25em;
 >font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Ar
 >ial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercas
 >e; border: none">
111              <img alt="" src="/files/3833/HTML5_Offline_Storage_
 >512.png" style="vertical-align:middle;width: 64px; height: 64px; 
 >padding-right:0.5em">Offline &amp; storage
112            </h2>
113            <dl>
114              <dt>
115                <a href="/en-US/docs/HTML/Using_the_application_c
 >ache" title="Offline_resources_in_Firefox">Offline resources: the
 > application cache</a>
116              </dt>
117              <dd>
118                Firefox fully supports the HTML5 offline resource
 > specification. Most others have offline resource support at some
 > level.
119              </dd>
120              <dt>
121                <a href="/en-US/docs/Online_and_offline_events" t
 >itle="Online_and_offline_events">Online and offline events</a>
122              </dt>
123              <dd>
124                Firefox 3 supports WHATWG online and offline even
 >ts, which let applications and extensions detect whether or not t
 >here's an active Internet connection, as well as to detect when t
 >he connection goes up and down.
125              </dd>
126              <dt>
127                <a href="/en-US/docs/DOM/Storage" title="DOM/Stor
 >age">WHATWG client-side session and persistent storage (aka DOM S
128              </dt>
129              <dd>
130                Client-side session and persistent storage allows
 > web applications to store structured data on the client side.
131              </dd>
132              <dt>
133                <a href="/en-US/docs/IndexedDB" title="/en-US/doc
134              </dt>
135              <dd>
136                Is a web standard for the storage of significant 
 >amounts of structured data in the browser and for high performanc
 >e searches on this data using indexes.
137              </dd>
138              <dt>
139                <a href="/en-US/docs/Using_files_from_web_applica
 >tions" title="Using_files_from_web_applications">Using files from
 > web applications</a>
140              </dt>
141              <dd>
142                Support for the new HTML5 File API has been added
 > to Gecko, making it possible for web applications to access loca
 >l files selected by the user. This includes support for selecting
 > multiple files using the <span style="font-family: monospace;">{
 >{ HTMLElement("input") }}</span> of <a href="/en-US/docs/HTML/Ele
 >ment/Input#attr-type" title="HTML/Element/input#attr-type"><stron
 >g>type</strong></a> <span style="font-family: Courier New;">file<
 >/span> HTML element's new <a href="/en-US/docs/HTML/Element/Input
 >#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>
 >multiple</strong></a> attribute. There also is <a href="/en-US/do
 >cs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code>
143              </dd>
144            </dl>
145            <h2 id="Multimedia" style="margin:0 0 .25em;font:200 
 >24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narro
 >w',sans-serif;letter-spacing:1px;text-transform:uppercase; border
 >: none">
146              <img alt="" src="/files/3835/HTML5_Multimedia_512.p
 >ng" style="vertical-align:middle;width: 64px; height: 64px; paddi
147            </h2>
148            <dl>
149              <dt>
150                <a href="/en-US/docs/Using_HTML5_audio_and_video"
 > title="Using_audio_and_video_in_Firefox">Using HTML5 audio and v
151              </dt>
152              <dd>
153                The {{ HTMLElement("audio") }} and {{ HTMLElement
 >("video") }} elements embed and allow the manipution of new multi
 >media content.
154              </dd>
155              <dt>
156                <a href="/en-US/docs/WebRTC" title="/en-US/WebRTC
157              </dt>
158              <dd>
159                This technology, where RTC stands for Real-Time C
 >ommunication, allow to connect to other people and control videoc
 >onferencing directly in the browser, without the need for a plugi
 >n or an external application.
160              </dd>
161              <dt>
162                <a href="/en-US/docs/DOM/Using_the_Camera_API" ti
 >tle="/en-US/docs/DOM/Using_the_Camera_API">Using the Camera API</
163              </dt>
164              <dd>
165                Allows to use, manipulate and store an image from
 > the computer's camera.
166              </dd>
167            </dl>
168            <h2 id="3D.2C_graphics_.26_effects" style="margin:0 0
 > .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschwei
 >ler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:u
 >ppercase; border: none">
169              <img alt="" src="/files/3841/HTML5_3D_Effects_512.p
 >ng" style="vertical-align:middle;width: 64px; height: 64px; paddi
 >ng-right:0.5em">3D, graphics &amp; effects
170            </h2>
171            <dl>
172              <dt>
173                <a href="/en-US/docs/Canvas_tutorial" title="Canv
 >as tutorial">Canvas Tutorial</a>
174              </dt>
175              <dd>
176                Learn about the new <code>{{ HTMLElement("canvas"
 >) }}</code> element and how to draw graphs and other objects in F
177              </dd>
178              <dt>
179                <a href="/en-US/docs/Drawing_text_using_a_canvas"
 > title="Drawing_text_using_a_canvas">HTML5 text API for <code>&lt
 >;canvas&gt;</code> elements</a>
180              </dt>
181              <dd>
182                The HTML5 text API is now supported by {{ HTMLEle
 >ment("canvas") }} elements.
183              </dd>
184              <dt>
185                <a href="/en-US/docs/WebGL" title="WebGL">WebGL</
186              </dt>
187              <dd>
188                WebGL brings 3D graphics to the Web by introducin
 >g an API that closely conforms to OpenGL ES 2.0 that can be used 
 >in HTML5 {{ HTMLElement("canvas") }} elements.
189              </dd>
190              <dt>
191                <a href="/en-US/docs/SVG" title="/en-US/docs/SVG"
192              </dt>
193              <dd>
194                An XML-based format of vectorial images that can 
 >directly be embdedded in the HTML.
195              </dd>
196            </dl>
197            <dl>
198              <dt>
199                &nbsp;
200              </dt>
201            </dl>
202          </td>
203          <td>
204            <h2 id="Performance_.26_integration" style="margin:0 
 >0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschwe
 >iler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:
 >uppercase; border: none">
205              <img alt="" src="/files/3831/HTML5_Performance_512.
 >png" style="vertical-align:middle;width: 64px; height: 64px; padd
 >ing-right:0.5em">Performance &amp; integration
206            </h2>
207            <dl>
208              <dt>
209                <a href="/en-US/docs/DOM/Using_web_workers" title
 >="Using web workers">Web Workers</a>
210              </dt>
211              <dd>
212                Allows to delegate JavaScript evaluation to backg
 >round threads, allowing these activities to prevent slowing down 
 >interactive events.
213              </dd>
214              <dt>
215                <code><a href="/en-US/docs/DOM/XMLHttpRequest" ti
 >tle="XMLHttpRequest">XMLHttpRequest</a></code> Level 2
216              </dt>
217              <dd>
218                Allows to fetch asynchronously some parts of the 
 >page, allowing it to be display dynamic content, varying accordin
 >g the time and user actions. This is the technology behind <a hre
 >f="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a>.
219              </dd>
220              <dt>
221                JIT-compiling JavaScript engines
222              </dt>
223              <dd>
224                The new generation of JavaScript engines are much
 > more powerful , leading to greater performance.
225              </dd>
226              <dt>
227                <a href="
 >/DOM/Manipulating_the_browser_history" title="https://developer.m
 >ry API</a>
228              </dt>
229              <dd>
230                Allows the manipulation of the browser history. T
 >his is especially useful for pages loading interactively new info
231              </dd>
232              <dt>
233                <a href="/en-US/docs/HTML/Content_Editable" title
 >="HTML/Content Editable">The contentEditable attribute: transform
 > your website to a wiki!</a>
234              </dt>
235              <dd>
236                HTML5 has standardized the contentEditable attrib
 >ute. Learn more about this feature.
237              </dd>
238              <dt>
239                <a href="/en-US/docs/DragDrop/Drag_and_Drop" titl
 >e="DragDrop/Drag_and_Drop">Drag and drop</a>
240              </dt>
241              <dd>
242                The HTML5 drag and drop API allows support for dr
 >agging and dropping items within and between web sites. This also
 > provides a simpler API for use by extensions and Mozilla-based a
243              </dd>
244              <dt>
245                <a href="/en-US/docs/Focus_management_in_HTML" ti
 >tle="Focus_management_in_HTML">Focus management in HTML</a>
246              </dt>
247              <dd>
248                The new HTML5 <code>activeElement</code> and <cod
 >e>hasFocus</code> attributes are supported.
249              </dd>
250              <dt>
251                <a href="/en-US/docs/Web-based_protocol_handlers"
 > title="Web-based_protocol_handlers">Web-based protocol handlers<
252              </dt>
253              <dd>
254                You can now register web applications as protocol
 > handlers using the <code>navigator.registerProtocolHandler()</co
 >de> method.
255              </dd>
256              <dt>
257                <a href="/en-US/docs/DOM/window.requestAnimationF
 >rame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>
258              </dt>
259              <dd>
260                Allows to control animations rendering to obtain 
 >optimal performance.
261              </dd>
262              <dt>
263                <a href="/en-US/docs/DOM/Using_full-screen_mode" 
 >title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a>
264              </dt>
265              <dd>
266                Controls the usage of the whole screen for a Web 
 >page or application, without the browser UI displayed.
267              </dd>
268              <dt>
269                <a href="/en-US/docs/API/Pointer_Lock_API" title=
 >"/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a>
270              </dt>
271              <dd>
272                Allows to lock the pointer to the content, so gam
 >es and similar application don't lose the focus when the pointer 
 >reaches the window limit.
273              </dd>
274              <dt>
275                <a href="/en-US/docs/Online_and_offline_events" t
 >itle="/en-US/docs/Online_and_offline_events">Online and offline e
276              </dt>
277              <dd>
278                In order to build a good offline-capable web appl
 >ication, you need to know when your application is actually offli
 >ne. Incidentally, you also need to know when your application has
 > returned to an online status again.
279              </dd>
280            </dl>
281            <h2 id="Device_access" style="margin:0 0 .25em;font:2
 >00 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Na
 >rrow',sans-serif;letter-spacing:1px;text-transform:uppercase; bor
 >der: none">
282              <img alt="" src="/files/3837/HTML5_Device_Access_51
 >2.png" style="vertical-align:middle;width: 64px; height: 64px; pa
 >dding-right:0.5em">Device access
283            </h2>
284            <dl>
285              <dt>
286                <a href="/en-US/docs/DOM/Using_the_Camera_API" ti
 >tle="/en-US/docs/DOM/Using_the_Camera_API">Using the Camera API</
287              </dt>
288              <dd>
289                Allows to use, manipulate and store an image from
 > the computer's camera.
290              </dd>
291              <dt>
292                <a href="/en-US/docs/DOM/Touch_events" title="/en
 >-US/docs/DOM/Touch_events">Touch events</a>
293              </dt>
294              <dd>
295                Handlers to react to events created by a user pre
 >ssing touch screens.
296              </dd>
297              <dt>
298                <a href="/en-US/docs/Using_geolocation" title="Us
 >ing geolocation">Using geolocation</a>
299              </dt>
300              <dd>
301                Let browsers obtaining the position of the user.
302              </dd>
303              <dt>
304                <a href="/en-US/docs/Detecting_device_orientation
 >" title="/en-US/docs/Detecting_device_orientation">Detecting devi
 >ce orientation</a>
305              </dt>
306              <dd>
307                Let get the information when the device on which 
 >runs the browser change orientation. This can be used as an input
 > device (e.g. to make games that react to the position of the dev
 >ice) or to adapt the layout of a page to the orientation of the s
 >creen (portrait or landscape).
308              </dd>
309              <dt>
310                <a href="/en-US/docs/API/Pointer_Lock_API" title=
 >"/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a>
311              </dt>
312              <dd>
313                Allows to lock the pointer to the content, so gam
 >es and similar application don't lose the focus when the pointer 
 >reaches the window limit.
314              </dd>
315            </dl>
316            <h2 id="Styling" style="margin:0 0 .25em;font:200 24p
 >x/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',
 >sans-serif;letter-spacing:1px;text-transform:uppercase; border: n
317              <img alt="" src="/files/3829/HTML5_Styling_512.png"
 > style="vertical-align:middle;width: 64px; height: 64px; padding-
318            </h2>
319            <p>
320              <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">C
 >SS</a> has been extended to be able to style elements in a much m
 >ore complex way. This is often referred as <a href="/en-US/docs/C
 >SS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, though CSS is not
 > a monolitic specification anymore and the different modules are 
 >not all at level 3: some are at level 1 and some at level 4, with
 > all the intermediate levels covered.
321            </p>
322            <dl>
323              <dt>
324                New background styling features
325              </dt>
326              <dd>
327                It is know possible to put a shadow to a box, usi
 >ng {{ cssxref("box-shadow") }} and <a href="/en-US/docs/CSS/Multi
 >ple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">mul
 >tiple backgrounds</a> can be set.
328              </dd>
329              <dt>
330                More fancy borders
331              </dt>
332              <dd>
333                Not only it is now possible to use images to styl
 >e borders, using {{ cssxref("border-image") }} and its associated
 > longhand properties, but rounded borders are supported via the {
 >{ cssxref("border-radius") }} property.
334              </dd>
335              <dt>
336                Animating your style
337              </dt>
338              <dd>
339                Using <a href="/en-US/docs/CSS/Using_CSS_transiti
 >ons" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transition
 >s</a> to animate between different states or using <a href="/en-U
 >S/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS
 >_animations">CSS Animations</a> to animate parts of the page with
 >out a trigerring event, you can know control mobile elements on y
 >our page.
340              </dd>
341              <dt>
342                Typography improvement
343              </dt>
344              <dd>
345                Authors have better control to reach better typog
 >raphy. They can control {{ cssxref("text-overflow") }} and <a hre
 >f="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">hyphe
 >nation</a>, but also can a <a href="/en-US/docs/CSS/text-shadow" 
 >title="/en-US/docs/CSS/text-shadow">shadow</a> to it or control m
 >ore precisely its <a href="/en-US/docs/CSS/text-decoration" title
 >="/en-US/docs/SVG/Attribute/text-decoration">decorations</a>. Cus
 >tom typeface can be downloaded and applied thanks to the new {{ c
 >ssxref("@font-face") }} at-rule.
346              </dd>
347              <dt>
348                New presentational layouts
349              </dt>
350              <dd>
351                In order to improve the flexibility of designs, t
 >wo new layouts have been added: the <a href="/en-US/docs/CSS/Usin
 >g_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_mult
 >i-column_layouts">CSS multi-column layout</a>, and the <a href="/
 >en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexi
 >ble box layout</a>.
352              </dd>
353            </dl>
354          </td>
355        </tr>
356      </tbody>
357    </table>
358    <p>
359      &nbsp;
360    </p>

Back to History