Html5 poster

Date post:	03-Aug-2015
Category:	Technology
Upload:	lcmd
View:	182 times
Download:	0 times

Download Report this document

Share this document with a friend

Embed Size (px):

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

Transcript

HTML

www.sitepoint.com/html5guide

HEAD ELEMENTS SEMANTIC ELEMENTS

FOOTER <footer> <ul> <li>Site Map</li> <li>Privacy Policy</li> <li>Contact Us</li> </ul> </footer>

FIGCAPTION <figure> <img src=”photo.png” alt=”Robot” /> <figcaption>This is SitePoint Robot speaking</figcaption> </figure>

FIGURE <figure> <img src=”photo.png” alt=”Robot” /> </figure>

TIME AND DATE <time datetime=”2012-06-12”>Tuesday, 12 June 2012</time>

NAV <nav> <ul> <li>Home</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> <li>Pages</li> </ul> </nav>

HEADER <header> <img src=”logo.png” alt=”The Elements” height=”100”width=”250”> </header>

ARTICLE <article> <h3>Photoshop</h3> <p>Lorem ipsum dolor sit amet, consectectur adipiscing elit. Prasen ...</p> </article>

MARK <section> <p>A <mark>super-flexible</mark> ...</p> </section>

ASIDE <aside> <h3>Friendly Venus Themes</h3> <p>As premium themes go, Venus by Friendly Themes has it all ...</p> </aside>

The doctype is not case-sensitive. It has been simplifed from the unwieldy HTML4/XHTML version to this syntax above.

The mark element is used to high-light text for reference purposes due to its relevance in another context; for example, to highlight a word a user has searched for in a search field.

The hgroup element is used to group related, consecutive heading elements such as titles and subtitles.

The article element indicates an independent, self-contained item of content to be reused or redistributed elsewhere such as an interactive widget or a blog post.

The time element allows you to mark up the time structure of content in a machine-readable way; for example, a user agent can add a reminder to a calendar, or a search engine can filter results based on time. This element also allows you to express dates and times in a format of your choice using the datetime attribute.

DOCTYPE <!DOCTYPE html> <head> …

The meta element has been simplified. The http-equiv=”Content-Type” and content=”text/html” attributes can be excluded to produce this pared-down example above.

HEAD AND META <head> <meta charset=”utf-8”> </head>

Usually, <link> elements have included a type attribute, for instance, with a value of “text/css”; HTML5-based syntax encourages you to drop the type attribute completely.

LINK <link rel=”stylesheet” href=”css/styles.css?v=1.0”>

HGROUP <hgroup> <h1>Semantic Elements <i>within</i> Content</h1> <h2>Form Tags and Attributes</h2> </hgroup>

SECTION <section> <p>This element specifies a list of options displayed in ...</p> </section>