Explore topic-wise InterviewSolutions in .

The HTML5 Web WORKER was made to make the web asynchronous. We all know that JavaScript is single THREADED. It will stop the execution of the web-browser, till a script is COMPLETED and will not proceed further.

Sometimes, it is not desirable. We want to show our visitor the website and let the heavy script which might be fetching big data from an API run in the background and complete. In these situations, web workers come to the rescue.

Web workers are initialized using var worker = new Worker(‘extremeLoop.js');

Here, extremeLoop.js is our computationally heavy JavaScript file which we want to run separately. Once the Web Worker is started, communication between a web worker and its PARENT is generally done using the postMessage() method.

Then the message is passed by Web Worker to the main page using onmessage event.

Here in the example, we have a simple web worker to CALCULATE the prime.

Save the JavaScript file in the same directory as  extremeLoop.js

Now, open the browser and you will get.

SVG or Scalable VECTOR Graphics is a mark-up language for creating beautiful, 2-D graphics. SVG is open sourced and designed to work with other web standards like CSS and DOM.

We can draw different shapes with ease with sag like circle, rectangle, ellipse, polygon and ALSO various other effects.

The HTML and CSS standards are decided by W3C - World Wide Web Consortium. It is this non-government organisation which create rules, and the browser creators(google, mozilla, apple, Microsoft) have to follow them.

Although they follow the W3C standard, they are not bound to follow completely. Besides, each of these browsers was created using a different layout and Javascript engines, so they behave differently.

• Firefox uses Gecko (now Quantum), IE uses Trident, Chrome and Safari use Webkit as layout engines.
• Similarly, Chrome uses V8, IE uses Chakra and FireFox uses Spidermonkey as their JavaScript engine.

The HTML5 standard, which was recommended in 2014 still is now standardised across browsers. The HTML5 input tags behave differently, with some browsers not even supporting some of them.

We will use the below code, to check the browser differences.

In the case of Safari, the type of month, color, date, and datetime-local are all plain text box because they are not supported.

In the case of Firefox, the type of month and datetime-local are all plain text box because they are not supported. The type of color, date are supported by Firefox.
In case of chrome, everything is supported.

In the case of Internet Explorer 11, the layout even is weird because of poor support for the current implementation of the grid and also missing support for input types month, color, date, and datetime-local.

In the case of Edge, the grid support is there but in a different way. But it supports all input types month, color, date and datetime-local, although the display is different.

We create drop-down in HTML using the &LT;select> tag. The different values in the <select> tag are entered using a set of <option> tag. Each <option> tag have a value attribute and this only gets chosen when we select an option.

A simple drop-down example is below.

There are many new INPUT types introduced in HTML5. These are in addition to the one we have seen in Question 25.

So, the new types are -

• <input type=“color”> - The input element with type=“color”, let the user select a color from a color palette. The different browser shows a different color palette.
• <input type=“date”> - The input element with type=“date”, let the user select a date from a calendar pop-up or input it himself. The different browser shows a different date pop-up.
• <input type=“datetime-local”> - The input element with type=“datetime-local”, let the user select both date and time from a pop-up and he can also input it in the text box.
• <input type=“email”> - The input element with type=“email”, let the user enter his email. The input entered is automatically validated to contain a valid email.
• <input type=“month”> - The input element with type=“month”, let the user enter a month and a year. The value entered is in the format YYYY-MM.
• <input type=“time”> - The input element with type=“time”, let the user enter time in an hour, minutes and seconds.
• <input type=“url”> - The input element with type=“url”, let the user enter a URL. The input entered is automatically validated to contain a valid URL.
• <input type=“number”> - The input element with type=“number”, let the user enter number. He/She can enter the number in the text-box or also can increase/decrease it with the PROVIDED counter.
• <input type=“range”> - The input element with type=“range”, let the user specify a numeric value with a graphical slider.
• <input type=“search”> - The input element with type=“search”, is a SPECIALLY designed text field. It allows the user to enter the search term into it.
• <input type=“tel”> - The input element with type=“tel”, let the user enter a telephone number. Unlike <input type=“email”> the input is not automatically validated and we have to use pattern.

We will use all the above to create our example.

<input> tag is the tag which creates fields inside the <form> tag for the website VISITOR to enter his/her information accordingly. There are different types of input available to the developer to use, to get the user input.

As per standard practice the <input> tags, should have a <label> tag. And the for attribute in a label should match the id attribute in the input.

So, the different types are -

• <input type=“text”> - The most common of the types, which produces a simple text box in which the user can type anything - numbers, alphabets.
• <input type=“radio”> - The input element of type radio are mostly used in groups. Only one radio button from the group is selected at a time. They are by default rendered as a small circle, which are filled once selected.
• <input type=“checkbox”> - The input element of type checkbox, are mostly are by default rendered as square boxes. We can select all of them or some of them.
• <input type=“password”> - The input element of type password, is used to enter secure text. It is basically like a type text, but whatever you enter will be marked by an asterisk(“*”).
• <input type=“file”> - The input element with type=“file”, let the user choose one or more file from their computer. These files can then be uploaded to a server when we submit the form.
• <input type=“hidden”> - The input element with type=“hidden”, is basically used by the WEB developer. It is MAINLY used to pass some security token when submitting the form.
• <input type=“image”> - The input element with type=“image”, is used to create a graphical submit button. It is to be noted that you should have an image of a button, for this to work.
• <input type=“button”> - The input element with type=“button”, is a plain button which we have to program to do something.
• <input type=“reset”> - The input element with type=“reset”, are rendered as button. On clicking this type of button, it will remove all the data, which we have entered in our form.
• <input type=“submit”> - The input element with type=“submit”, are rendered as a button. On click of these type of button, it will take are entered value in the form and will try to submit to the server.

We will use all of these above types to create our example.

• <datalist> tag is like the dropdown tag of <select>. It contains a set of <option> tag inside it to REPRESS the value. It is a bit different in representation from the Dropdown. It is like a plain text box. Once you click inside the text box, it will show the complete list. Or if you type it will show the filtered list.
• <output> tag represents the RESULT of some operation, performed by our form.

In our example, the <datalist> tag operation is straightforward as, it is used to select a list of browsers. Then there is a <input type=“range”> slider in our code. Once we slide it the value of it is processed and shown in our <output> tag.

Selecting the <datalist> On changing the rating

In HTML5 the Geolocation API was introduced. With the help of it, we can get the user location very easily through a browser.

We can get the current position of the user through the navigator.geolocation.getCurrentPosition() method.

It takes one required and TWO optional arguments. The required ARGUMENT is the success argument and the optional ONES are an error, options.

• success - The main callback function to show our coordinates. Only we have access to Position object, from which we can take latitude and longitude of the user
• error - An optional callback function, which will show the error message in case of any error.
• options- An optional object in which we can give enableHighAccuracy, timeout, and maximumAge.

Open this file in the browser and you will get a pop-up, asking to Allow to use current location.

Click on “Allow” and you will get your current location.

Close and open the demo.html again. This TIME click on “Don’t Allow” and you will get the error message which has been shown by the error function.

HTML5 have sampled the syntax and STRUCTURE of the HTML document.
Earlier VERSION of HTML ie HTML4.01 had a very cumbersome DOCTYPE and also the charset declared in the head tag. These have been simplified a lot in HTML5.

HTML5 syntax

HTML4.01 syntax

We can create links to sections within the same page, USING id tag in that part of the webpage. And then in <a> tag in href we mention that id by #id_name.

This type of LAYOUT is very common nowadays because of Single Page Websites, where all the information is generally is on one page only.

In the following example, we are creating <nav> links on clicking of which it will take us to respective sections.

Just like <video> we can ALSO embed any kind of audio in a web page using <audio> tag. Any TYPE of sound can be embedded in the web page starting from music to any kind of educational audio. Currently, three types of file formats are supported by <audio> element namely MP3, WAV and OCG.

The important thing to note is that the audio need to be there on your web-server, or in your local drive if testing locally.

The ATTRIBUTES are similar to the video tag and are controls, autoplay, muted, loop.

• controls will show controls in the media player.
• autoplay will begin the play as soon as the page is loaded.
• muted will play the audio without volume. Not recommended
• loop will play the audio in loop and will run forever.

On the above, you should have a t-rex-roar.mp3 or t-rex-roar.ogg in the same directory as audio.html

To embed any kind of video in the web page, <video> tag is used. We need to use <source> tag inside the <video> tag to specify which file to upload. It will then contains the src attribute. Any kind of video could be uploaded like a song video, or a short story video or an EDUCATIONAL video, etc.

The important thing to note is that the video needs to be there on your web-server, or in your local drive if testing locally.

There are many attributes to the video tag like controls, autoplay, muted, loop.

• controls will show a basic youtube like CONTROL buttons in the media player.
• autoplay will begin the play as soon as the page is loaded.
• muted will play the video without volume.
• loop will play the video in the loop and will RUN forever.

For the above to work, you should have a flower.webm or flower.mp4 in the same directory as demo.html

Html table tag helps us to arrange our item in rows and columns of cells. To create HTML table we use <table> tag and along with this, we need to use <tr> tag which creates rows in the table and <td>  tag through which we can input data inside our table. To put heading inside the table we can use <th> tag which helps to give heading to the table.

There are also two optional tags called <thead> and <tbody>, which are used to group header and body respectively.

We can also combine any row, with the colspan attribute. One more thing to note is that earlier there were many more attributes to style the table. But with HTML5 specifications, we need to style a table through CSS.

In the below example, we can see a simple table and other tables with all tags.

To group related information together list is used in HTML.

There are three types of lists namely <ul> unordered list, <ol> ordered list. All the items in any type of list will be defined by <LI> tag.

• <ul> unordered list: This is the type of list which is not ordered i.e its not listed in numbers. It is displayed by using BULLETS or any other special character.

Unordered list can also have an attribute type. It SPECIFIES the type of bullet you will have, default is a disc.

• <ol> Ordered List: 

Ordered list is listed with numbers i.e it has a SEQUENCE. An ordered list can also have an attribute type. It specifies the type of numbering you will have, default is Numbers. It can also have upper case roman, lower case roman, upper case letters, and lower-case letters. It also has an attribute start, which defines the number/alphabet the numbering will start.

All of these are in the below example.

To build a project, we need to use different kinds of html TAGS to make it successful. In the same way, I have also used many different html tags in my different projects.

Some of them are:

• <p>: Paragraph is a block level tag used to create paragraphs in html project. It TAKES the whole area both in the left and in the right as it’s a block level tag.
• <span>: Span is an inline text element. It has styling by default. So if we write something inside the span element styling is done by default.
• <strong>: To display anything in bold we can use <strong> tag.
• <h1>Header: There are different levels of headers used to build a project like <h1>,<h2>,<h3>,<h4>,<h5> etc.
• <div>: It’s actually a container element. It does not have any styling by default and also its a block level element.
• <i>: Through this <i> tag we can display anything in italics in the HTML project.
• <br>: It is used to give a line break in the code. As in HTML space does not display break. So to give a break we need to use the tag <br>.
• <ul>: In HTML, we can display a list both in order as well as unordered way. When the list is not in order, we use the tag <ul>.
• <ol>: Through the above statement we have come to know that to display something in an unordered way we use the tag <ul>. In the same way, to make an ordered list we use <ol> in HTML.
• <li>:  It is used for listing the items inside the <ul> and <ol> tags. For each list items separate <li> is used which is denoted by any symbol or numbers.
• <table>: For building a table inside the project we use the tag <table>. We generally write related data inside a table.
• <tr>: Table row is used to create table rows in <table> tag.
• <td>: Table cells are defined through table data which in turn is also inside the table element.
• <tbody>: It is an optional element inside a table tag. Generally used to group all the rows which are not in <thead> tag.
• <section>: Section is like div tag which is used to create a specific section in the HTML project.
• <nav>: Through <nav> tag we can create navigation link of the page. This helps the user to navigate through the page.
• <img>: To display image in the page we use the <img> tag. Image tag also requires <src> source tag as well as < alt> tag to display any image in the page.
• <video>: We can also embed video in our html page with the help of <video> tag. We can embed any kind of video like a music video or a game video etc. through this tag.
• <audio>: We can embed sound files in our web page through this <audio> tag.
• <form>: For building a form in the web page the <form> tag is used. Inside the form tag, you can create checkbox, radio button, text fields, etc. In the end, a form contains a submit button so that the user can input the REQUIRED data and submit it.
• <input>: It is used inside a form to take input from the user. With the TYPE attribute, it takes different forms like text, radio, checkbox, password, date, number. It is one of the most common tags used on the web.
• <textarea>: It is also used inside a form to take input from the user. It is like <input type=“text”> but it is generally used for multiline inputs. It is useful when you want to take more input from the user.
• <label>: It is associated with the <input> tag and used with it. Although not required and we can use simple text with <input> also. But, it is programmatically associated with <input> tag and also used by screen readers.
• <select>: It is the DROPDOWN, which we find in almost any form. There can be many items in a select tag.
• <option>: It is used with the select tag to define the individual items inside it.

Comments in any programming language is used by developers to keep track of what the next BLOCK of code will do or means. It is very useful when the project grows big and many developers work on it. A well commented code can be easily understood by all other developers working on the project, then the one who wrote it.

Comments are ignored by the compiler which runs the code, and in case of HTML it’s the browser. HTML comments are a bit different than other languages. In JavaScript we can comment a line by using //.

WHEREAS in HTML to comment a line(s) we place it between &LT;!— and —>. We will add comments to our demo.html file from Question 4.

Attributes are special words generally used inside the opening tag to control the behaviour of the ELEMENTS. It provides additional information about an element. These are used as modifiers of a anTML element type.

Attributes comes in name/value pairs in the format name=“value”. Both attributes name and values are case insensitive, but W3C recommends lower case for both.

There are some pre-defined attributes which are associated with specific TAGS only like src, alt, and href. We will look into them first.

HTML links are created using <a> tag. It have a special href ATTRIBUTE, which specifies the address to open when the link is clicked.

HTML images are created using <img> tag. The file to be open is specified using src attribute.

HTML images can have 3 other attributes also. They are width, height and alt. The attribute width and height specifies the width and height of the image, and is generally used to make a larger image SMALL. The alt attribute mainly does two things. One, if for some reason the web-page is not able to open the image it will show the test inside alt attribute. Secondly, it is read by screen-reader used by vision imparted person.

<img src=“../images/sunset.jpg” width=“300” height=“300” alt=“A beautiful sunset”>

The next three attributes - class, id and style are used extensively in html tags and are generally used with any tag.

The class attribute is generally used when we need to apply the same style to more than one html tags. We use the same class name in them and then style it in css.

The id attribute is used when we need to identify an element/tag as unique. We can have only one id name attribute used through our HTML, but can have one class name used at many places.

The style attribute is used to inline CSS styles within the element/tag. Example of all three attributes are in below code.

Save the above code as demo.html and open in any browser.

• Elements:

• Tags:

The HTML document is a text document which can be opened  with any text editor in a computer. When we open the document we see that there are many tags used to BUILD the document. These Tags are actually keywords SURROUNDED  by angled brackets and each one of them describes an element.

Most of the tags have opening and closing tags

• Tags:

Keywords used to format a web-browser are known as tags.

Example: (START Tag) <p>...</p> (End Tag).

• Elements:

When content is inserted between the Start Tag and End Tag this is known as Element.

Example: (Start Tag) <p>This is element of HTML</p> (End Tag).

SEVERAL new elements and attributes were introduced in HTML5 which helps us in building

attractive websites.

Following new features are supported by HTML5:

• New Semantic Elements: Elements like header, footer article, section, aside, main, etc. are offered in HTML5. These all TOGETHER convey the purpose of elements and the type of content inside both to the developer and the browser.

• New Form Types – Other than standard form input types few more new form input types are supported by HTML5 such as date, time, week, month, number, range, email, URL, etc.
• Video and Audio – Through these new tags, you can embed a video in your website. It also supports audio tags through which you can embed sound in your website.
• Local Storage – WEB applications can store data locally within user's browsers with the help of Local Storage. It is more SECURE and locally large amount of data  can be stored without hampering the performance of the website.
• Drag and Drop Features – This is a new feature introduced in HTML5 you can drag an object to new location with the help of this feature.

HTML stands for Hyper Text Markup language. It along with CSS and JavaScript forms the FOUNDING stone of the Internet. All web-pages are written in HTML, as this is the language understood by most web-browsers. It is the most essential part, as for a web-page CSS and JS are not essential.

An HTML document consists of HTML tags and saved with .html. These tags are created and new tags are added to HTML by standard committee WORLD Wide Web Consortium (W3C).

An example of a simple HTML page.

On opening it in a browser.

Below are the best practices to be followed to create a practical and maintainable CSS.

• Think in terms of components, not pages.
• Think about types of things, not INDIVIDUAL things.
• Prefer classes to IDs.
• Create composable classes.
• Use descendent selectors to avoid REDUNDANT classes.
• Keep the selectors as short as possible.
• Order the CSS rules loosely by specificity.
• Prefer percentages for INTERNAL layout DIMENSIONS.

Contenteditable attribute allows the user to edit any of the text contained within the element, including its children. User can edit a simple to-do list and store them using local STORAGE.

Cookies will continue to be an effective TOOL for the FORESEEABLE future, but they have some drawbacks.

• Capacity limitations: Cookies are limited to about 4 KB of data, which is not large, although we can create more than 30 cookies per SITE. (The actual maximum limit depends on which browsers you are targeting; the AVERAGE is between 30 and 50.)
• Overhead: Every cookie is sent with each HTTP request/response made, regardless of whether the values are needed. This is often true EVEN for requests for static content (such images, css files, and js files), which can create heavier-than-necessary HTTP messages.

<P>This <mark> ELEMENT is fused to highlight or draw attention without changing its IMPORTANCE or emphasis. The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in ANOTHER context. Below are the different use cases.

• Indicating a searched-for word or phrase in a search results page.
• Indicating a specific code of interest in a code sample such as a change that’s discussed in the surrounding text.
• Highlighting part of a QUOTATION that wasn’t emphasized in the original.

Example 

While Remy and Bruce did a masterful job on <cite>Introducing HTML5</cite>, I’m not sure about that shade of brown.

<aside>:  Piece of content that is tangentially RELATED to the content that surrounds it but isn’t essential for understanding that content. <aside> content should be added to the main content; that is, any related content. While print design can provide inspiration, don’t stop at pull quotes.

For example, a footnote provides extra but unessential information, and a pull quote (while essential content) is a quoted COPY of the text from the main content. However, keep in mind the <aside> must be related. Having your site’s sidebar in an <aside> as a child of <body> is fine, but site-wide information shouldn’t appear in an <aside> that is the child of an <article>, for example. ALSO, <aside> would be appropriate for advertising, as long as it was related to the parent sectioning element. Here is an example <aside> providing extra information in the margin of an article.  

Example

Output

An image can be inserted into the document using <IMG>. Use the src attribute to specify the URL containing the image. alt attribute (ALTERNATIVE attribute) is used to provide a brief description of the image. This alternative description should be written specifically for screen readers to read and for displaying when the image fails to download. Decorative images are best displayed as background images, but if we need to use a decorative <img> ELEMENT, INCLUDE the alt attribute, but leave it empty.

Because a browser downloads each image separately, it needs to know the image’s height and width so it can create a placeholder for the image while the image downloads. Otherwise, after each image is downloaded and its real size becomes known, a browser has to reflow the PAGE. This slows the rendering and annoys the user. To set an image’s size, we can use the width and height attributes of <img> or the width and height CSS properties.

Example:

The Strong and em tags are new semantic inline elements  to specify the RELATIVE importance of their content. Search engines use <em> and <strong> to rank content.

<em> was EMPHASIS and is now for stress emphasis, such as something pronounce differently.  The “stress” being referred to is linguistic; if spoken it would be emphasized pronunciation on a word that can change the nuance of a sentence.

For example "Call a doctor now!" stresses doctor, perhaps in reply to someone asking "She looks thirsty, should I call a homoeopath?" In comparison, "Call a doctor now!"  changes the emphasis on doing so quickly.

<strong> was for stronger emphasis and is now for strong importance for its content. Strong INDICATE relative importance by  NESTING <strong> elements

Example 

Output

Example

Output

<P>Example

Output

No character ENCODING declared at the document level for below document can be as below.

• Original Code

• Corrected Code

This can be fixed by declaring the Character Set. Use UTF-8 Character encoding and add this markup to head SECTION.

List of new Media Elements that have been added in HTML5 are :

• <audio> - It defines sound content
• <VIDEO> - It defines a video or a movie
• <source> - This tag defines the multiple media RESOURCES for <video> and <audio>
• <embed> - It provides a container for an external application or INTERACTIVE content
• <TRACK> - It defines TEXT tracks for <video> and <audio>.

The various tags provided for better structuring in HTML5 are:

• <HEADER> - This tag is used to define a header for a document or section
• <footer> - This tag defines a footer for a document or section
• <section> - It defines a section in a document
• <summary> - It provides a visible heading for a <details> element.
• <details> - It defines additional details that can be viewed or hidden by the user
• <command> - It defines a command button to be invoked by the user
• <hgroup> - When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.
• <dialog> - It defines a dialog box.
• <figure> - This tag SPECIFIES content like illustrations, diagrams, photos, code listings, etc.
• <figcaption> - It is used to provide a caption for a <figure> element
• <article> - This tag defines an article.
• <aside> - It defines content other than the page content.
• <bdi> - This tag isolates a part of text for formatting in a different direction from other text.
• <mark> - It defines highlighted text.
• <meter> - It defines a scalar measurement within a known range.
• <nav> - It defines links for NAVIGATION.
• <progress> - This tag EXHIBITS the progress of a task.
• <ruby> - It defines a ruby annotation for East Asian TYPOGRAPHY.
• <rt> - It defines an explanation/pronunciation of characters for East Asian typography.
• <rp> - This tag tells the system what to display in browsers that do not support ruby annotations.
• <time> - This tag defines a date/time.
• <wbr> - This tag defines a line-break.

A common feature of any website, even the most basic static site is a Contact Us form. Here, the user will enter his/her basic information and when clicked on Submit, it will send an email to us.

This feature can be implemented very easily using mailto in attribute action of a form. Below is a SIMPLE Contact Us form containing this mailto.

It uses your local email client of the computer to send an email, once we click on submit. On a Mac, it will open the default “Mail” client as shown in the screenshot.

We can display a code block in our HTML using the combination of <pre> and <code> tag. The <code> tag only represents a single line and if we wrap our complete code in the <code> tag, it will be displayed in a line.

So, we use it in combination with <pre> tag. We basically wrap everything inside a <pre> tag. The <pre> tag stand for reformatted test. So, anything we give inside it including line breaks will be shown.

We will add some code to display in our canvas example in Question 18.

<CANVAS&GT; tag HELPS the user to draw anything in the canvas area. It is generally used in creating graphics or animation in the page.

Game graphics and other visual images can be created using the tag canvas>. Inside the <canvas> tag we can also specify the height and width attributes.

Below is an example for creating two simple overlapping squares of different colors. We create a <canvas> tag in our HTML, then the rest of coding is in the JavaScript. Here, first, we take the id then we tell the browser it's a 2d canvas by canvas.getContext('2d').

Then we convey the COLOUR by fillStyle and the dimensions of the rectangle by fillRect(10, 10, 100, 100), which means it will start at position 10,10 and width and height of 100.

The topic of the canvas is very large and we can create some complex shapes and also render animation on the web-page.

HTML5 introduced the feature to store DATA in the browser. This is a very useful feature, which can be used by developers to store user data when they visit the site.

There are two types of Web Storage in HTML5 -

• Session Storage - As the name suggests, it STORES data only for the current session. In other words, the data stored will be cleared once we CLOSE the browser.
• Local Storage - It is ANOTHER type of Web Storage and the data stored in local storage, doesn’t gets cleared even when the browser is closed.

The local storage can be accessed using localStorage and session storage can be accessed using sessionStorage. In the below example, we are storing the number of hits in both localStorage and sessionStorage. But if we close the browser, the Session Storage count again starts from 1 but in Local storage, it persists.

<iframe> tag is also called HTML inline frame element. It is generally used to display the content of another WEBSITE inside our web-page. One of the most common uses is to display maps, inside our webpage. We are doing the same in our example.

The <iframe> tag have MANY attributes like - src, width, height.

• The src attribute is the address of the website you want to display.
• The width and height specify the dimensions of the iframe.

While surfing net, we come across many websites to GET the information which we want to get, along with this we also come across some websites which have formed in the bottom or they POP up a form for the user to enter his/her information.

To create a form in our website we use the <form> tag. Inside the form tag, we create text area, checkbox,  radio buttons, Drop down buttons, etc to gather the information of the site visitor. GENERALLY, once the user fills the form and clicks the Submit button, all the data is taken and send to some backend server. On the backend server, it is stored in some database.

The <form> tag have two important attributes - action and method. The action attribute specifies the backend script to process your data like a PHP script. The method specifies the method for API calls - mostly GET or POST.

The form example is below.

Meta tag is used to describe the data in the webpage. Metadata literally means data about data. One of the most popular uses of the meta tag is to INCREASE the SEO(Search Engine Optimisation) so that your website comes on the top of google search. the clever use of meta tag can do that but it is more than that.

<meta> tags are included in the webpage by placing it inside <head>..</head> in your webpage. They contain various attributes which define them.

Keywords

This attribute is used to specify the keywords used in your web-page. It is used by crawlers from search engines like google to find sites. So, giving the right keyword is very necessary for good SEO.

Description

This attribute is used to describe the content of your web-page. It is again used by search engines like google to index your site. So, giving the right description of your website is also very IMPORTANT for SEO.

Revision Date

This attribute is used to give the last revision date of your website. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so if the revision date is updated it will refresh its version in your computer.

Refreshing

This attribute is used to notify the browser to refresh your website after the mentioned duration. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so this attribute will force the browser to refresh our site after the mentioned time in seconds.

Redirection

You can use the refresh attribute to redirect your website to some other webpage, after the mentioned duration in seconds. It is done by adding an additional URL to the content. The below example will redirect your website to sometutorial.com after 5 seconds.

Cookies

Cookies are data stored in your computer web-browser and are exchanged with the web-server which hosts the site. One of the most common use is to store your authentication details on the web-browser and use it to communicate with the server so that you don’t have to enter credentials every time. In the cookie attribute for meta, we mention the time till the cookies will be stored in your system.

Author

This attribute is used to set the author name of your web-page. It is again used by search engines like google.

Character Set

This attribute is used to specify the character set of your web-page. By default, web-servers uses ISO-8859-1 (Latin1) encoding to process your web-page. This is an old encoding with very limited 256 characters. You can use the more modern UTF-8 encoding by this attribute or if your website is in Chinese you can use Big5 encoding.

Viewport

A very important attribute which sets the viewing area, as per the device you are rendering your web-page. So by using this website, it becomes a bit responsive by itself and adjusts it according to devices.

Now, we will make a complete web-page with these meta tags including the amazing viewport also.

Save the above code as demo.html and open in any browser.

Now, resize the browser to check the mobile view. You can see the viewport meta tag in play and will add responsiveness to the web-page.

There are no rules for HTML structure and web-page will not throw an error if we don’t follow structure. But then also there are a set of rules which are the de-facto standard to create a webpage.

• <DOCTYPE>

The first tag to be used in a web-page is the doctype tag. It is used for historical reasons and its PURPOSE is to prevent the browser to switch to quirks mode. In the old DAYS of the web pages were written for two BROWSERS of the time - Netscape Navigator and Internet Explorer. When web-standards were made by W3C, the <doctype> tag was used to tell the browser to run the following web-page in full mode, instead of quirks mode for Netscape Navigator and Internet Explorer. The latest way described in HTML5 is to use <!DOCTYPE html> at the top of your web-page.

• <html>

After the <!DOCTYPE html>  we wrap our entire code inside a pair of <html>…</html> tags.

• <head>

The head tag is mainly meant for the browser and not directly rendered. It contains <title> tag, which is the title of the web-page. It also contains <meta> tags, which contains various information for the web-page. Also contains <script> tag to link external javascript files and can also contain <link> tag to link external stylesheets.

• <body>

It contains the main body for our page. The code inside it is what we see in our web-page. In the body tag, we can contain all our elements normally or can organize it in a better way using semantic tags.

And below is an example for-

Save the above code as demo.html and open in any browser.

Semantic elements are the TAGS which have both meaning to the browser and developer. In other words, semantic elements are the tags in plain English which says what it does.

EXAMPLE CONSIDER <div> and <span> which says nothing about what they do or what they are to a normal person. They are non-semantic elements.

On the other hand, elements like <form> and <table> tells what they are and do exactly the same thing. They are semantic elements.

Some of the Semantic elements with their brief descriptions are -

• <article>- It specifies some content on the website. Used to wrap an article like a blog post on the SITE.
• <section>- It specifies some section in article. An article can have many paragraphs and they should be wrapped in section tag.
• <header>- It specifies the header section in the website. It is use to wrap the content, which will form the header for the site.
• <footer>- It specifies the footer section of the website. Generally contains the contact us, copyright information.
• <nav>- It is used to wrap all Navigation part of your website. All the navigation links should be put here.
• <aside>- It is used to wrap all the content of the website, which will be in the sidebar. In most websites sidebar contains advertisements and aside can be used to wrap them.
• <main>- It specifies the main content of the website. It will wrap all your articles and other section.
• <figure>- It is used to wrap an image tag and convey the message that the following contains images. It is generally used with fig caption tag.
• <figcaption>- It is used inside a figure tag along with image tag and is used to specify the caption.

Below is an example of a website created using semantic elements.

Save the above code as demo.html and open in any browser.

There are various elements used in HTML to build a web PAGE. All the elements fall in two CATEGORIES i.e either they are block level elements or inline elements.

• Block Level Elements:

Block level elements are elements which start in a new line and occupy the whole available horizontal space of the parent element, it stretches both on the left and right as far as it can.

Examples of block level elements are:

<div> is used as a block level element.It always starts in a new line.

<p> p element or the paragraph element is also used as a block level element as it takes the whole available space.

In the same way header, footer, aside, address, section all these are block level elements that takes whole available space both in the right as well as in the left.

• Inline Elements:

Inline elements are elements which only take the width required to fit into the line. If we have two inline elements, then each will take the width required by it to fit in the line. When they cannot fit in the line, they generally wraps to the next line.

Some, inline elements are <span>, <a>, <b>, <LABEL>

In the below code, we have two <div> and 7 <span> elements.

Save the above code as demo.html and open in any browser. You can see that the <div> elements takes their one line, whereas the <span> elements are all in one line.

Below are the few best practices to improve the performance of the page load time.

• Make Fewer HTTP Requests
  • Implementing parallel HTTP requests will improve performance.
  • Combining smaller resource files and creating a single file will reduce the number of HTTP requests.
  • Use Image sprites to combined image files and delivering content more quickly over the browser’s RELATIVELY low number of parallel connections.
• Use a Content Delivery Network (CDN)
  • PUTTING all that static content CLOSE to the user can really speed up performance.
• Avoid Empty src or href Attributes
  • Avoid creating an img element with an empty src attribute and then dynamically assign the value of the src attribute during page load with JavaScript. With this approach, the elements always get evaluated before scripts get run. The browser tries to evaluate that empty attribute and creates an HTTP request to do so.
  • A similar pattern and problem appear for href attributes, usually in anchor elements. If the href attribute is blank, the browser sends an HTTP request to the server when the user triggers the interaction. That doesn’t affect page load time, but it does create needless traffic on the servers,
  • wasting bandwidth and potentially slowing delivery for all visitors. The simple fix for this problem is to set the value of the href attribute to a JavaScript COMMAND like <a href="javascript:;" class="triggerName">Trigger</a>
• Add Expires Headers
  • Adding an Expires header with a date far in future to all your static components (images, stylesheets, scripts, flash, PDF, and so on) lets the static content be cached by browsers. The browsers won’t have to FETCH the static content for subsequent visits and they’ll have a much faster loading time.

E.g: Expires: Wed, 1 Jan 2020 00:00:00 GMT

• Compress Components with GZIP
  • Using the “Accept-Encoding” header, the content in the HTTP request can be compressed. Such a header appears as below
  • Accept-Encoding: gzip, deflate.

The header specifies two kinds of compression. GZIP is more common because it is the most effective compression scheme available. GZIP reduces the size of a response by about 70%.

• Put CSS at the Top

If the page contains style information, put that information at the top (in the head element). To avoid redrawing many web browsers won’t start rendering a page until the browser has all the style information.

• Put JavaScript at the Bottom
• Avoid CSS Expressions
• Remove Unused CSS
• Minify JavaScript and CSS
• Minimize Redrawing

Apply styles to chosen class or ID as follows:

• Use the type SELECTOR to select all ELEMENTS of a particular type. The type selector is the ELEMENT’s name without the less-than and greater-than signs.
• Use the class selector to select all elements that you have assigned to a class. The class selector is the period followed by the name of a class. The class selector is added to the end of a type selector. You can add it onto the end of the universal selector, *, to select all elements in the document that have a matching class, such as *.my-class1. You can also use the class selector all by itself, such as .my-class1, which is a SHORTCUT for *.my-class1.
• Use the ID selector to select all elements in the document assigned to that ID. Each element has one ID, which should be UNIQUE in a document.

HTML

• type { STYLES }
• *.class { STYLES }
• #id { STYLES }

HTML supplies the class and id attributes for these purposes. We can assign a class and an id to any ELEMENT. An ID and class name cannot include a space. It must start with a LETTER and may contain letters, numbers, the underscore (_), and the dash (-). Since CSS selectors are case-sensitive when USING XHTML, it is a common PRACTICE to use lowercase class and ID names.

Markup a DOCUMENT with block elements to identify its structure. There is MEANING in structure, and HTML markup is most meaningful when its structure reflects the hierarchy and relationships of a document’s topics.

Because a parent element contains child elements, they are related structurally. This implies their content is related. For example, a child’s content is typically a subtopic of its parent’s topic, and siblings typically have related subtopics. Implicit in the hierarchical nature of HTML is the assumption that document organization is hierarchical.

Structural blocks may contain block elements only. They have structural meaning, but they have LITTLE semantic meaning. In other words, they do not tell you what something is; they tell you how it is organized.

There are four major structural block elements (<ol>, <ul>, <dl>, and <table>) with nine supporting structural elements (<li>, <dt>, <dd>, <CAPTION>, <thead>, <tfoot>, <tbody>, <colgroup>, and <col>)

You can USE Microsoft Internet Explorer CONDITIONAL comments to load a style sheet created exclusively for Internet Explorer. You can place a conditional comment in <HEAD> after all LINKS to other style sheets. Inside the conditional comment, you can place a link to a style sheet. I call this the conditional style sheet. Since the conditional stylesheet comes last, it overrides previously loaded styles. You can create a separate conditional stylesheet for Internet Explorer 6, and if necessary you can create one for Internet Explorer 7. You can include styles in this stylesheet to compensate for different behaviors and bugs.

The following pattern loads two conditional style sheets. The first is for Internet Explorer versions 6 and earlier. The second is for Internet Explorer 7 and higher. Internet Explorer 7 fixes most of the bugs in Internet Explorer 6, but there are still a number of CSS features that it does not implement, such as the content property.

HTML

Placeholder: The placeholder attribute can only CONTAIN TEXT, not HTML markup.   HOWEVER, there are some vendor-specific CSS extensions that allow you to style the placeholder text in some browsers.  Browsers that don’t support the placeholder attribute will simply IGNORE it. No harm, no foul. See whether your browser supports placeholder text.

Here’s how you can INCLUDE placeholder text in your own web forms:

XSS Attack: XSS refers to client-side code injection attack where an attacker can execute malicious scripts by making use of unvalidated or unencoded user inputs in web applications. This malicious scripts may attempt to steal sensitive information from the user visiting the website. We need to prevent attack by filtering user inputs using blacklisting(not allowing users to input character sequences such as <, >, <script> ETC.).

Different type of XSS attacks :

Stored or Type 1 XSS attacks: Stored XSS attacks in which the supplied malicious input from the attacker is persisted and stored in the back-end database or repository. Whenever that content is retrieved and rendered to be displayed on the web page, the browser is completely unaware of it and it either executes the malicious JavaScript that comes from the database or renders the malicious HTML markup, instead of displaying it as text. The stored XSS will remain permanently in the database and will impact all users visiting the affected web page.

Reflected or Type 2 XSS attacks: Reflected XSS attacks are the second type of XSS attack vector, in which the malicious XSS payload is not stored in the database table for persistence, but is still injected in some parameter of the web page that gets rendered back to the user. The browser, unaware of this CHANGE, simply either renders the injected malicious HTML or executes the injected malicious Javascript code, again RESULTING in the user's data being compromised.

DOM-based or Type 0 XSS attacks: A DOCUMENT object model-based XSS is the third category of XSS attacks. Here, the XSS payload is not sent to the server, but due to implementation flaws and changing the state/DOM of the web page with the help of client-side JavaScript, an attacker paces the payload that gets picked up with the JavaScript responsible for manipulating the state of the web page.

Prevention Methods: 

✓ Output encoding: Escaping any character a user enters before displaying it.

✓ Filtering inputs using whitelisting: Only allow CHARACTERS (e.g, A–Z and 0–9) to be entered.

✓ Filtering inputs using blacklisting: Not allowing a user to enter character sequences such as <script> or even < and > characters.

sessionStorage is a Web STORAGE to store the data. It retains data for a single session only. If the user closes the browser window, RECORDS stored are automatically cleared. This is an important advantage because only a limited amount of space is available.

SessionStorage is firmly dedicated to their respective browsing contexts. sessionStorage has a CONTEXT that, by design, is extremely CONFINED. It’s limited to a single browser tab or window. Its data cannot be passed from one tab to the next. However, the data can be shared among any <iframe> elements that exist on the page.

Code to show the usage of sessionStorage