際際滷

際際滷Share a Scribd company logo

Html5 poster

L
LCMD

The document provides an overview of HTML5 semantic elements including headings, navigation, articles, sections, figures, and footers. It describes the purpose and proper usage of each element, such as using <header> for introductory content, <nav> for navigation links, <article> for independent items of content, and <footer> for closing copyright information. It also simplifies some elements like removing the type attribute from <link> and <meta> elements.

1 of 1
Downloaded 25 times
www.sitepoint.com/html5guide HEAD ELEMENTS SEMANTIC ELEMENTS NAV DOCTYPE <nav> <!DOCTYPE html> <ul> <head> <li>Home</li> <li>Portfolio</li> HEADER <li>Blog</li> <header> <li>Contact</li> The doctype is not case-sensitive. It has been <li>Pages</li> <img src=/slideshow/html5-poster/14062792/logo.png alt=The Elements height=100width=250> simplifed from the unwieldy HTML4/XHTML version </ul> to this syntax above. </header> </nav> HEAD AND META <head> <meta charset=utf-8> </head> TIME AND DATE The meta element has been simplified. <time datetime=2012-06-12>Tuesday, The http-equiv=Content-Type and content=text/html 12 June 2012</time> 5 attributes can be excluded to produce this pared-down example above. The time element allows you to mark up the time structure of content in a machine- The article element indicates an independent, readable way; for example, a user agent can self-contained item of content to be reused add a reminder to a calendar, or a search or redistributed elsewhere such as an HTML engine can filter results based on time. This interactive widget or a blog post. element also allows you to express dates and LINK times in a format of your choice using the ARTICLE <link rel=stylesheet href=css/styles.css?v=1.0> datetime attribute. <article> ASIDE <h3>Photoshop</h3> <aside> <p>Lorem ipsum dolor sit amet, consectectur <h3>Friendly Venus Themes</h3> adipiscing elit. Prasen ...</p> Usually, <link> elements have included a type attribute, <p>As premium themes go, Venus by Friendly </article> for instance, with a value of text/css; HTML5-based Themes has it all ...</p> syntax encourages you to drop the type attribute </aside> completely. HGROUP <hgroup> <h1>Semantic Elements <i>within</i> Content</h1> <h2>Form Tags and Attributes</h2> The mark element is used to high- </hgroup> MARK light text for reference purposes due <section> to its relevance in another context; for The hgroup element is used to group related, <p>A <mark>super-flexible</mark> ...</p> example, to highlight a word a user has consecutive heading elements such as titles </section> searched for in a search field. and subtitles. SECTION <section> <p>This element specifies a list of options displayed in ...</p> FIGURE </section> <figure> <img src=photo.png alt=Robot /> </figure> FIGCAPTION <figure> <img src=photo.png alt=Robot /> <figcaption>This is SitePoint Robot speaking</figcaption> FOOTER </figure> <footer> <ul> <li>Site Map</li> <li>Privacy Policy</li> <li>Contact Us</li> </ul> </footer>

More Related Content

Html5 poster

  • 1. www.sitepoint.com/html5guide HEAD ELEMENTS SEMANTIC ELEMENTS NAV DOCTYPE <nav> <!DOCTYPE html> <ul> <head> <li>Home</li> <li>Portfolio</li> HEADER <li>Blog</li> <header> <li>Contact</li> The doctype is not case-sensitive. It has been <li>Pages</li> <img src=/slideshow/html5-poster/14062792/logo.png alt=The Elements height=100width=250> simplifed from the unwieldy HTML4/XHTML version </ul> to this syntax above. </header> </nav> HEAD AND META <head> <meta charset=utf-8> </head> TIME AND DATE The meta element has been simplified. <time datetime=2012-06-12>Tuesday, The http-equiv=Content-Type and content=text/html 12 June 2012</time> 5 attributes can be excluded to produce this pared-down example above. The time element allows you to mark up the time structure of content in a machine- The article element indicates an independent, readable way; for example, a user agent can self-contained item of content to be reused add a reminder to a calendar, or a search or redistributed elsewhere such as an HTML engine can filter results based on time. This interactive widget or a blog post. element also allows you to express dates and LINK times in a format of your choice using the ARTICLE <link rel=stylesheet href=css/styles.css?v=1.0> datetime attribute. <article> ASIDE <h3>Photoshop</h3> <aside> <p>Lorem ipsum dolor sit amet, consectectur <h3>Friendly Venus Themes</h3> adipiscing elit. Prasen ...</p> Usually, <link> elements have included a type attribute, <p>As premium themes go, Venus by Friendly </article> for instance, with a value of text/css; HTML5-based Themes has it all ...</p> syntax encourages you to drop the type attribute </aside> completely. HGROUP <hgroup> <h1>Semantic Elements <i>within</i> Content</h1> <h2>Form Tags and Attributes</h2> The mark element is used to high- </hgroup> MARK light text for reference purposes due <section> to its relevance in another context; for The hgroup element is used to group related, <p>A <mark>super-flexible</mark> ...</p> example, to highlight a word a user has consecutive heading elements such as titles </section> searched for in a search field. and subtitles. SECTION <section> <p>This element specifies a list of options displayed in ...</p> FIGURE </section> <figure> <img src=photo.png alt=Robot /> </figure> FIGCAPTION <figure> <img src=photo.png alt=Robot /> <figcaption>This is SitePoint Robot speaking</figcaption> FOOTER </figure> <footer> <ul> <li>Site Map</li> <li>Privacy Policy</li> <li>Contact Us</li> </ul> </footer>