Introduction HTML 5 (Hypertext Markup Language 5)

 HTML5 is an exciting and powerful standard for the development of advanced web pages. It offers the ability for web designers to integrate many convenient and flexible features into their web pages and greatly enhances the enjoyment and effectiveness of these sites. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. PHP (Hypertext Preprocessor) The PHP Hypertext Preprocessor (PHP) is a programming language that allows web developers to create dynamic content that interacts with databases.PHP is basically used for developing web based software applications.PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites.

History PHP

 PHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages. It is among one of the first developed server-side scripting languages that is embedded into a HTML source document, rather than calling an external file to process data.PHP code is normally run in plain-text scripts that will only run on PHP-enabled computers (conversely programming languages can create standalone binary executable files, a.k.a. programs). PHP was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is now produced by The PHP Group and serves as the formal reference to the PHP language. HTML 5 HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4

<address> Tag

The <address> tag defines the contact information for the author/owner of a document or an article. If the <address> element is inside an <article> element, it represents contact information for that article. The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the address element. The <address> tag is supported in all major browsers. Example <address> Written by Visit us at: Your Example.com Box 293, Disneyland USA </address>

Output

You can use this tag on Contact Page for Address.

Tips

The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.

<article> Tag

The Article tag <article> is used to show some external content that could have been taken from any external source or provider like other web sites, forum post, newspaper article, any user submitted documents, blogs, etc. The external content here stands for the independent and redistributable content that user reads and is not directly related to the contents of the web page that contains the <article> tag. The article may have a heading and may also include footer. Example <article> <h5>HTML5 PROCESS</h5> <p>HTML5 is currently under development as the next major revision of the HTML standard.</p> <p>Like it's immediate predecessors, HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> </article> Output You can create any article to this tag Tips: Consequently, you can now go through HTML5 tutorials and practice this newest tag for its further utility in web pages.

HTML5 <audio>

 Tag The <audio> tag defines sound, such as music or other audio streams. The HTML <audio> tag is used to specify audio on an HTML document. For example, you could embed a music file on your web page for your visitors to listen to. The >audio> tag was introduced in HTML 5. Any content between the opening and closing <audio> tags is fallback content. This content is displayed only by browsers that don't support the <audio> tag.

Tips and Notes Tip: Any text inside the between <audio> and </audio> will be displayed in browsers that do not support audio

Example <audio src="/music/lostmojo.wav"> If you are reading this, it is because your browser does not support the audio element. </audio> Output You can use this tag for Audio Controller.

<bdi> Tag

The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. For the purposes of applying the bidirectional algorithm to the contents of a bdi element, user agents must treat the element as a paragraph-level container. For the purposes of applying the bidirectional algorithm to the paragraph-level container that a bdi element finds itself within, the bdi element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled). This element is especially useful when embedding user-generated content with an unknown directionality. In this example, usernames are shown along with the number of posts that the user has submitted. If the bdi element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number "3" next to the word "User" rather than next to the word "posts"). Example <ul> <li>User <bdi>jcranmer</bdi>: 12 posts. <li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi>إيان</bdi>: 3 posts. </ul>

<big>-<small> Tag

You can display big text using the <big> tag and small text using the <small> tag. The <big> tag will display text as only a little bigger than its regular size, and the <small> tag will display text as only a little smaller than its regular size. <big> <small> Tag-Example

Hello <big>World</big> Hello <small>World</small> Output Hello World Hello World

                                

<body> Tag

The <body> tag is used to contain the content of the web page document that will be displayed. There are 2 main sections in a web page, the head section and the body section. The head section contains information about the web page like the title, style sheet info, scripts etc. The body section contains the content that will be displayed. <body> Tag-Example

<html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> Output The content of the document......

<br /> Tag <br /> Tag is used to break line.

Look example <br /> Tag-Example

Hello World <br /> Hello World <br /> Hello World <br /> Hello World <br /> Hello World <br /> Output Hello world.... Hello world.... Hello world.... Hello world.... Hello world....

What is Canvas?

 The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. Specify the id, width, and height of the element:

Create a Canvas Element <canvas id="myCanvas" width="200" height="100"></canvas> Draw With JavaScript The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

Example <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html> Output You can use this tag for canvas designs

<center> Tag

You can center text (as well as other elements) using the <center> tag. <center> Tag-Example

<center> Hello world.... </center> Output Hello world....

<command> Tag

HTML5 command element represents a command which can be called or executed by user. It must have a start tag. And should not have an end tag. This is a void element. So, it can not contain any content. Any element that accepts phrasing content.

Example <html> <head> <title>HTML5 command example</title> <script> function run(){ alert('welcome to w3resource'); } </script> </head> <body> <command type="command" label="Run" icon="run.png" onclick="run()"> </body> </html>

Compatibility: Command element is not supported by any of the major and most widely used browsers till now.

Comments

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. Syntax

<!-- This is an HTML Comment --> Single Line Comment

The single line comment tells the interpreter to ignore everything that occurs on that line to the right of the comment. To do a single line comment type "//" or "#" and all text to the right will be ignored by PHP interpreter. Syntax

<?php echo "Hello World!"; // This will print out Hello World! echo "Psst...You can't see my PHP comments!"; // echo "nothing"; // echo "My name is Humperdinkle!"; # echo "I don't do anything either"; ?> output Hello, World! Multiple Line Comment

Similiar to the HTML comment, the multi-line PHP comment can be used to comment out large blocks of code or writing multiple line comments. The multiple line PHP comment begins with " /* " and ends with " */ ". Syntax

<?php /* This Echo statement will print out my message to the the place in which I reside on. In other words, the World */ echo "Hello World!"; /* echo "My name is Humperdinkle!"; echo "No way! My name is Uber PHP Programmer!"; */ ?> output Hello, World!

<datalist>-Tag

The <datalist> tag can be used in conjunction with an <input> element that contains a list attribute. The list attribute is linked to the <datalist> tag by the <datalist> tag's ID. For example, if the <datalist> tag contains id="myData", then the list attribute will look like this: list="myData". You can fill the <datalist> element by nesting <option> tags inside the <datalist> tag. The <datalist> tag was introduced in HTML 5.

Example <p> <label> Enter your favorite cartoon character: <input type="text" name="favCharacter" list="characters"> <datalist id="characters"> <option value="Homer Simpson"> <option value="Bart"> <option value="Fred Flinstone"> </datalist> </label> </p> <h4>Example 2 (for both legacy and HTML 5 browsers)</h4> <p> <label> Enter your favorite cartoon character:<br /> <input type="text" name="favCharacter" list="characters"><br /> </label> <datalist id="characters"> <label> or select one from the list:<br /> <select name="favCharacter"> <option>Homer Simpson <option>Bart <option>Fred Flinstone </select> </label> </datalist> </p> Output You can use this tag for Listing any Items.

<time> Tag

Many times, you may need to add time and date in your web page. HTML5 gives you ability to incorporate time on your web page using time tag. To add on a time or a date or both on a particular web page, you can use time tag that has been included in HTML5 (represented as <time>). This tag may record what a user is doing and for how long.

<time> Tag-Example <html> <body> We arrived at <time > 09:00</time> </body> </html> <date> Tag-Example <html> <body> I have an appointment with doctor on date <time datetime="2010-09-02"> day</time>. </body> </html> Output You can use this tag for date and time according to your calender.

<Details>-Tag

This tag is used to describe details about a document or any parts of a document. This tag is used with connection of <summary> tag to make your own header for the details. The header is visible and could show when user click on the header. The details and figure elements are saved from the crazed pecadillos of legend, dd/ dt and caption by these two freshly-minted elements, sent from Hickson over the weekend. The HTML details element (<details>) is used show detail of information on demand. By default that detail is hidden. It is used with summary tags, which contains the detail. Example <html> <head> <title>HTML5 details element example</title> </head> <body> <details> <summary>PHP is a server side scripting language</summary> <p>PHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.</p> >/details> </body> </html> Output You can the tag for show the any details on web pages.

HTML - Div Element Definition and Usage

The <div>tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements and format them with CSS.

Example A section in a document that will be displayed in green: <div> <h3>>This is a heading</h3> <p>This is a paragraph.</p> </div> Output This is a heading and Paragraph in div element. The "align" attribute is deprecated in HTML 4.01, and not supported in HTML5. Use CSS to align the content of a <div> element. The difference between the <div> tag and the <span> tag is that the <div> tag is used with block-level elements whilst the <span> tag is used with inline elements. Output You can use this tag for Create the any Section

DISCRIPTION

HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like nav, header, footer, and figure. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. Div Definition and Usage

The <div>tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements and format them with CSS. Example A section in a document that will be displayed in green: <div> style="color:#00FF00;" <h3>>This is a heading</h3> <p>This is a paragraph.</p> The "align" attribute is deprecated in HTML 4.01, and not supported in HTML5. Use CSS to align the content of a <div> element. The difference between the <div> tag and the <span> tag is that the <div> tag is used with block-level elements whilst the <span> tag is used with inline elements.

<fieldset> Tag

The <fieldset> tag can be used to group related form controls and labels. The <legend> tag can be used to provide a caption for the group. <fieldset> Tag-Example

<form> <fieldset> <legend>Personalia:</legend> Name: Demo User Email: Demo@demo.com </fieldset> </form> Output Personalia: Name: Demo User Email: Demo@demo.com

<figure> Tag

The <figure> tag is used to represent a content that is a single standalone unit from the main flow of the document. It could be moved away to any other page, to the side of the page, to dedicated pages or an appendix without affecting the flow of a document. The figure tag don't only place or hold images but can also include audio, video, charts, tables and so forth. The <address> tag is supported in all major browsers. Example <figure> <img src="newimage.jpg" alt="newimage"> <figcaption> This is the text inside figcaption block <figcaption> </figure> Output You can use this tag for create the any figures.

<font > Tag

The <font > Tag is used for changing the view of your text. Which will display on view page. <font > Tag-Example

<font size="5" style="color:purple"> HTML stands for Hypertext Markup Language.</font/> Output HTML stands for Hypertext Markup Language.

<footer> Tag

The <footer> tag defines footer for a part of a document or a section in the document. Footer tag can contain things like copyright info, name of the writer or owner, terms of use or privacy options links, the date the document when it was written or contact information of the writer, etc. It is also not necessarily that a footer tag should be kept at the bottom of the page. It can appear anywhere in the document. Note, it cannot be placed within a <header> or another <footer> tag. To display all the extra info, footer tag can be used in several places in a page. Example <header> <The Footer tag> </header> <article> This is the article part of the page. </article> <footer> Copyright 2010 </footer> Output You can use the tag for footer on your web.

<header> Tag

The header tag is to represent some or all the introductory information about the document. It can be used to hold the section's heading (from h1 to h6) and can also contain a section's contents such as table of contents, any relevant logo/images, a search form, etc. Normally, this tag is used at the beginning of the page and it can be used more than once in a document just like the footer.

Example <html> <body> <header /> <p>This is the content inside the header.</p> </header> </body> </html> Output you can use the tag for Website Header Sections.

<hgroup>

Tag One of the new elements defined in HTML5 is <hgroup>, used for grouping titles with their associated subtitles. But why do we need <hgroup> when we’ve already got the <header> element? In this article, we’ll do our best to answer that question. <hgroup> acts as a wrapper for two one or more related heading elements possibly contained within a <header> element. It can only contain a group of <h1>–<h6> element(s), and it should be used for subtitles, alternative titles, and tag lines. Example <article> <header> <hgroup> <h1>Title goes here</h1> <h2>Subtitle of article</h2> </hgroup> <p><time datetime="2010-03-20">20th March, 2010</time></p> </header> <p>Lorem Ipsum dolor set amet</p> </article>

<keygen>

Tag The <keygen> tag specifies a key-pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server. Example <!DOCTYPE html> <html> <body> <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> </body> </html>

HTML 5 <mark>

Tag The HTML <mark> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. It is important to understand the intended purpose of this tag. According to the HTML 5 specification: When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity. The <mark> tag was introduced in HTML 5. Example <p>Despite the stock market crash in 2008, the value of my share portfolio <mark style="background-color:yellow;">increased by 100 percent</mark>. I must be doing something right.</p>

<meta> Tag

 Meta tags are little lines of code that are placed between the and the tags in your site's HTML code. They are designed to give search engines instructions on what your page is about and how they should treat it. These tags are not displayed to humans visiting your site, but they can be used to influence the way your site appears in the search results. There are several meta tags that you can add to your pages, but in my opinion the only useful ones are the keywords tag and the description tag <meta> Tag-Example

<META NAME="Abstract" CONTENT="Short description of page">

<nav> Tag

The HTML <nav> tag is used for declaring a navigational section of the HTML document. The <nav> tag was introduced in HTML 5.

 Example <!DOCTYPE html> <html> <body> <nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a> </nav> </body> </html>

<progress> Tag

The <progress> tag shows the progress of a task. This element is be used with the conjunction of JavaScript function. The <progress> tag use two type of attribute i.e "max" and "value". "max" is meant for the value of completion and "value" is the current value of progress. The <progress> tag is new in HTML5. Example <!DOCTYPE HTML> <html> <body> Downloading progress: <progress> <span id="download_prog">10</span>% </progress> </body> </html>

<ruby> Tag The <ruby> tag specifies a ruby annotation. Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian characters. Use the <ruby> tag together with the <rt> and/or the <rp> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations. Example <!DOCTYPE html> <html> <body> <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> </body> </html>

<section> Tag

HTML5 symbolizes section tag as <section> that has been added to define sections in a document like headers, chapters and footers. A web page may have several sub-sections and nesting sections. For example: You can have a look on "About us" page that includes section for features, facilities provided by organizations, introduction, contact information etc.

Example <html> <body> <section> <h1>Introduction To HTML5</h1> <p>It is a beta version of Hyper Text Markup Language loaded with plenty of new features like canvas, audio and video, storage data etc.</p> </section> </body> </html> Output You can create a section to this tag.

<select> Tag

The <select> tag is used inside of a form element to create a menu or scrolling list of items that can be selected by the user. Each item in the list is created using an <option> tag. The <option> tags are contained between the opening and closing <select> tags, and at least one <option> tag is required. <select> Tag-Example

<select name="ownname"> <option>one</option> <option selected="selected" >two</option> <option>three:</option> <option>four:</option> <option>five:</option> <option>six:</option> </select> Output

<source> Tag

 The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>. The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support. Example <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html>

<span> Tag

The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document. <span > Tag-Example

My friend has <span style="color:green">green</span> shirt. Output My friend has green shirt.

<summary> Tag

The HTML <summary> tag specifies a summary/caption that can be used in conjunction with the HTML5 <details> tag. This summary/caption can be clicked on to expand/collapse the details as required. The <summary> tag, if used, should be the first child of the <details> tag. The <summary> tag was introduced in HTML 5. Here is an example of the HTML code used to specify the <summary> element. Example <details> <summary>Name</summary> <p>Homer J Simpson</p> </details>

HTML Tables

Tables consist of the <table> element as well as other table-related elements. These other elements are nested inside the <table> tags to determine how the table is constructed. The children of a <table> element must be, in order: Zero or one <caption< elements Zero or one <colgroup> elements Zero or one<thead> elements Zero or one <tfoot>elements (but only if the last element in the table is not a <tfoot> element) Either: Zero or more <tbody> elements, or One or more <tr> elements (these represent the table rows) Zero or one <tfoot> elements (but only if there are no other <tfoot> elements in the document) Each <tr> element represents a row in the table. A row can have one or more <td> or <th> elements, which determine the columns in the table. Specifically, <td> represents table data and <th> represents a table header. Example <table border = "1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> Output You can create the tables and sections according to table tag.

Videos on the Web HTML5 define a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. Web Video <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element. The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format. The HTML5 <video> tag is used to specify video on an HTML document. For example, you could embed a music video on your web page for your visitors to listen to and watch. The HTML5 <video> tag accepts attributes that specify how the video should be played. Attributes include preload, autoload, loop and more. Any content between the opening and closing <video> tags is fallback content. This content is displayed only by browsers that don't support the <video> tag.

Example <video src="/video/pass-countdown.ogg" width="300" height="150" controls> <p>If you are reading this, it is because your browser does not support the HTML5 video element.</p> </video> This example demonstrates usage of the <video> tag.

HTML5 <video> Tag

 Tag Discription <video> Defines a video or movie <source> Defines multiple media resources for media elements, such as <video> and <audio.>

Output

You can use this Tag for Video Controller

<wbr> Tag

 The HTML <wbr> tag is used for specifying a line break opportunity. The <wbr> tag can be used on very long words or other long strings of text with no spaces. Without the <wbr> tag, these long strings of text could either wrap in strange place (making it difficult to read), or not wrap at all - inadvertently pushing the page layout to the side (again, making it difficult to read and view the document as intended). The difference between the <wbr> tag and the tag is that the tag forces a line break. The <wbr> tag, on the other hand, simply represents a line break opportunity - the browser should only render a line-break if necessary. The <wbr>tag is an empty tag. In other words, it has no end tag. Example <p>And the world record for the longest place name in an English-speaking country is... <i>Taumata<wbr>whakatangihanga< wbr>koauau<wbr>o<wbr>tamatea<wbr>turi <wbr>pukakapiki<wbr>maunga< wbr>horo<wbr>nuku< wbr>pokai<wbr>whenua <wbr>kitanatahu</i></p>

Web Storage

Storing Data on the Client HTML5 offers two new objects for storing data on the client: localStorage - stores data with no time limit sessionStorage - stores data for one session Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective. The data is stored in different areas for different websites, and a website can only access data stored by itself. The localStorage Object The localStorage object stores the data with no time limit. The data will be available the next day, week, or year. How to create and access a localStorage: localStorage <!DOCTYPE html> <html> <body> <script type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name: " + localStorage.lastname); </script> </body> </html> The following example counts the number of times a user has visited a page:

Example <!DOCTYPE html> <html> <body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount= Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> Refresh the page to see the counter increase. Close the browser window, and try again, and the counter will continue. The sessionStorage Object The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. How to create and access a sessionStorage: The following example counts the number of times a user has visited a page: sessionStorage <!DOCTYPE html> <html> <body> <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> </body> </html> The following example counts the number of times a user has visited a page, in the current session: Example <!DOCTYPE html> <html> <body> <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> Refresh the page to see the counter increase. Close the browser window, and try again, and the counter has been reset.