HTML5 Markup - Why should we use HTML5?



HTML5 is a markup language used for structuring and presenting content on the World Wide Web. Its fifth version is the currently used stable version. You might have read about the HTML hierarchy in the previous article. This article will walk through the basic HTML5 code and explain the elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creative Technocrayts/title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
  <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

  <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index" class="home">
</body>
</html>

The above code snippet forms the basic framework for any web page.


I.        <!DOCTYPE html>
Doctype is the document type specification put on the top of the html file to instruct the browser the way it should render the document. The statement attempts to render the document according to relevant specification instead of getting into quirks mode.
Quirks mode is a non standard mode every browser follows thereby making the browser render inconsistent across various browsers. The browsers attempts to render webpage in a backward compatible standard. Either in the absence of this specification or absence of the statement may make the web page render quirks mode in browser, web crawlers or screen readers.

Html for 4:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
HTML for 5:
<!DOCTYPE html>

II.        HTML tag
HTML is the root element of the web page document. All other elements must be a descendant of this document. (Refer)
III.        Head element
Head is the element which contains the description of the document called metadata. The head encloses information like title, keywords, author, viewport and styles.
The charset property felicitates support of backward compatibility with legacy browsers




IV.        Conditional comments
Conditional comments are added in a web page to support older versions of IE. The first comment is to solve backward compatible bugs for all versions of IE. The second one supports IE7 and below and CSS bugs. The third link resolves IE6 bugs.
V.        Body element
Body element encloses the actual content of the webpage and there can be only one body element


Comments

Post a Comment

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>