Interview - HTML

How will you make an image draggable in HTML5 ?

Making any HTML5 elements including images draggable is quite easy. We take the help of the draggable attribute. It takes true, false, or auto as arguments. The default value is auto. The draggable property depends upon the browser. If we set the value true then the image is draggable. If we set the value false, the image is not draggable. 


<img src="" alt="" draggable="true">

HTML5 has how many heading tags ?

HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with <H1> being the highest(or most important) level and <H6> the least.

Is it possible for a web page to have multiple header and footer elements ?

Yes. Both <header> and <footer> tags are made to fulfill their respective purposes in relation to their parent section. So not only can you use both header and footer elements on a page in HTML5, but you can also use both in every <article> or <section>. A <header> tag must be present for all articles, sections, and pages, although a <footer> tag is not necessary.

List out the page structure elements of HTML5

The <html> element

The <html> element follows the doctype information, which is used to inform the browser that this is an HTML document. You can use the lang attribute with the en value to specify that the document is in English. But nowadays, even the lang attribute is unnecessary for the document to validate or function correctly.


The <head> section

The next part is the <head> section. The <head> element contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user.

The <meta> element is used to specify the metadata to provide browsers and search engines with technical information about the web page.

Use the <title> element to define the title of your document.

Next is the <link> element which sets the relationship between the current document and the external resource. Generally, it is used to link to the external CSS stylesheet.


The <body> element

The <body> of a document contains the content of the document. The content may be presented by a user agent in different ways. E.g., the content can be text, images, links, colors, graphics, etc.


The <script> element

In HTML5, the <script> tag is put to correspond the practices for embedding JavaScript. For example, it is related to the page loading speed.


Headings (h1-h6 elements)

The <h1>-<h6> heading elements are used to give a short description about the coming section. <h1> is considered to the the most important, and <h6> the least important one.


The <header> element

Use the <header> element to define a header for the document or section. It usually contains a logo, search bar, navigation links, etc.


The <nav> element

The <nav> element defines a block of navigation links, either within the current document or to other documents. Note, that not all links in the HTML document can be placed inside the <nav> element; it can only include major navigation blocks.


The <article> element

The <article> element is used to define an independent, self-contained content (articles, blog posts, comments, etc.). The content of the element has its meaning, and it is easily differentiated from the rest of the webpage content.


The <section> element

The <section> element is used to group standalone sections within a webpage containing logically connected content (news block, contact information, etc.).

List some of media tags available in HTML5.

Media Tags

  • <audio> - It is an inline element that is used to embed sound files into a web page. It is a useful tag if you want to add audio such as songs, or any sound files into your webpage.
  • <video> - It is used to embed video files into a web page. It is a standard way to embed a video into your web page.
  • <source> - It is used to attach multimedia files like audio, video, and pictures. It is used as a container for embedding plug-ins such as flash animations.
  • <embed> - It is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. As you can observe that <audio>, <video> elements contain the <source> element, the <source> tag is used to attach multimedia files.
  • <track> - It specifies text tracks for media components audio and video. It is used to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in it. Thus it is a simple sectors for the <audio> and <video> elements.


Advantage of Media tag

  • Plugins are no longer required.
  • Speed – anything naturally integrated into a browser will be rendered and executed in a faster fashion than imported third-party.
  • Native (built-in) controls are provided by the browser.
  • Accessibilities (keyboard, mouse) are built-in automatically.

What are inline elements and block level elements in HTML5 ?

Block elements

Examples of Block elements

  • <h1>-<h6> - This element is used for including headings of different sizes ranging from 1 to 6.
  • <div> - This is a container tag and is used to make separate divisions of content on the web page.
  • <hr> - This is an empty tag and is used for separating content by horizontal lines.
  • <li> - This tag is used for including list items of an ordered or unordered list.
  • <ul> - This tag is used to make an unordered list.
  • <ol> - This tag is used to make an ordered list.
  • <p> - This tag is used to include paragraphs of content in the webpage.
  • <table> - This tag is used for including the tables in the webpage when there is a need for tabular data.


Examples of HTML 5 Semantic block elements

  • <header> - This tag is used for including all the main things of the webpage like navbar, logos, and heading of the webpage.
  • <nav> - This tag helps to navigate through different sections by including different blocks of hyperlinks in the webpage.
  • <footer> - This contains all information about the authorization, contact, and copyright details of the webpage.
  • <main> - The main content of the webpage resides in this tag.
  • <section> - This is used separate different sections in the webpage.
  • <article> - This tag is used to include different independent articles on the webpage.
  • <aside> - This tag is used to mention details of the main content aside.


Examples of Inline elements

  • <a> - This tag is used for including hyperlinks in the webpage.
  • <br> - This tag is used for mentioning line breaks in the webpage wherever needed.
  • <script> - This tag is used for including external and internal JavaScript codes.
  • <input> - This tag is used for taking input from the users and is mainly used in forms.
  • <img> - This tag is used for including different images in the webpage to add beauty to the webpage.
  • <span> - This is an inline container that takes necessary space only.
  • <b> - This tag is used in places where bold text is needed.
  • <label> - The tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control.


Difference between Inline and Block elements

Inline Elements

  • Inline elements occupy only sufficient width required.
  • Inline elements don’t start in a new line.
  • Inline elements allow other inline elements to sit behind.
  • Inline elements don’t have top and bottom margin.


Block Elements

  • Block Elements occupy the full width irrespective of their sufficiency.
  • Block elements always start in a line.
  • Block elements doesn’t allow other elements to sit behind.
  • Block elements have top and bottom margin.


What are semantic tags in HTML5 ?

A semantic element clearly describes its meaning to both the browser and the developer.


Examples of non-semantic elements:

  • <div> and <span>
  • Tells nothing about its content.


Examples of semantic elements:

  • <form>, <table>, and <article>
  • Clearly defines its content.


Semantic Elements in HTML:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

What are the differences between HTML5 and HTML ?

HTML

  • It didn’t support audio and video without the use of flash player support.
  • It uses cookies to store temporary data.
  • Does not allow JavaScript to run in browser.
  • Vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.
  • It does not allow drag and drop effects.
  • Not possible to draw shapes like circle, rectangle, triangle etc.
  • It works with all old browsers.
  • <HTML>, <Body>, and <Head> tags are mandatory while writing a HTML code.
  • Older version of HTML are less mobile-friendly.
  • Doctype declaration is too long and complicated.
  • Elements like nav, header were not present.
  • Character encoding is long and complicated.
  • It is almost impossible to get true Geolocation of user with the help of browser.
  • It can not handle inaccurate syntax.
  • Being an older version , it is not fast , flexible , and efficient as compared to HTML5.
  • Attributes like charset, async and ping are absent in HTML.


HTML5

  • It supports audio and video controls with the use of <audio> and <video> tags.
  • It uses SQL databases and application cache to store offline data.
  • Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5.
  • Vector graphics is additionally an integral a part of HTML5 like SVG and canvas.
  • It allows drag and drop effects.
  • HTML5 allows to draw shapes like circle, rectangle, triangle etc.
  • It supported by all new browser like Firefox, Mozilla, Chrome, Safari, etc.
  • These tags can be omitted while writing HTML code.
  • HTML5 language is more mobile-friendly.
  • Doctype declaration is quite simple and easy.
  • New element for web structure like nav, header, footer etc.
  • Character encoding is simple and easy.
  • One can track the Geolocation of a user easily by using JS Geolocation API.
  • It is capable of handling inaccurate syntax.
  • It is efficient, flexible and more fast in comparison to HTML.
  • Attributes of charset, async and ping are a part of HTML 5.


There are many HTML elements which have been modified or removed from HTML5. Some of them are listed below:

  1. <applet> - Changed to <object>.
  2. <acronym> - Changed to <abbr>.
  3. <dir> - Changed to <ul>.
  4. <frameset> - Removed.
  5. <frame> - Removed.
  6. <noframes> - Removed.
  7. <strike> - No new tag. CSS is used for this.
  8. <big> - No new tag. CSS is used for this.
  9. <basefont> - No new tag. CSS is used for this.
  10. <font> - No new tag. CSS is used for this.
  11. <center> - No new tag. CSS is used for this.
  12. <tt> - No new tag. CSS is used for this.

What are the frequently useful API in HTML5 ?

HTML Geolocation API

The Geolocation API is used to get the current location of the user or the page visitor. It will show the user’s location only if the user allows it to do so, as it compromises the security and privacy of the user.


Methods available in Geolocation API:

  • getCurrentPosition() Method - The getCurrentPosition() method returns an object with properties such as latitude, longitude, accuracy, altitude etc.
  • watchPosition() Method - This method will return the current position of the user as well as the updated location when the position of the user changes or the user travels from one location to another location.
  • clearWatch() Method - This method will stop the watchPosition() method to not tracing the user anymore.


HTML Drag and Drop API

Drag and Drop is a common feature nowadays, where you can drag an item from one place and drop it in another. To use drag and drop first you have to add the draggable="true" attribute to the element.


HTML Web Storage API

HTML Web Storage API is used to store the data on the web browser. Early, the data was stored in the form of cookies that can store a small amount of data and can-not transferred further to the server. But, HTML5 introduces us to the Web Storage API that can store large data as compared to cookies and can be transferred to the server. Using this API for storing data is more secure than using cookies.


Web Storage API provides us with two objects to work with:

  1. window.sessionStorage - This object temporarily stores the data on the web browser such that if the browser is refreshed or closed the data stored will be lost.
  2. window.localStorage - localStorage permanently stores the data on the browser with no expiration such that will not be lost even if the browser is refreshed.


HTML Web Worker API

Generally, when the JavaScript is uploading for the page, the page got stuck until uploading gets finished. The Web worker API helps us to upload the JavaScript without affecting the performance of the page. It helps to run JavaScript run in the background independent of other scripts.



What are the various formatting tags in HTML5 ?

  1. <b> and <strong> tags : Both tags are used to make the text bold. The text content of the tag is shown as important information on the webpage.
  2. <i> and <em> tags : Both tags are used to make the text italic and emphasized. Both the element have opening and closing tags.
  3. <small> and <big> tags : The <small> tag is used to set small font-size where as <big> tag is used to set big font-size.
  4. <sup> and <sub> tags : The <sup> tag is used to superscript a text whereas <sub> tag is used to subscript a text.
  5. <ins> and <del> tag : The <ins> tag is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag. This tag is mainly used in text in place of deleted text whereas <del> tag is used to delete the text it adds a strike line on the text.
  6. <mark> tag : The <mark> tag is used to highlighting a text. It has an opening and closing tag.

What is image map in HTML5 ?

The <map> tag is used to define an image map. An image map is an image with clickable areas.


The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.


The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.




What is the difference between canvas and svg ?

SVG

  • Vector based (composed of shapes)
  • SVG has better scalability. So it can be printed with high quality at any resolution.
  • SVG gives better performance with smaller number of objects or larger surface.
  • SVG can be modified through script and CSS.
  • Multiple graphical elements, which become the part of the page’s DOM tree.


Canvas

  • Raster based (composed of pixel)
  • Canvas has poor scalability. Hence it is not suitable for printing on higher resolution.
  • Canvas gives better performance with smaller surface or larger number of objects.
  • Canvas can be modified through script only.
  • Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format.