2. HTML <article> tag
Definition and Usage
• The <article> tag specifies independent, self-contained content.
• An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
Potential sources for the <article> element:
• Forum post
• Blog post
• News story
• Comment
3. • <!DOCTYPE html>
• <html>
• <body>
• <article>
• <h1>Google Chrome</h1>
• <p>Google Chrome is a free, open-source web browser developed by
Google, released in 2008.</p>
• </article>
• </body>
• </html>
4. HTML <aside> Tag
• The <aside> tag defines some content aside from the content it is
placed in.
• The aside content should be related to the surrounding content.
5. • <!DOCTYPE html>
• <html>
• <body>
• <p>My family and I visited The Epcot center this summer.</p>
• <aside>
• <h4>Epcot Center</h4>
• <p>The Epcot Center is a theme park in Disney World, Florida.</p>
• </aside>
• </body>
• </html>
6. HTML <audio> Tag
• The <audio> tag defines sound, such as music or other audio streams.
• Currently, there are 3 supported file formats for the <audio> element:
• MP3,
• Wav, and
• Ogg
7. • <!DOCTYPE html>
• <html>
• <body>
• <audio controls>
• <source src="horse.ogg" type="audio/ogg">
• <source src="horse.mp3" type="audio/mpeg">
• Your browser does not support the audio element.
• </audio>
• </body>
• </html>
8. HTML <canvas> Tag
• The <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).
• The <canvas> tag is only a container for graphics, you must use a
script to actually draw the graphics.
9. <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>
10. HTML <details> Tag
• The <details> tag specifies additional details that the user can view or
hide on demand.
• The <details> tag can be used to create an interactive widget that the
user can open and close. Any sort of content can be put inside the
<details> tag.
• The content of a <details> element should not be visible unless the
open attribute is set.
• The details tag is currently only supported in Opera, Chrome, and in Safari 6.
11. <!DOCTYPE html>
<html>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
</body>
</html>
12. HTML <datalist> Tag
• The <datalist> tag specifies a list of pre-defined options for an <input>
element.
• The <datalist> tag is used to provide an "autocomplete" feature on
<input> elements. Users will see a drop-down list of pre-defined
options as they input data.
• Use the <input> element's list attribute to bind it together with a
<datalist> element.
13. <!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="abc" name="browser">
<datalist id="abc">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
14. HTML <embed> Tag
• The <embed> tag defines a container for an external application or
interactive content (a plug-in).
Attribute Value Description
height pixels Specifies the height of the embedded content
src URL Specifies the address of the external file to embed
type media_type Specifies the media type of the embedded content
width pixels Specifies the width of the embedded content
16. HTML <figure> Tag
• The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
• While the content of the <figure> element is related to the main flow,
its position is independent of the main flow, and if removed it should
not affect the flow of the document.
17. • <!DOCTYPE html>
• <html>
• <body>
• <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden,
opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is
approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a
famous tourist attraction in Norway.</p>
• <figure>
• <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
• </figure>
• </body>
• </html>
18. HTML <header> Tag
• The <header> element represents a container for introductory
content or a set of navigational links.
• A <header> element typically contains:
• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information
• You can have several <header> elements in one document.
• Note: A <header> tag cannot be placed within a <footer>, <address>
or another <header> element.
19. • <!DOCTYPE html>
• <html>
• <body>
• <article>
• <header>
• <h1>Most important heading here</h1>
• <h3>Less important heading here</h3>
• <p>Some additional information here.</p>
• </header>
• <p>Lorem Ipsum dolor set amet....</p>
• </article>
• </body>
• </html>
20. HTML <footer> Tag
• The <footer> tag defines a footer for a document or section.
• A <footer> element should contain information about its containing element.
A <footer> element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
22. <hgroup> tag– heading group
• The hgroup element is typically used to group a set of one or
more h1-h6 elements — to group,
• for example, a section title and an accompanying subtitle.
24. HTML <keygen> Tag
• The <keygen> tag specifies a key-pair generator field used for forms.
• When the form is submitted, the private key is stored locally, and the
public key is sent to the server.
• Note: The keygen tag is not supported in Internet Explorer.
25. <!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<p><strong>Note:</strong> The keygen tag is not supported in Internet Explorer.</p>
</body>
</html>
26. HTML <dialog> Tag
• The <dialog> tag defines a dialog box or window.
• The <dialog> element makes it easy to create popup dialogs and
modals on a web page.
•
27. <!DOCTYPE html>
<html>
<body>
<p><b>Note:</b> The dialog tag is currently only supported in Chrome version 37+, Safari 6+ and Opera
24+.</p>
<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
</body>
</html>
28. HTML <mark> Tag
• The <mark> tag defines marked text.
• Use the <mark> tag if you want to highlight parts of your text.
Do not forget to buy <mark>fruits</mark> today
29. HTML <meter> Tag
• The <meter> tag defines a scalar measurement within a known range,
or a fractional value. This is also known as a gauge.
• Examples: Disk usage, the relevance of a query result, etc.
30. • <!DOCTYPE html>
• <html>
• <body>
• <p>Display a gauge:</p>
• <meter value="2" min="0" max="10">2 out of 10</meter><br>
• <meter value="0.6">60%</meter>
• <p><strong>Note:</strong> The meter tag is not supported in
Internet Explorer or Safari 5 (and earlier versions).</p>
• </body>
• </html>
31.
32. HTML <nav> Tag
• The <nav> tag defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav>
element. The <nav> element is intended only for major block
of navigation links.
35. • <!DOCTYPE html>
• <html>
• <body>
• Downloading progress:
• <progress value="22" max="100">
• </progress>
• <p><strong>Note:</strong> The progress tag is not supported in
Internet Explorer 9 and earlier versions.</p>
• </body>
• </html>
36.
37. New Form Elements
Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
38. New Media Elements
Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
39. The HTML <video> Element
• The controls attribute adds video controls, like play, pause, and
volume.
• It is a good idea to always include width and height attributes.
• If height and width are not set, the browser does not know the size of
the video. The effect will be that the page will change (or flicker)
while the video loads.
• Text between the <video> and </video> tags will only display in
browsers that do not support the <video> element.
• Multiple <source> elements can link to different video files. The
browser will use the first recognized format.
40. • <!DOCTYPE html>
• <html>
• <body>
• <video width="320" height="240" controls>
• <source src="movie.mp4" type="video/mp4">
• <source src="movie.ogg" type="video/ogg">
• Your browser does not support the video tag.
• </video>
• </body>
• </html>
