Being a good web developer means keeping up with the constantly evolving technology. One of the most fundamental building blocks of a webpage is HTML, HyperText Markup Language. Web browsers use HTML elements, written in the form of tags (open and close angle brackets) to interpret the content of the page. HTML is used to create forms, embed images and objects, and structure content. With the help of CSS (Cascading Style Sheets) and Javascript, webpages can be presented in clean, organized, and interactive eye-catching ways. Currently, the specifications of HTML4 are being used to render webpages across the web. As we transition into using HTML5, new semantics and elements are being added to the specifications. The biggest benefit of HTML5 is being able to help bridge the gap between the back-end principles of Javascript to the front-end layers of HTML.<\/p>\n
Below is a brief look on what’s new in HTML5.<\/p>\n
Starting from the top. The original DOCTYPE declaration of a website has been shortened to: Some new structural elements have been added to replace some of the more commonly used DIV IDs and classes. Markup Examples:<\/p>\n <header> <nav> HTML5 is breathing new life into web apps, from tablets to mobile. By extending the API, HTML5 gives web apps the capabilities of application caching and offline data storage. By specifying the manifest attribute to the html element. <html manifest=”manifest.cache”><\/strong>, developers are able to control which files a browser should cache. Viewers can now avoid the hassle of reconnecting to the internet to browse a page that was previously displayed before. For more information on application caching, check out the Webreference<\/a> site.<\/p>\n Video and audio APIs allow for easier embedding of such files. Probably the most interesting feature of HTML5 is the canvas element. One can finally dynamically generate graphics on a web page! The possibilities of using the canvas element is endless. Developers can now use canvas to build graphs, charts, animations, games, etc. By using Javascript, the code below draws out a red rectangle. Visit w3school<\/a> for a tutorial on the new canvas element.<\/p>\n This post was inspired by the new features of HTML5. Developers are already experimenting with HTML5. Not all browsers will display HTML5 content correctly. It’s just a matter of time when the majority of developers will code with the newly added features and when all latest version of browsers (even IE) will support it. For more references to HTML5, check out W3C Web Developer’s Guide to HTML5<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Being a good web developer means keeping up with the constantly evolving technology. One of the most fundamental building blocks of a webpage is HTML, HyperText Markup Language. Web browsers use HTML elements, written in the form of tags (open and close angle brackets) to interpret the content of the page. HTML is used to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-professional"],"_links":{"self":[{"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":11,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/posts\/26\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jintrang.com\/who-is-hu\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<!DOCTYPE html><\/strong>
\nIt’s so much easier to remember!<\/p>\n
\n<header>
\n<nav>
\n<section>
\n<article>
\n<aside>
\n<footer><\/strong>\n<\/p>\n
\n <h1>Hello World and HTML5!<\/h1>
\n <p>Lorem ipsum….<\/p>
\n<\/header><\/strong>\n<\/p>\n
\n <ul>
\n <li><a href=”#”>Home<\/a><\/li>
\n <li><a href=”#”>About<\/a><\/li>
\n <li><a href=”#”>Contact<\/a><\/li>
\n <\/ul>
\n<\/nav><\/strong><\/p>\n
\nFor example, the simplest way to embed a video is to use the new video element and allow the browser to provide a default UI with the controls attribute. The poster attribute is optional and allows for an image to be displayed in place of the video before playing. <video controls width=”250″ height=”150″ src=”file.mp4″ poster=”poster.jpg”> <\/strong>
Audio is just as simple, minus the attributes of width, height, and poster. <audio src=”audio.mp3″ controls><\/audio><\/strong><\/p>\n
\n<canvas id=”myCanvas” width=”200″ height=”100″>Display this text if browser doesn’t support canvas.<\/canvas><\/strong> is the code used to create a canvas element.<\/p>\n
\n<script type=”text\/javascript”>
\nvar example = document.getElementById(‘example’);
\nvar context = example.getContext(‘2d’);
\ncontext.fillStyle = “rgb(255,0,0)”;
\ncontext.fillRect(30, 30, 50, 50);
\n<\/script><\/strong><\/p>\n