Compare Revisions


Revision 308313:

Revision 308313 by teoli on

Revision 319187:

Revision 319187 by Ashprit on

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

Revision 308313
Revision 319187
t7    <div class="callout-box">t7    <pre class="brush:html;">
8      <div style="font:normal 20px 'Bebas Neue','League Gothic',H8&lt;div class="fb-like-box" data-href="
>aettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:u>fakt.mazichaahes143" data-width="300" data-height="550" data-colo
>ppercase;">>rscheme="dark" data-show-faces="true" data-border-color="Gold" da
 >ta-stream="true" data-header="true"&gt;&lt;/div&gt;
9        HTML5 Demos9</pre>
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