Q-1. What Are The New Features Introduced In HTML5?

Answer.
HTML5 introduces a number of new elements and attributes that help in building an attractive
webSite, that we see nowadays.

It supports following new features.

 New Semantic Elements – These are like <header>, <footer>, and <section>.
 Forms 2.0 – It contains improvements to HTML web forms. It has introduced new attributes for
the <input> tag.
 Persistent Local Storage – With HTML5, it is possible to achieve this, without resorting to third-
party plugins.
 WebSocket – It facilitates setting up a bidirectional communication for web applications.
 Server-Sent Events(SSE) – These events got introduced in HTML5. The direction of the flow of
the execution of these events is from the server to the Web Browser.
 Canvas – It supports a two-dimensional drawing surface that is programmable using JavaScript.
 Audio & Video – It allows embedding audio or video on the web pages without resorting to third-
party plugins.
 Geolocation – It facilitates the visitors to share their physical location with the web application.
 Microdata – It allows building our personal vocabulary beyond HTML5 and extends our web
pages with those custom semantics.
 Drag and drop – It supports to Drag and drop the items from one location to another location on
the same Web page.

Q-2. What Would Happen If The HTML Document Does Not Contain
<!DOCTYPE>?
Answer.
It instructs the Web Browser about the version of HTML used for creating the Web page.
If the developer misses declaring the DOCTYPE information in the code, then new features and tags
provided by HTML5, like <article>, <footer>, and <header> will not be supported. Additionally, the
Browser may automatically go into Quirks or Strict Mode.

Q-3. What Is A Tag In HTML?

Answer.
A tag instructs the Browser about how to format the HTML properly. When you write an HTML page,
you enter tags for many reasons to change the appearance of text, to show a graphic, or to make a
link to another page. HTML uses symbols like “<” and “>” to enclose the tags. And symbol “\” for
closing the tag.
Q-4. What Is The Difference Between HTML Elements And Tags?
Answer.
HTML elements communicate to the Browser how to represent the text. They become HTML tags
when enclosed within angular brackets <>.

Q-5. What Are The Various Elements Provided By HTML5 For Media
Content?
Answer.
HTML provides the support of following elements for representing the media content.

 <audio> – It defines the sound content.

 <video> – It represents the video content that needs to be attached to a Web page.
 <source> – This tag defines the source of video and audio.
 <embed > – It provides a container for an external application.
 <track> – It defines text tracks for video and audio.

Q-6. What Are The New Form Elements Made Available In HTML5?
Answer.
When we want to collect some data from the person visiting our site, we use HTML Forms. An
example is, the user has to enter his name, email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP
Script or PHP script. The back-end application will then perform required processing on the passed
data based on defined business logic inside the application.

There are various form elements available in earlier version of HTML like, text fields, text area fields,
drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

 <datalist> – It represents a list of pre-defined options for input controls.

 <keygen> – It defines a key-pair generator field (for forms).
 <output> – It represents the result of the calculation.

Q-7. What Is A Semantic Element In HTML5? Also, Explain The Difference

Between Semantic And Non-Semantic Elements?
Answer.
Semantic elements are one of the new features that are part of HTML5. They intend to help the
developers in quickly creating the page structure.

A semantic element has its meaning expressed to both the browser and the developer. Also, all the
modern browsers support this feature. However, it is possible for a developer to train old browsers to
handle unknown elements.

Here is the list of some of the commonly used HTML5 Semantic Elements.

 <article>
 <figcaption>
 <figure>
 <header>
 <footer>
 <nav>
 <section>
 <article>
 <aside>
 <summary>
The Difference – Semantic Vs. Non-Semantic.
Semantic – These elements clearly describe their content like <img>, <form>, <table> etc.
Non-semantic – These elements are without any definition. They don’t describe anything about their
structure such as <span> and <div>.

Q-8. What Are The Various Tags Provided For Better Structuring In HTML5?
Answer.
The various tags provided for better structuring in HTML 5 are:

 <article> – This tag defines an article.

 <aside> – It defines content other than the page content.
 <bdi> – This tag isolates a part of the text for formatting in a different direction, from another text
present there.
 <command> – It defines a command button to be invoked by the user.
 <details> – It outlines the additional details that a user can hide or view as per choice.
 <dialog> – It defines a dialog box.
 <figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.
 <figcaption> – It provides a caption for a <figure> element.
 <footer> – This tag defines a footer for a document or a section.
 <header> – This tag describes a header for a document or a section.
 <hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6>
elements.

Q-9. How Can We Get The Geographical Position Of A User In HTML5?

Answer.
Yes, HTML5 can retrieve the location of a user with the use of Geolocation API. It provides
getCurrentPosition() method to get the user’s current position.

Q-10. Describe Form Input Types In HTML5?

Answer.
HTML5 is the new standard for HTML that provides 13 new input types for forms. Using these new
input types, we can create more interactive and easy-to-use web forms. It also provides better data
validation, input control, color picker controls and many others.

The new input types for forms provided by HTML5 are as follows.

 color – It’s applicable for HTML elements that represent color.

 date – It allows the user to select a date.
 DateTime – It enables the user to select a date and time (with time zone).
 DateTime-local – It allows the user to select a date and time (without time zone).
 email – It is applicable for input fields that contain an e-mail address.
 month – It permits the user to select a month and year.
 number – It is applicable for input fields that accept a numeric value. It allows setting restriction
on the data type of the number, this field takes.
 range – It is applicable for input fields that accept a value from a range of numbers. It allows
setting restriction on the data type of the number, this field takes.
 search – It gets used for search fields.
 tel – It defines a field for entering a telephone number.
 time – It allows the user to select a time.
 URL – It is applicable for the input fields that contain a URL address.
 week – It allows the user to select a week and a year.

Q-10. How Can We Retrieve The Geographical Position Of A User Using

HTML5?
Answer.
HTML5 provides the support of Geolocation API to retrieve the location of a user.
We can find out the current position of the user using getCurrentPosition() method of this API.

Q-11. What Is HTML5 Graphics?

Answer.
In HTML5, there are two types of graphics.
Scalable Vector Graphics (SVG).
 The HTML5 <svg> element is a container for SVG graphics. It provides several methods for
drawing boxes, paths, text, circles, and graphic images.
 SVG is beneficial as nowadays, people are using high-resolution devices (iPads and Monitors),
so it becomes impressive as designs, logos, and charts scale according to the requirement,
maintaining the picture quality.
 SVG is XML based, which means that every element is available within the SVG DOM. It treats
every shape as an object. If the user changes the attributes of any SVG object, the browser will
automatically re-render the shape.
Canvas.
 It is a rectangular area on the HTML page for drawing graphics on the fly, using JavaScript.
 The default size of the canvas is 300 PX × 150 PX (width × height).
 The HTML tag <canvas> is a container for the Canvas graphics. Canvas gets executed on the
pixel by pixel basis.
 In Canvas, browser forgets the graphic, after drawing it. If the user tries to modify it, the entire
scene needs to be redrawn, including all the objects present in the graphic.

Q-12. Explain The Key Differences Between SVG And Canvas?

Answer.
 Canvas is resolution dependent while SVG is not.
 Canvas does not provide any support for event handlers while SVG does provide the support
for event handlers.
 Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
 Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like
Google maps.
 Canvas provides a less interactive animated user interface. Whereas, the interface provided by
SVG is very highly interactive.

Q-13. How Can We Create A New HTML Element?

Answer.
We can even create new elements for the document as follows.

<script>
document.createElement﴾"myElement"﴿
</script>
It can be used in the HTML as.

<myElement>hello</myElement>

Q-14. What Is The Use Of Drag And Drop In HTML5?

Answer.
Drag and Drop (DnD) is a powerful User Interface concept, which enables the user to copy, reorder
and delete any number of items, just with the help of mouse click. To do this, the user has to click
and hold the mouse button over an element, drag to the required location, and finally release the
button to drop the element there.

With HTML4, developers have to either do complex Javascript programming or use other Javascript
frameworks like jQuery to achieve this functionality.

HTML 5 introduced a Drag and Drop (DnD) API that provides the support of all the fundamental DnD
operations to the browser. Thus making it easy for the developers to code it.

Latest versions of all the main browsers, like Chrome, Firefox, and Safari, support this DnD API of
HTML5.

Drag And Drop Events.

Many events get triggered during various stages of the drag and drop operation. These events are
listed below.

 dragstart – it gets triggered when the user starts dragging a draggable object.
 dragenter – it gets triggered when the user has dragged the draggable element over the target
element.
 drag – it gets fired when the object is getting dragged.
 dragend – it gets fired when the user releases the mouse button after dragging an object.
 dragleave – This event gets triggered when the mouse leaves an element while a drag is
occurring.
 dragover – This event gets fired when the mouse moves over an element while a drag is
occurring.

Q-15. What Is HTML5 Web Storage?

Answer.
HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or
server which makes it much easier to work against the stateless nature of HTTP. It allows the web
pages to store the data locally in the user’s browser.

Following are the advantages of HTML5 Web Storage.

 It can store 5 to 10 MB data. That is far more than what cookies allow.
 HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead
than cookies and in turn, increase the performance of the application.
 Apps can work both online and offline.
 This API is easy to learn and use.
Q-16. What Are The Different Types Of Web Storage Provided By HTML5?
Answer.
There are two types of Web Storage.

1. Session Storage
As its name indicates, it stores data of current session only. The data stored in Session Storage
clears on closing the browser.

Following methods are available to access Session Storage.

 Use setItem() function to store data in Session Storage

sessionStorage.setItem (‘key’,’value’);
For Example.
sessionStorage.setItem (‘username’,’Meenakshi’)
 Use getItem() function to retrieve data from Session Storage
sessionStorage.getItem(‘key’);
For Example.
var username= sessionStorage.getItem(‘username’);
 We can only store String in Session Storage. To save the objects in Session, first, convert the
object into JSON string and then store this string in Session Storage as in the following.
sessionStorage.setItem (‘object’, JSON.stringify(object));
 If JSON string gets stored in Session Storage, then first convert it into an object as follows.
var object=JSON.parse(sessionStorage.getItem(‘object’));
 Use removeItem() function to delete a particular key from Session Storage.
sessionStorage.removeItem(‘key’);
2. Local Storage
Local Storage is the second type of HTML Web Storage. It stores data as KEY/VALUE pair.

Following functions are available to access Local Storage.

 Use setItem() function to store data in Local Storage

localStorage.setItem (‘key’,’value’);
 Use getItem() function to retrieve data from Local Storage
localStorage.getItem(‘key’);

Q-17. What Is The Need Of Introducing Local Storage In HTML5?

Answer.
Before HTML5, LocalStores was done with Cookies. They are not very good for large amounts of
data, because, with every request, it passes this data to the server, making it very slow and
ineffective. However, HTML5 does not pass this data on every server request. It uses the data
ONLY when required. In HTML5, it is possible to store large amounts of data without affecting the
website’s performance. Data for different website gets stored in separate areas. However, a
particular website can only access its own data.
Q-18. Explain The Key Differences Between LocalStorage And
SessionStorage Objects?
Answer.
Following are the key differences between localStorage and sessionStorage objects.

 The localStorage object stores the data without an expiry date. However, sessionStorage object
stores the data for only one session.
 In the case of a localStorage object, data will not delete when the browser window closes.
However, the data gets deleted, if the browser window closes, in the case of sessionStorage
objects.
 The data in sessionStorage is accessible only in the current window of the browser. But the
data in the localStorage can be shared between multiple windows of the browser.

Q-19. What Is The Concept Of Application Cache In HTML5? What Are Its
Advantages?
Answer.
HTML5 introduced the concept of Application Cache. It means that a web application is cached, and
is accessible without an internet connection.

Following are the key advantages of Application Cache.

 Offline browsing – Users can use the application even when they are offline.
 Speed – Cached resources load faster as compared to content that gets
downloaded, directly from the server.
 Reduced server load – The browser will only download updated/modified resources from
the server.

Q-20. What Is A Manifest File?

Answer.
A Manifest file is a simple text file, that tells the browser what to cache and what not to cache.

A Manifest file contains three Sections as

 CACHE MANIFEST – HTML5 performs the caching of files listed under this section after
they get downloaded for the first time.
 NETWORK – Files listed here, always need a connection to the server. The browser can never
cache them.
 FALLBACK – Files listed here specify the fallback pages, if any page in it is not accessible.
Q-21. What Is The Difference Between HTMl5 Application Cache And Regular
HTML Browser Cache?
Answer.
Following are the key differences between the two.

 In AppCache, we can define all the assets the browser should cache in a manifest file (even the
entire site). For fetching this content, it is not necessary for the user to have accessed it
previously. In other words, Application Cache can prefetch pages that have not been visited at
all and are thereby unavailable in the regular browser cache. However, the browser cache will
only store the pages (and associated assets) the user has visited actually.
 The AppCache allows web apps (and websites) to be made available offline, that too, with the
same speed benefits as the regular browser cache could provide only when the user is online.

Q-22. What Is A Web Worker? How Does It Work?

Answer.
JavaScript will hang the browser if it has to handle UI events, query large amounts of API data for
processing, and manipulate the DOM simultaneously.
Web Workers handle this situation by doing all the high computation tasks without interrupting the
user interface. They do this by running on separate threads. Thus we can say that.

 A web worker is a script, which runs in the background. It exists in external files.
 The user can perform actions like clicking, selecting things and so on. Meanwhile, the Web
worker runs in the background.
 It is appropriate, to use Web worker for CPU intensive tasks.
Since Web workers are in external files, they do not have access to the following JavaScript objects.

 The window object

 The document object
 The parent object
How Does A Web Worker Work?
A Web worker gets initialized with the URL of a JavaScript file that contains its code. This code sets
event listeners and starts communication with the script that invoked the worker from the main page.
The Syntax is as follows.

var worker = new Worker("sample_prog.js"﴿;

If the javascript file specified in the above code exists, the browser spawns a new worker thread.

Once the Web worker gets spawned, it starts the communication with the parent page, using the
postMessage() method. The Web worker, in turn, returns a message, that gets accessed using the
onmessage() event on the main page.

Let’s take an example, where the script spawns a Web worker to execute a loop having thousands
of iterations. After that, the Web worker returns the calculated value to the HTML page.
<script>
var worker = new Worker('calculateLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
</script>
Below is the code of “calculateLoop.js” file. It makes use of postMessage() API, to pass the
communication back to the HTML page.

for (var i = 0; i <= 1000000000; i += 1){

var j = i;
}
postMessage(j);

Q-23. What Are The New Attributes Provided In HTML5 For <Form>?
Answer.
The new attributes provided in HTML5 for <form> are.

 autocomplete
 It specifies if a form or an input field should have “autocomplete” feature set as on or off.
 If autocomplete is set to on, it enables the browser to fill the values, based on the values
that the user starts to enter.
 autocomplete works for input types like text, search, URL, tel, email, password, date
pickers, range, and color.
 novalidate
 It is a boolean attribute.
 Its presence signifies that the form-data should not get validated at the time of submission.

Q-23. What Is Output Element In HTML5?

Answer.
Output element gets used when you design a form, that displays the result of a computation. Along
with the standard global attributes, <output> also accepts for, form, and name attributes.
Let’s see a simple example of the <output> element that adds two numbers and displays the
resulting value.

<!DOCTYPE html>
<html>
<head>
<title>HTML Output Tag</title>
</head>
<body>
<form
oninput="sumresult.value=parseInt(val1.value)+parseInt(val2.value)+parseIn
t(val3.value)">
<input type="range" name="va1" value="10" /> +
<input type="number" name="val2" value="20" /> +
<input type="number" name="val3" value="40" /><br />
The output is: <output name="sumresult"></output>
</body>
</html>
The form attribute associates the <output> with a form. It displays the output as “70” on the web
page.

Q-24. What Are The New Attributes Provided In HTML5 For <Input> Element?
Answer.
Following are the new attributes provided in HTML5 for <input>.

 autofocus
 It is a Boolean attribute.
 The presence of this attribute means that an <input> element should automatically come
into focus when the page gets loaded.
 form
 This attribute specifies about all the forms, to which a particular <input> element belongs.
 formaction
 This attribute defines the URL of a file, that will process the input control after the form gets
submitted.
 This attribute is used along with type=”submit” and type=”image”.
 Also, it overrides the action attribute of the <form> element.
 formenctype
 This attribute defines, the method to encode the form data before submitting it to the
server.
 It gets used with type=”submit” and type=”image”.
 Also, it overrides the enctype attribute of the <form> element.
 formmethod
 It defines the HTTP method used for sending form related data to the action URL.
 It gets used with type=”submit” and type=”image”.
 It overrides the method attribute of the <form> element.
 formnovalidate
 It is a boolean attribute.
 It gets used with type= “submit”.
 It indicates that the validation of the <input> element, should not be done at the time of
submission.
 It overrides the novalidate attribute of the <form> element.
 formtarget
  It specifies a name or a keyword of the area where response received after submitting the
form will be displayed.
 It gets used with type=”submit” and type=”image”.
 height and width
 It specifies the height and width of an <input> element.
 It gets used only with <input type=”image”>.
 list
 It refers to a <datalist> element, which contains a list of pre-defined options for an <input>
element.
 min and max
 It specifies the minimum and maximum value for an <input> element.
 It works with the following input types, number, range, date, datetime, datetime-local,
month, time, and week.
 multiple
 It is a boolean attribute.
 It specifies that the user is allowed to enter more than one value in the <input> element.
 It works with the following input types: email and file.
 pattern
 It specifies a regular expression with which the value of the <input> element gets
compared.
 It works with the following input types: text, search, URL, tel, email, and password.
 placeholder
 It displays a short hint that indicates the expected value of an input field.
 It works with the following input types: text, search, URL, tel, email, and password.
 required
 It is a boolean attribute.
 It indicates that it is mandatory to fill the particular field, before submitting the form.
 step
 It specifies the legal number intervals for an <input> element.
 It works with the following input types: number, range, date, datetime, datetime-local,
month, time, and week.

Q-25. What Is The Major Difference Between, Transitional And Strict

Doctype?
Answer.
 Strict – This DTD contains all HTML components and properties. However, it does NOT
INCLUDE presentational or expostulated components (like text style). It does not permit the use
of Framesets.
 Transitional – This DTD contains all HTML components and properties, INCLUDING
presentational and belittled components (like textual style). It does not allow the use of
Framesets.

Q-26. What Is Audio Tag In HTML 5? What Are Its Attributes>

Answer.
This new element allows you to embed audio files in an HTML or XHTML document, without the
need for any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio
sound like .mp3, wav, and .ogg.
Using the <source> tag, we can specify media along with media type and many other attributes. An
audio element allows multiple source elements and browser will use the first recognized format.

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls" >

<source src="URL1" type="audio/mp3" />
<source src="URL2" type="audio/wma" />
<source src="URL3" type="audio/x-wav" />
Your browser does not support the audio element.
</audio>

</body>
</html>
The HTML5 audio tag supports following attributes to direct the look and feel and various
functionalities of the control.

 autoplay
 It is a boolean attribute. If, the value is set the audio track starts playing automatically. The
System will not wait for data loading to complete.
 autobuffer
 It is a boolean attribute. If set, the audio will automatically begin buffering, even if the
automatic play is not enabled.
 controls
 If this attribute is present, it will allow the user to control audio playback, including volume,
seeking, and pause/resume playback.
 loop
 Setting this boolean attribute would automatically restart the audio from the beginning,
once it reaches to the end.
 preload
 This attribute specifies that the audio will be loaded at page load, and will be ready to run.
If autoplay is present, this attribute will not work.
 src
 It represents the URL of the audio to embed. Its presence is optional.

Q-27. What Is The Use Of <Fieldset> Tag In HTML5?

Answer.
The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box
around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the fieldset.
Following is the Syntax of the <fieldset> tag in HTML5.

<fieldset>Controls</fieldset>
All the popularly known browsers provide the support for the <fieldset> tag.

HTML5 supports following attributes with the fieldset tag.

 disabled
 Its value is disabled. It specifies, whether the fieldset will be displayed or not.
 name
 Its value is in the form of text. It defines the name of the fieldset.
 form
 Its value is the name of the form. It specifies the form related to the fieldset.
Let’s see an example, where we create a fieldset in a form. Here we use the <legend> tag to define
the heading for the fieldset.

<html>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
First Name: <input type="text" />
<br/><br/> Last Name: <input type="text" />
<br/><br/> person_Address: <input type="text" />
<br/><br/> person_Qualification: <input type="text" />
</fieldset>
</form>
</body>
</html>

Q-28. What Are The HTML Tags Which Get Deprecated In HTML5?
Answer.
Following are the tags that are deprecated in HTML5.

 <basefont>
 <big>
 <center>
 <font>
 <s>
 <strike>
 <tt>
 <u>
 <frame>
 <frameset>
  <noframe>
 <acronym>
 <applet>
 <isindex>
 <dir>
Some attributes from HTML4 are no longer allowed in HTML5 since their functionality is better
handled by CSS. Below are some of the known attributes that got removed and the corresponding
impacted element.

 Attribute Removed Element

 rev, charset a, link
 longdesc, name img
 version html
 abbr th
 scope td
 align all block level elements
 background body
 hspace, vspace img
 bgcolor table, tr, td, th
 border, cell padding, cell spacing table
 height, width td, th
 valign table

Q-29. What Is A Meter Tag? What Is The Difference Between Progress Tag
And A Meter Tag?
Answer.
The <meter> tag defines a scalar measurement within a known range or a fractional value. We can
also call it a gauge.
Some of the items that can be represented using <meter> tag are Disk usage, the relevance of a
query result, and so on.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress
bars, use the <progress> tag.

Following example demonstrates the use of the <meter> tag.

<li><meter min="0" max="100" value="25">25%</meter></li>

The <meter> tag provides the support of the following attributes.

 min
 It is a number. It specifies the minimum value of the range.
 max
 It is a number. It specifies the maximum value of the range.
 low
 It is a number. It defines a range that represents <low> value.
 high
 It is a number. It defines a range that represents “high” value.
  value
 It is a number. It is a mandatory element. It defines the current value of the gauge.
 optimum
 It is a mandatory element with a numeric value. It specifies the optimum, or the best value,
for the element. If this value is higher than the “high” value, this indicates that the higher
the value, the better it is. If it’s lesser than the <low> mark, it means that the lower values
are better. If it is, in between, then it indicates that neither high nor low values are good.
 form
 It specifies one or more forms that define the <meter> element. It has value form_id.

Q-30. Why Do We Need HTML5 Server-Sent Events?

Answer.
HTML5 Server-Sent Events (SSE) is a new way for the web pages to communicate with the web
server. It enables a webpage to get updates from a server automatically. It was possible earlier also,
but for this, the web page needs to ask if any updates were available. The client makes a request
and waits for the server to respond with data. Once the web server provides its response, the
communication is over.

However, there are some situations, where web pages require a long-term connection with the web
server. A typical example is stock quotes on finance websites where price update happens
automatically. Other examples are news feeds, sports results that run continuously on media
websites, Facebook/Twitter updates and so on.

We can achieve the above, using HTML5 using SSE. It enables a web page to hold an open
connection to the web server so that it can send a response automatically at any time. Thus there’s
no need to reconnect and run the same server script from scratch over and over again.

Receive Server-Sent Event Notifications.

The EventSource interface contains the Server-Sent event API. We need to create an EventSource
object to receive the Server-Sent event notifications. Following is the code for the same.

var source = new EventSource("sse_demo.php");

source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Above code performs following steps.

 First, create a new EventSource object, and specify the URL of the page sending the updates
(in this example “sse_demo.php”).
 Every time an update arrives, onmessage event gets triggered.
 When an onmessage event occurs, it places the received data into the element that has <id =
result>.
Server-Side Code Example.
For the above example to work, we need a server capable of sending data updates. The server-side
event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can
start sending event streams. Following is the code (demo_sse.php).

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Following is the explanation of the above code.

 Set the “Content-Type” header to “text/event-stream”.

 Specify that the page should not cache.
 Output the data to send (Always start with “data: “).
 Flush the output data back to the web page.
HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the
page

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before
the tag name

Tip: The start tag is also called the opening tag, and the end tag the closing tag.

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.

The browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure
Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: Only the content inside the <body> section (the white area above) is displayed in a
browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
 HTML Versions
Since the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences >
Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code
instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).

You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").

The result will look much like this:

W3Schools Online Editor

With our free online editor, you can edit HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to
save and share code with others:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Buttons
HTML buttons are defined with the <button> tag:

Example
<button>Click me</button>

HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered
list) tag, followed by <li> tags (list items):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in
between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>

HTML elements with no content are called empty elements. Empty elements do not have an
end tag, such as the <br> element (which indicates a line break).

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

<p>My first paragraph.</p>

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

<p>This is a paragraph
<p>This is a paragraph

The example above works in all browsers, because the closing tag is considered optional.

Never rely on this. It might produce unexpected results and/or errors if you forget
the end tag.

Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or
if you need to make your document readable by XML parsers, you must close all HTML
elements properly.

Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demandslowercase for stricter document types like XHTML.

At W3Schools we always use lowercase tags.

HTML Attributes
Attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example
<a href="https://www.w3schools.com">This is a link</a>

Try it Yourself »

The src Attribute

HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

<img src="w3schools.jpg" alt="w3school image" />

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the
image:

<img src="w3schools.jpg" alt="w3school image" height="100" width="100" />

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be
displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to
the webpage, e.g. a blind person, can "hear" the element.

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

Example
<p style="color:red">I am a paragraph</p>

The lang Attribute

The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search
engines:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use two more letters
(US).

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:

Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.

The title attribute can be written with uppercase or lowercase like title or TITLE.

W3C recommends lowercase in HTML, and demands lowercase for stricter document
types like XHTML.

Quote Attribute Values

he HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written without quotes

W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.

Sometimes it is necessary to use quotes. This example will not display the title attribute
correctly, because it contains a space:

Using quotes are the most common. Omitting quotes can produce errors.

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can
also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to
use single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

 All HTML elements can have attributes

 The title attribute provides additional "tool-tip" information
 The href attribute provides address information for links
 The width and height attributes provide size information for images
 The alt attribute provides text for screen readers
 At W3Schools we always use lowercase attribute names
 At W3Schools we always quote attribute values with double quotes
Exercise:
Add a tooltip to the paragraph below with the text "About
W3Schools".
!DOCTYPE html>

<html>

<body>

<p title="About W3Schools">W3Schools is a web developer's site.</p>

</body>

</html>

Change the size of the image to 250 pixels wide and 400 pixels tall.

Hint: Change the width and height attributes.

<img src="w3schools.jpg" width="250" height="400">

Exercise:
Transform the text below into a link that goes to
"https://www.w3schools.com".
<!DOCTYPE html>

<html>

<body>

This is a link

</body>

</html>

Change it to <a href="https://www.w3schools.com">This is a link</a>

Change the destination of the link below to "www.wwf.org.uk".

<a href="https://www.w3schools.com">This is a link</a>

Change it to <a href="http://www.wwf.org.uk">This is a link</a>

The image below does not exist. Specify the alternate text
"w3schools.com" for the image.
<body>

<img src="w3schooooools.jpg" width="135" height="50">

</body>

Change it to <img src="w3schooooools.jpg" alt="w3schools.com" width="135"

height="50">

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:

Attribute Description

Alt Specifies an alternative text for an image, when the image cannot be displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

Id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

A complete list of all attributes for each HTML element, is listed in our: HTML Attribute
Reference.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading
with the style attribute, using the CSS font-size property:

<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML
document. Metadata is not displayed.

The <head> element is placed between the <html> tag and the <body> tag:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.

Metadata typically define the document title, character set, styles, links, scripts, and other
meta information.

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in
IE), or similar in other browsers. This will open a window containing the HTML source code
of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to
see what elements are made up of (you will see both the HTML and the CSS). You can also
edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Add a heading to the paragraph with the text "London".

<!DOCTYPE html>

<html>

<body>

<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</body>

</html>

Add <h1>London</h1>

Add a horizontal rule between the heading and the paragraph.

<!DOCTYPE html>

<html>

<body>
<h1>London</h1>

<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</body>

</html>

Add <hr>after heading

Add six headings to the document with the text "Hello".

Exercise:
Mark up the following text with appropriate tags:
"Universal Studios Presents" is the most important content.
"Jurassic Park" is the next most important content.
"About" is of lesser importance than Jurassic Park.
The last sentence is just a paragraph.

Hint: Use <h1>, <h2>, <h3> and <p>.

<!DOCTYPE html>
<html>
<body>

Universal Studios Presents

Jurassic Park

About

On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned dinosaurs!!

</body>
</html>

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their
attributes.

You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<head> A container for all the head elements (title, scripts, styles, meta information, and more)

<h1> to <h6> Defines HTML headings

<hr> Defines a thematic change in the content

Note: Browsers automatically add some white space (a margin) before and after a
paragraph.

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your
HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:

Dropping the end tag can produce unexpected results or errors.

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The <br> tag is an empty tag, which means that it has no end tag.

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their
attributes.
Tag Description

<p> Defines a paragraph

<br> Inserts a single line break

<pre> Defines pre-formatted text

HTML Styles
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>
HTML Background Color
The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

HTML Fonts
The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

 Use the style attribute for styling HTML elements

  Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Text Formatting

HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

The HTML <b> element defines bold text, without any extra importance.

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.
<em>This text is emphasized</em>
Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the
meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".
The HTML <small> element defines smaller text:
<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:Tt Yourself »

HTML <del> Element

The HTML <del> element defines deleted (removed) text.

<p>My favorite color is <del>blue</del> red.</p>

Will display The del element represents deleted (removed) text.

My favorite color is blue red.

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

<p>My favorite <ins>color</ins> is red.</p>

The HTML <sub> element defines subscripted text.

<p>This is _subscripted text.</p>

The HTML <sup> element defines superscripted text.

Add extra importance to the word "degradation" in the paragraph

below.
<html>

<body>

<h1>What Does WWF Do?</h1>

<p>WWF's mission is to stop the degradation of our planet's natural

environment.</p>
</body>

</html>

Add <p>WWF's mission is to stop the <strong>degradation</strong> of our planet's

natural environment.</p>

HTML Text Formatting Elements

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Quotation and Citation Elements

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

he HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

TML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers, translation systems and
search-engines.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>

Will display

The WHO was founded in 1948.

Marking up abbreviations can give useful information to browsers, translation systems

and search-engines.
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a document or
an article.

The <address> element is usually displayed in italic. Most browsers will add a line break
before and after the element.

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.

The <bdo> element is used to override the current text direction:

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or
an article.

The <address> element is usually displayed in italic. Most browsers will add a line break
before and after the element.

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.

The <bdo> element is used to override the current text direction:

<bdo dir="rtl">This text will be written from right to left</bdo>