Recommended
More Related Content
Similar to Html5 poster
Similar to Html5 poster (20)
Recently uploaded
Recently uploaded (20)
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=”logo.png” alt=”The Elements” height=”100”width=”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>