HTML 5
HTML 5 is the new standard of the previous version HTML 4.In HTML 5 we have some more options like tags through that we can reduce the use of external plugins like flash , we can reduce the scripting through tags ,we can create animations using canvas in HTML 5 .And HTML 5 allows 2D drawing also.And many more features are there for HTML 5 that we will discuss here.
Minimum Required Tags of HTML 5
<html> <head> </head> <body> </body> </html>
These are the minimum tags required for a document in HTML 5.And just the go through the <!DOCTYPE> is there any difference from the previous version of HTML 5?
1.<!DOCTYPE>
in HTML the <!DOCTYPE> is like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And in HTML 5
<!DOCTYPE html>
Why we are using <!DOCTYPE>? Mainly the <!DOCTYPE> helps the web browser to display the content in its standard mode.
2.New Structural Elements of HTML5
Structural Elements – HTML 5
i)<article>
The <article> tags is introduced in HTML 5The use of article tag is to present data in a page.But the data is independent like it is not directly related to the explanation of the surrounding data.And commonly the <article> tag is used as side bars in pages.
<article> <h2>Popular posts</h2> <h4>Creating Flex Project in flash builder</h4> <h4>Setting up the compiler options</h4> <h4>Android-kitkat</h4> </article>
article – HTML 5
ii)<aside>
The <aside> tag is new in HTML 5.The <aside> tag will display details in the page that should be related to the surrounding text of that particular page or blog.And we will use this when we have to give some extra focus on some data .And the <aside> tag is common to use as a side bar in pages.
<aside> <h2>Project types in Flash Bullder\</h2> <h3>IOS</h3> <h3>Android</h3> <h3>Blackberry</h3> <h3>Web</h3> <h3>Desktop</h3> </aside>
aside – HTML 5
iii)<bdi>
The <bdi> tag is new to HTML 5. bdi means- Bi-directional Isolation We will use the <bdi> tag when we want to isolates a part of text or paragraph that might be formatted in some other direction when comparing with the outside text eg: Normally we will write English from left to right and if we want to add some Arabic text inside our English, Normally we will write Arabic from right to left. If we are using <bdi> tags it will take care of this situation.
<h1><bdi>?????</bdi>welcome to the registration portal</h1>
iv)<details>
The main use of details tag is the user can make the visibility of the content that is inside <details> tag either true or false.One attribute is their called “open” it will take care of that part. An mainly the <details> tag is used to create some widgets that the user make it visible or hide. There is no restriction of the type of data that we can show through <details>
v)<summary>
The summary tag is used as a header for the <details> element and we can create it like when we are clicking on the summery data we can make the visibility of the body of the <details> tag true or false.
<details> <summary> Recent Posts </summary> <h3>Creating a Flex project in flash builder</h3> <h3>Automatic backup-PostgresSQL</h3> </details>
summary – HTML 5
vi)<dialog>
The dialog tag is used to define a dialog and is also having the open attribute. “And it is only supported in Safari 6 and chrome”.
<h1>Hai</h1> <dialog>Welcome</dialog> <h1>to Technobytz</h1>
vi)<figure>
Inside the figure tag we will specify a self contained information’s like images ,photos,…etc. And there is one more option is available we can also provide heading for our images through “<figcaption>” .
<figure><img alt="" src=" exm.jpg" /> <figcaption>Example </figcaption> </figure>
vii)<header>
<header> tag is new in HTMl 5. And is used to define a header to our page and here we will specify all the introductory details about the page.We can’t put one <header> tag in side another< header> or <footer > tag. we can have more than one <header> tag for our document.
</pre> <header> <h5>Technobytz</h5> </header> <pre>
viii)<nav>
<nav> tag is new to HTML 5 and can define a set of navigational links. And there is no rule that we have to give all the navigational links inside the <nav> tag
<nav><a href="#">Home</a> <a href="#">Products</a> <a href="#">Contact Us</a> </nav>
ix)<section>
The section tags in HTML simply defines an area in a page nothing else.it may be either a header, footer, content or main body of the page.
<section id="new_one"> This will define an area in the page </section>
x)<footer>
The <footer> tag is also new to HTML 5 and it will define a footer in our page.
<footer>Contact Information<footer>
xi)<meter>
The meter tag is used to display scalar measurement with in a known range and it has many attributes. The eg:-
<meter value="45" min="0" max="100"> 45 out of 100 </meter>
meter – HTML 5
xii)<mark>
If we want to highlight a text or part of a text then we can use the <mark> tag in HTMl 5 .it will show the text with a default background color.
<h2>Hi<mark>User</mark>Welcome to technobytz.com</h2>
mark – HTML 5
xiii)<progress>
This is our normal progress bar for showing the progress of our current task.Mainly two attributes are there
MAX – its is for representing the total amount of work
VALUE -Its for representing how much work completed.
<progress value="40" max="100"></progress>
progress bar – HTML 5
xiv)<time>
The <time> tag is used to specify either the time or date.
3. Removed Elements From HTML5
HTML 5 Removed Elements
4. No type Specification
In earlier versions of html we used to have type specification like
<link href="ex.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="sx.js"></script>
this but in HTML 5 no need for specifying any type specification.
<link rel="stylesheet" /> <script type="text/javascript"></script>
5. Edit your content
we can make our content editable in the static pages. For this we will use the “contenteditable” property .
Through setting the “contenteditable ” to “true” we will able to edit the content.
<label contenteditable="true">Hai , lets try with contenteditable</label>
6. Form Elements
There are some newly added form elements in HTML 5 now we are going discuss that in detail.
i) <datalist>
<datalist> in HTML 5, we are using with the <input> elements to produce a pre-defined list of items or values.Through this the user will able to see a pre-defined set of values for the <input> element .And it is like the “Autocomplete” feature
<input list="posts"> <datalist id="posts"> <option value="Setting up the compiler options in flash builder"> <option value="introduction to flash builder"> <option value="Navigation-viewStack or Dynamically adding"> <option value="Creating a project in Flash builder"> <option value="10 most useful commands in PostgreSQL"> </datalist>
the page will look like this :
ii)<keygen>
The <keygen> is used to authenticate the users. The keygen is used in form for secure authentication. And the <keygen> is generating a key-pair in the form. And when we are submitting the form two pairs of keys will generate.one will local to the browser and the other one will go to the server. And the one we are sending to the server is used to generate user authentication.
<form method="post" action="ExampleServlet"> <input type="text" name="user_name"> <input type="password" name="pwd"> <keygen name="security>" <input type="submit"> </form>
In the above code snippet we are generating key pairs for authenticating users one will be in browser and the other one will go to servlet specified in the action “ExampleServlet” there we can generate secure authentication for the current user.
iii)<output>
The <output> tag is used to specify the output of simple calculations like sum,average..etc.
<form oninput"x.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)"> <input type="number" id="a" value="40"> <input type="number" id="b" value="40"> <input type="number" id="c" value="40"> <output name="x" for="a b c"> </form>
output – HTML 5
7) Time to replace external plugins for color picker
HTML 5 introduces an input type “color” for picking the color like a color picker.With this we can replace all the plug ins that we are using for color picker.
Pick the color :<input type="color" name="myColor">
Color picker – html 5
8) Try this date picker
Still you are using external plugins for date picker, then just try this once. HTML 5 introduces a new input type “Date”
<input type="date">
There are two ways to use this default date picker one
– Select the particular field and we can use the scroll buttons to change the field
Date picker – html 5
second,
-We can use the calender pop up for selecting the date
Date picker – html 5
9) Email
HTML 5 introduces a new input type “email” for inputting the email addresses, and automatically it will check whether the email is valid or not while submitting so, no need for external scripts.
Email : <input type="email">
Email – html 5
10) Input type :Number
How do we enter age in a form? through text box only right..So from now onwards there is a change. In HTML 5 there is a new input type “Number“.So we can either we can directly type the number 0r we can use the slider buttons for changing the number.
<input type="number">
Number -html 5
11)Input type:Range
Html 5 is having a new input type “range” its used when we have to specify a range of values for a particular input field. And many attributes are available in range type:
-MAX :it will specify the maximum value that the field can accept
-MIN :it will specify the minimum value the field can accept
-STEP :it will specify the legal interval of numbers that the field can accept
-VALUE :it will specify the default value.
Mark : <input type="range" max="100" min="0" value="10" step="1">
Range-html 5
Thanks for reading!! I think we have covered some basics but still there are lots to cover that we will discuss in the next posts.
1 comment
[…] Basado en el artículo HTML 5 Newly Added Features – Discussion | HTML 5 Tutorials. […]