Technology Powered Knowledge Base
Click Here To Make FREE Audio & Video Call From Web Browser!

HTML5, CSS3 and JS Quick Start Guide and Complete References

VN:F [1.9.22_1171]
Rating: +16 (from 16 votes)
VN:F [1.9.22_1171]
Rating: 10.0/10 (15 votes cast)

Semantic Elements:
A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> – Tells nothing about its content. Examples of semantic elements: <form>, <table> and <img> – Clearly defines its content.
 
Following semantic elements are newly added in HTML5, Every HTML5 supported browser can accept those tags even smart phone browser also support them.


<article>       Defines an article
<aside> 	Defines content aside from the page content
<details> 	Defines additional details that the user can view or hide
<figcaption> 	Defines a caption for a <figure> element
<figure> 	Specifies self-contained content, illustrations, diagrams, photos etc.
<footer> 	Defines a footer for a document or section
<header> 	Specifies a header for a document or section
<main> 	        Specifies the main content of a document
<mark> 	        Defines marked/highlighted text
<nav> 	        Defines navigation links
<section> 	Defines a section in a document
<summary> 	Defines a visible heading for a <details> element
<time> 	        Defines a date/time

Browser Support:
Internet Explorer 9+, Firefox, Chrome, Safari and Opera supports the semantic elements. Android and iOS browser also supports HTML5 tags.
 
IE8 and earlier does not know how to render CSS on elements that it doesn’t recognize. You cannot style new HTML5 elements on them.
Thankfully, Sjoerd Visscher has discovered a JavaScript workaround called HTML5 Shiv; to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.
You can download and read more about the HTML5 Shiv at: http://code.google.com/p/html5shiv/
To enable the HTML5 Shiv (after downloading), insert the following code into the element:


<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

Sample Template:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Welcome to HTML5 Semantic Tag World</title>
    <style type="text/css">
        header, nav, main, section, article, aside, footer{ margin:1%; padding:1%; border:1px solid #e6e6e6; }
        section{ display:inline-block; width:70%; }
        aside{ display:inline-block; width:10%; vertical-align:top; }
    </style>
</head>
<body>
<header>
    <h1>HTML5 & CSS3</h1>
</header>
<nav>
    <a href="">Home</a> | <a href="">About</a> | <a href="">Contact</a>
</nav>
<main>
    <section>
        <article>
            <h3>Different type of programming languages for different needs, But JAVA is all in one!</h3>
            <mark>Java</mark>, <mark>J2EE</mark>, <mark>J2ME</mark>, <mark>Android J</mark>
            <p>
                Java can be used for desktop applications, mobile applications No bar about operating systems, Could be Windows, Linux, MacOS, Android, Symbian etc.
                Not only that Java is used for majority of devices such as router, Television, Microwave Ovens, Air Conditioner etc.
                Not sure about iOS for Java. C is the father of all languages. Almost every language built with C. Java is most widely used language, but without any competitor.
            </p>
        </article>
        <article>
            <h3>HTML5 thousands of possibilities along with CSS3, JQuery, Bootstrap, AngularJS etc.</h3>
            <mark>HTML5</mark>, <mark>CSS3</mark>, <mark>JS</mark>, <mark>Interface</mark>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum.
            </p>
        </article>
        <article>
            <h3>HTML5, JQuery, NodeJS based modern client-server applications, great imagination.</h3>
            <mark>HTML5</mark>, <mark>JS</mark>, <mark>JQuery</mark>, <mark>NodeJS</mark>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum.
            </p>
        </article>
    </section>
    <aside>
        Search by Object
        <br>
        Search by Subject
        <br>
        Search by Article
    </aside>
</main>
<footer>
    &copy; 2014 - Santanu Brahma, All Rights Reserved.
</footer>
</body>
</html>

Famous Articles:
http://www.w3schools.com/html/html5_intro.asp
http://www.w3schools.com/css/css3_intro.asp

HTML5, CSS3 and JS Quick Start Guide and Complete References, 10.0 out of 10 based on 15 ratings



Sign Up     Sign In