html5 intro | tutorialplanet
html5 give a new approach to design sample HTML applications using <article> , <section> tags . html -5 ignores few standard HTML tags like <center>,<frameset>,<strike>,<u> & <font>and etc.. refer w3 school to know all eliminate HTML tags. This article will helpful to understand html5 intro
- HTML-5 offers new set of HTML tags like structure elements , form elements & input types for good document structure.
Sample html5 markup :-
<html> <header> <h3> heading for this page </h3> </header> <body> <section> <article> thanks for visit tutorialplanet <aside> push content to a side </aside> </article> <article style="margin-left:30px"> we are awesome to do good things </article> </section> </body> </html>
Sample output of the above markup
Explanation of above markup :-
- We place all header tags like(h1,h2,h3,h4,h5,h6) inside header tag as show above
- Inside <body> tag we find <section> tag , the <section> tag will contain all number of <article >tags
- Inside <article> tag, we can place any html tags like <p>,<mark>,<aside>,. In html-5 we using <article> tag’s instead of <div> tag’s
- Inside <footer> tag we place footer content like any banners , copy rights information ,or contact information
- Later we do more sample applications using HTML-5
New input type in html5 :-
- <input type=”number”>:- it is used for input text field to allow only numbers & It will support two new attribute to restrict those numbers .but few of traditional browser will not support these attributes.
- <input type=”number”>:- <input type=”number” min=”1″max=”10″> ,min &max are two attributes of input field ,don’t forget all input fields will be placed inside <form> tag only
- <input type=”color”>:- it is used to create a color picker for text field on web browser ,but it will not support in IE
- <input type=”date”>:- it is used to create date picker on web application ,this input field have two attributes like max and min to restrict the date on date picker
place the following HTML elements in between body tags , i hope that you can do this thing .Thanks for doing
<section> <article> <form> <label>pick color :</label> <input type="color"> <p>pick date in between 2000 to 2070 </p> <input type="date" min="2000-01-01" max="2070-01-01"> <input type="submit"> </form> </article> </section>
- Input type submit will be inside of <form> tag to submit form
Sample output :-
- When user click on color picker then the color window will be populate as show above
- When user click on date picker field ,the calendar window will be populate on web browser , if the you didn’t select the date in between the range.
- Then the browser through an error message when user try to submit the form to web browser.
- As the same way we have input type =”week”, input type =”month” , input type=”time” to know all input field refer w3school.com
- Later we discuss remaining all input fields
Learn Basic HTML step by step
Html headings tags will grab the attention of user, when user traveling throughout web application .Among all html header tag <h1> is the first priority and <h6> is the last priority.
HTML <p> tag It don’t care about space and gap line, it will automatically ignore tab spaces and gap lines on render time.
HTML Attributes will provide extra information of html element or with help of html attributes you will be change the content of the html element.
we used html colors in web application ,in three areas ,those are foreground HTML colors , background HTML colors and gradient HTML colors.
We Used html formatting tags in web application, to change the appearance of content , on web browser
we used Html lists to display content on web application in listed format, we have couple of html lists types those are ordered-list, unordered-list, and description list.
html a tag [ anchor tag ]defines a hyperlink to navigate one page to another page , it will depending on the attribute of HTML<a> tag
Html forms are used to grab the information of user and display some information to End user .
Learn Basic HTML 5 step by step
HTML 5 intro html5 give a new approach to design sample HTML applications using <article> , <section> tags . html -5 ignores few standard HTML tags like <center>,<frameset>,<strike>,<u> & <font>and etc..
we used html5 svg tags ,to draw 2-Dimensional shapes and lines on web browser. SVG stands for Scalable Vector Graphic and it have some predefined methods to draw graphic lines on web browser
html 5 drag and drop is one of the common interface on web application , it will make easy to do copy ,delete of items on web application with use of mouse clicks.
Thanks for Reading this article .Like my page for more and share to your friends