Latest Post

Saturday, 17 December 2016

HTML5 Best Introduction and Syntax [HTML5]

HTML5 is providing lots of flexibility and support the followings:
  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.

DOCTYPE Declaration  

HTML2:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5:
In HTML5 The DOCTYPE declaration for HTML5 is very simple

The declaration  of DOCTYPE is very easy and simple for the HTML5
<!DOCTYPE html>

Character Encoding(charset) 

in older version ,we use meta tag like below
<meta http-equiv=”Content-Type” content=”text/html;>

The declaration of character encoding (charset) is also very simple.

<meta charset="UTF-8">
All the above syntax is case-insensitive.


The <link> tag


HTML 5 can use simply following syntax −

<link rel="stylesheet" href="stylefile.css">

HTML 5 removes extra information required


The <script> tag

 HTML 5 can use simply following syntax :


<script src="scriptfile.js"></script>

HTML 5 removes extra information required


HTML5 Elements

HTML5 elements are marked up using start tags and end tags.HTML5 tag names are case insensitive.HTML5 elements contain some content like <h1> ....</h1> contains some heading contents or  <p>...</p> contains a paragraph.

Example:-
<h1>Write Your First Heading</h1>  
<p>Write Your First Paragraph.</p>

HTML5 Attributes
HTML Elements contain attributes  and attributes are used to set various properties of an element.

All attributes have a name and a value just like the below in the example

<div class="code-view">...</div>
<div class="code-view"  style=" height:200px;">...</div>

HTML5 attributes are not case sensitive or you can say it is case insensitive


Complete Example Of HTML5

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Template</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="wrapper">
        <header>
            <hgroup>
                <h1>HTML5 Template</h1>
                <h3>Pretty standard template</h3>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About HTML5</a></li>
                </ul>
            </nav>
        </header>
        <section>
        </section>
        <footer>
            <div class="footer_navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About HTML5</a></li>
                </ul>
            </div>
            <hgroup>
                <h3>By Alok Singh</h3>
                <h4>from Delhi, India</h4>
            </hgroup>
            <address>
<a href="#">Email Me</a>
</address>
        </footer>
</body>

</html>

Government Jobs