Features : what you need to know-The latest revision of the HTML Language, currently still in development, first draft stage in 2012.-One of its core aims is to support latest multimedia whilst keeping the code both machine andhuman readable- Introduces new elements such as the <video> and <audio> tag-Introduces offline storage for web applications-Supports other technologies such as GeolocationWhats new:• Doctype has changed – now simply <!DOCTYPE HTML>•Block structure - <article> <section> <aside> <header> <footer> <nav>• Interactive elements - <video> <audio> <canvas> <source>• Inline semantics - <mark> <time> <meter> <progress>
Features : block structureBlock structure :<article> <section> <aside> <header> <footer> <nav><article>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. Thiscould be a forum post, blog post, newspaper article, a user comment, or any other independentitem of content.<section>Is a generic document or application section. However, this isn’t a replacement for the div element.A section is only appropriate if the element’s contents would be listed explicitly in the document’soutline.<aside>Is used to represent a section of content that is related to the content around the aside element, ega pull quote or a sidebar.
Features : block structure contBlock structure :<article> <section> <aside> <header> <footer> <nav><header>Represents a group of navigational aids, and is used to construct the document outline. You are alsonot restricted to using header only once; you could use this to mark up the author’s name and thetime of a comment placed on a blog post, for example.<footer>Is the footer to a section. This is not restricted to one use at the bottom of the page. You can alsouse the footer to mark up the footer of a blog post in addition to the footer of the entire document.<nav>Is used to wrap major navigation blocks, such as table of contents, pagination links andbreadcrumbs. Note that the nav element should be used for links that navigate around site, i.e.inappropriate for a list of sponsor links.
Features : html comparisonXhtml / html4 : html5 :
Features : html 5 markupcode:<body><header>...</header><nav>...</nav><article> <section> ... </section> </article><aside>...</aside> <footer>...</footer></body>
Features : html 5 outline algorithmTHE OUTLINE ALGORITHM:- Can be thought of as a table of contents for your website.- List the most important sections as individual items then list interior nested sections within them. Section and heading content is used to define the outline-Body is established as the outline root- Items are added to the outline as sectioning content is found- Initial heading content is used to name these sections- Sectioning content contained within these sections is shown as being nested in the outlinesectioning elements:<article><aside><section><nav><h1 to h6>Will all generate a new section in the outline algorithm
Features : algorithm exampleTHE OUTLINE ALGORITHM example:-Rankings of the headings determine whether they are child or parent nodes within the outline-Headings with a same or greater ranking create a new section <h2>-Headings with a lower ranking create a nested section <h3>
Features : coding hinting in dw cs5html5 and dreamweaver:- code hinting for HTML5 and CSS3- developing content on a large a number of screens – from smartphones, to desktop computers- new CSS3 capabilities – users can also more easily design the multi-screen devices- WebKit improvements for Design View and Live View rendering;-audio and video tags that allow to play media content directly via web browser
Features : css3 – border radiusCss3 and dreamweaver:-CSS Border Radius -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;At the moment, you must individually add the vendorprefix for all browers, with the border-radius propertylisted last, this ensures that when standards are finalised,all browsers will recognise the border-radius property andthe design wont render broken.Other prefixes also include :-ms ( Microsoft Explorer)-o (Opera)
Features : css3 – rounded cornersCss3 and dreamweaver:-CSS Individual Rounded Corners -webkit-border-radius: 0 0 0 20px; -moz-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px;Works in the same manner as padding/margin settings – top, right, bottom,left.
Features : css3 - gradientsCss3 and dreamweaver:-CSS Gradients-background: #e1d8b9;-background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(233,229,212,0.85)), color-stop(1, rgba(191,178,147,0.95)));-background:-moz-linear-gradient(center top, rgba(233,229,212,0.85) 0%,rgba(191,178,147,0.95) 100%);
Features : media queriesCss3 and dreamweaver:-Media Queries
Features : fuRTHER READINGONLINE RESOURCES - HTMLW3C SchoolsDive into HTML 5HTML5 RocksHTML5 GalleryONLINE RESOURCES – CSS3W3C Schoolscss3.comcss3.info