Scribd
Upload
58 views

HTML5 2

The document describes new semantic HTML5 elements like section, article, aside, header, footer, nav, and figure that provide clear descriptions of content. It also covers audio, video, time and progress elements and their attributes.

Uploaded by

Shraddha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
58 views

HTML5 2

The document describes new semantic HTML5 elements like section, article, aside, header, footer, nav, and figure that provide clear descriptions of content. It also covers audio, video, time and progress elements and their attributes.

Uploaded by

Shraddha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML5 Document:

The following tags have been introduced for better structure:

 section: This tag represents a generic document or application section. It can be used
together with h1-h6 to indicate the document structure.

 article: This tag represents an independent piece of content of a document, such as a blog
entry or newspaper article.

 aside: This tag represents a piece of content that is only slightly related to the rest of the
page.

 header: This tag represents the header of a section.

 footer: This tag represents a footer for a section and can contain information about the
author, copyright information, et cetera.

 nav: This tag represents a section of the document intended for navigation.

 dialog: This tag can be used to mark up a conversation.

 figure: This tag can be used to associate a caption together with some embedded content,
such as a graphic or video.

SEMANTIC ELEMENTS

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.

New Semantic Elements in HTML5

Many of existing web sites today contains HTML code like this: <div id="nav">, <div
class="header">, or <div id="footer">, to indicate navigation links, header, and footer.

new semantic elements to clearly define different parts of a web page:

 <header>

 <nav>

 <section>
 <article>

 <aside>

 <figcaption>

 <figure>

 <footer>

The section element represents a generic document or application section. A section, in this


context, is a thematic grouping of content, typically with a heading

<!DOCTYPE html>
<html>
<body>

<section>
<h2>VISION :</h2>
<p>image To set unparalleled standards of career-oriented IT education and molding
high quality man power pool for all levels of India´s fastest growing industry.</p>
</section>
<section>
<h2>MISSION :</h2>
<p>To be a premier educational institute generating readily employable skilled
manpower in compliance with the international standards to help our students build
world class careers.</p>
</section>

</body>
</html>

The article element represents a component of a page that consists of a self-contained


composition in a document, page, application, or site and that is intended to be independently
distributable or reusable.

An article should make sense on its own and it should be possible to distribute it independently
from the rest of the web site.

<article> element can be used:

Forum post

Blog post

News story

Comment

<!DOCTYPE html>
<html>
<body>

<article>
MISSION :
To be a premier educational institute generating readily employable skilled manpower
in compliance with the international standards to help our students build world class
careers.
</article>
</body>
</html>

The nav element represents a section of a page that links to other pages or to parts within the
page: a section with navigation links. Not all groups of links on a page need to be in
a nav element — only sections that consist of major navigation blocks are appropriate
forthe nav element.
The <nav> element is intended for large blocks of navigation links. However, not all links in a
document should be inside a <nav> element

<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/Home">Home</a> |
<a href="/about/">About Us</a> |
<a href="/service/">Service</a> |
<a href="/contact/">Contact Us</a>
</nav>

</body>
</html>

The aside element represents a section of a page that consists of content that is tangentially


related to the content around the aside element, and which could be considered separate from that
content. Such sections are often represented as sidebars in printed typography.

<!DOCTYPE html>
<html>
<body>

<p>VISION :image To set unparalleled standards of career-oriented IT education and


molding high quality man power pool for all levels of India´s fastest growing
industry.</p>
<aside>
<p>MISSION :
To be a premier educational institute generating readily employable skilled manpower
in compliance with the international standards
to help our students build world class careers.</p>
</aside>

</body>
</html>

The header element represents a group of introductory or navigational aids. A header element is


intended to usually contain the section’s heading.

<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

</body>
</html>

The footer element represents a footer for its nearest ancestor sectioning content or sectioning
root element. A footer typically contains information about its section such as who wrote it, links
to related documents, copyright data, and the like.

<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01">2:30</time></p>
</footer>

</body>
</html>

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.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be
placed as the first or last child of the <figure> element.

<!DOCTYPE html>
<html>
<body>

<figure>
<img src="index.jpg" alt="fish" width="304" height="228">
<figcaption>Fig.1 - Index</figcaption>
</figure>

</body>
</html>

The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar,
optionally with a time and a time-zone offset.

<!DOCTYPE html>
<html>
<body>

<p>We open at <time>10:00</time> every morning.</p>


<p>I have a date on <time datetime="2011-02-28">Sunday</time>.</p>

</body>
</html>

The <mark> tag defines marked text.

<!DOCTYPE html>
<html>
<body>

<p>It is our policy to provide quality services on <mark>a best effort basis to satisfy
</mark>the stated and implied needs of our students.</p>

</body>
</html>

The progress element allows you to mark up a value that is in the process of changing. you
have min, max, and value attributes.

<!DOCTYPE html>
<html>
<body>

<progress min="0" max="100" value="90"></progress>


</body>
</html>
Audio & Video:
Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of
the web. While audio on the web no longer requires a plugin, the audio tag brings significant
limitations for implementing sophisticated games and interactive applications.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set
src attribute to identify the media source and include a controls attribute so the user can play and
pause the media.
The control attribute adds audio controls, like play, pause, and volume. You should also insert
text content between the <audio> and </audio> tags for browsers that do not support the <audio>
element.

The <audio> element allows multiple <source> elements. <source> elements can link to different
audio files. The browser will use the first recognized format.

there are 3 supported file formats for the <audio> element: MP3, Wav, andOgg

Browser .mp3 . .ogg


wav
Mozzila Firefox 3.6 ✓ ✓
Opera 10.63 ✓ ✓
Google Chrome 8.0 ✓ ✓ ✓
Apple Safari 5.0.3 (with ✓ ✓
QuickTime)

Microsoft IE 9 Beta ✓ ✓

<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="songs.ogg" type="audio/ogg">
<source src="s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
The control attribute adds video controls, like play, pause, and volume.It is also a good idea to
always include width and height attributes. If height and width are set, the space required for the
video is reserved when the page is loaded. However, without these attributes, the browser does
not know the size of the video, and cannot reserve the appropriate space to it. The effect will be
that the page layout will change during loading (while the video loads).

You should also insert text content between the <video> and </video> tags for browsers that do
not support the <video> element.
The <video> element allows multiple <source> elements. <source> elements can link to different
video files. The browser will use the first recognized format.

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls>

<source src="song.mp4" type="video/mp4">

<source src="song.ogg" type="video/ogg">

</video>

</body>

</html>

You might also like