HTML5 new elements. The tag specifies independent, self- contained content. An article should make...

HTML5 new elements

<article>• 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

<article>• <!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>

<footer>

• The <footer> tag defines a footer for a document or section.

• A <footer> element should contain information about its containing element.

• A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

• You can have several <footer> elements in one document.

example• Tip: Contact information inside a <footer>

element should go inside an <address> tag.

<!DOCTYPE html><html><body>

<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>. </p></footer>

</body></html>

http://www.w3schools.com/tags/tag_address.asp

mailto:[email protected]

<header>

• The <header> tag specifies a header for a document or section.

• The <header> element should be used as a container for introductory content or set of navigational links.

• You can have several <header> elements in one document.

<header>

• Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

• <!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 .....</p>• </article>

• </body>• </html>

<nav>• The <nav> tag defines a set of navigation links.

• NOT all links of a document should be inside a <nav> element.

• The <nav> element is intended only for major block of navigation links.

• Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.


<nav><a href="/html/">HTML</a> |<a href="/css/">CSS</a> |<a href="/js/">JavaScript</a> |<a href="/jquery/">jQuery</a></nav>

</body></html>

<section>• The <section> tag defines sections in a document, such

as chapters, headers, footers, or any other sections of the document.

• The HTML <section> tag is used to represent a section within an article.

• Any given web page or article could have many sections.

• For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.


<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p></section>

<section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p></section>

</body></html>

<article><header>

<h1>Welcome</h1></header><section>

<h4>What We Do</h4><p>We protect sharks...</p>

</section><section>

<h4>News Items</h4><p>Man eats shark...</p>

</section><section>

<h4>Contact Us</h4><p>At the beach...</p>

</section></article>

HTML5 new elements. The tag specifies independent, self- contained content. An article should make...

Documents

Transcript of HTML5 new elements. The tag specifies independent, self- contained content. An article should make...