HTML

HTML

1. What is HTML ?

HTML stands for Hypertext Markup Language. It is s markup language for World Wide Web. HTML was developed by Tim Berners Lee during 1990’s. It consists of tags which are used to define content and web page formatting.

2. What is DOCTYPE ?

DOCTYPE stands for Document Type Declarations. DOCTYPE is used to specify the web browsers that which types of documents(such as SGML or XML Documents) it will receive. <!DOCTYPE> is declared above the <html> tag.

3. What are different version of HTML ?

HTML has many versions since it inceptions during 1990’s. HTML version are HTML, HTML+, HTML 2.0, HTML 3.2, HTML 4.0 and the latest version HTML 5.

4. What is Tag ?

In HTML, a tag tells the browser what to do. 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.

5. What is HTML Element ?

An HTML element is everything from starting to the ending of HTML tags. For example, <p> This is an HTML Element</p>, in this example, from starting tag to ending tag everything is HTML element and “This is an HTML Element” is Element Content.

6. What is HTML Attribute ?

HTML attribute adds additional information to the HTML Elements. For example, <font size=”5” color=”green”>, here size and color are html attributes.

7. How does HTML page look like ?

<html> <head> <title>Title of the page</title> </head> <body> Content goes here. </body> </html>

8. What is Hyperlinks ?

Hyperlinks are used to navigate to new document with the help of text, image or with group of words.

9. Name some of the Web Browser ?

There are many editors for HTML like Notepad, Notepad++, EditPlus and WYSIWYG HTML editors etc.

10. Which is the basic editor in HTML ?

There are many editors for HTML like Notepad, Notepad++, EditPlus and WYSIWYG HTML editors etc.

11. What are web standard ?

Web standards are standards specified for the internet or World Wide Web aspects for improving internet usability by all major OS and browsers.

12. How to open a link in new tab or window ?

To open a link in new tab or window, we have to use the following html code:

<a href=”https://www.kodnest.com” target=”_blank”>Welcome to KodNest!</a>

13. What is formatting in HTML ?

The HTML formatting is a process of format the text for a better look and feel. It uses different tags to make text bold, italicized, underlined. More details.

14. List down some heading HTML contains.

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. So, <h1> is the largest heading tag and <h6> is the smallest one. For example:

<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6> 

15. Which HTML tag is used to view data in the tabular form ?

The HTML table tag is used to display data in tabular form (row * column). It also manages the layout of the page, e.g., header section, navigation bar, body content, footer section. Here is the list of tags used while displaying the data in the tabular form:

Tag Description
<table> It defines a table
<tr> It defines a row in a table
<th> It defines table heading in a table
<td> It defines table data in a table
<caption> It defines caption to table
<colgroup> It defines a group of one or more column in table
<col> It defines column properties for each column
<tbody> It is used to group the body content in a table
<thead> It is used to group the head content in a table
<tfooter> It is used to group the footer content in a table.

16. Explain cell padding and cell spacing.

Cell Padding : It refers to the gap or space between the cell content and cell border or cell wall.

– Cell Spacing : It refers to the gap between the two cells of same tables.

In HTML cell spacing and padding both are used with Table Border layout.

Example:

<table border cellpadding=2>
<table border cellspacing=2>
<table border cellpadding=2 cellspacing=2>

17. How many types CSS can be include in HTML?

There are three ways to include the CSS with HTML:

1. Inline CSS : It is used when only small context is to be styled.

– To use inline styles add the style attribute in the relevant tag.

2. External Style Sheet : Is used when the style is applied to many pages.

– Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

3. Internal Style Sheet : Is used when a single document has a unique style.

– Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style type=”text/css”>
hr {color:sienna}
p {margin-left:20px}
body {background-image:url(“images/back40.gif”)}
</style>
</head>

18. What are logical and physical tags in HTML?

Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclosed text in strong tag then it tell the browser that enclosed text is more important than other text.

– Physical text are used to tell the browser that how to display the text enclosed in the physical tag.

19. List down different types of Doctypes.

Doctype helps the web browser to correctly render the web pages. There are different types of Doctype that are available and they are as follows:

1. Strict Doctype : It consists of all the HTML elements and it is also known as DTD (Document type definition) but it doesn’t include the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. Transitional Doctype : It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. Frameset Doctype : It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

20. How to upload files using HTML to website ?

The uploading of files requires some necessary configuration like :An HTTP server that acts as a transaction between the user and the server. Access to the directory of cgi-bin that consists of the receiving script.

There are some scripts that are already available. Form for the implementation and the coding of it will be like:

<form method="post" enctype="multipart/form-data" action="up.cgi">

The form that has to be uploaded will be done by the following given code:

<input type=file name=upload><br>

This tag will contain the file name that has to be uploaded on the website.

Any remarks about the file will be written like:

<input type=text name=remark><br>
<input type=submit value=Press> This form will allow user to upload their own file in an easy way.
</form>

21. What are the list types available in HTML ?

The common list type are available in HTML are given below:

– Ordered list

– Unordered list

– Definition list

– Menu list

– Directory list

22. What is HTML blocks ?

HTML blocks can be defined by HTML tags like <span> and <div>.

23. What is the difference between and elements?

<div> tags are used to define section in document block wise whereas <span> tag is used to define section in documents inline.

24. How to change the size of the image ?

HTML image size can be change with the help of attributes as given the below

<a href=”hello.png” alt=”Image” height=”350” width=”200”>

25. What is the use of a span tag ? Give one Example.

The span tag is used for following things:

For adding color on text

For adding background on text

Highlight any color text

Example:

<p>
<span style=”color:#000000;”>
In this page we use span.
</span>
</p>  

26. What is use of an iframe tag ?

An iframe is used to display a web page within a web page.

Syntax:

<iframe src="URL"></iframe> 

Example:

<iframe src="demo_iframe.html" width="200px" height="200px"></iframe> 

Target to a link:

<iframe src="http://www.kodenst.com" name="iframe_a"></iframe>

27. What is a better way to design the layout of a web page – a table tag or div?

– The better way to design the layout of the webpage is by using the <div> tag.

– The <table> tag is used to present the data in tabular format.

28. What is Marquee tag ?

The <marquee> is a non-standard HTML tag which was used to create a scrolling text or an image. It was used to make the text/image scroll horizontally across or vertically down the web page.

<!DOCTYPE html>
 <html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <marquee direction=”down”>A scrolling text created with HTML Marquee element.</marquee>
  </body>
</html>

29. What are the frames ?

The <frame> tag defines a specific window, a frame, where we can load another web page. To specify the address of this web page, use the src attribute. There can be several such frames on one web page.

The <frame> tag is used with the <frameset> element, which define how to divide the window into frames.

Example:

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <frameset cols=”50%,50%”>
    <frame src=”hello.html”>
    <frame src=”world.html”>
  </frameset>
</html>

30. What is HTML DOM ?

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

31. What is Semantic HTML ?

Semantic HTML or Semantic Markup is HTML that introduces meaning to the web page rather than just presentation.

<form>, <table>, and <article> are examples of Semantic Elements.

Below are the list of few new Semantic Elements introducted HTML5

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

32. What is FieldSet in HTML ?

The <fieldset> is a tag in HTML that is used to group related elements in a form. It draws a box around the related elements.

33. What is a nest in HTML ?

If you go and have a look at HTML markup for any webpage today, you will let to know that HTML elements are contained within other HTML elements. These elements which are inside of other are known as nested elements and they had become the essential part of building any web page nowadays. The most expertise way to know more about nesting is just to think about HTML tags in the form of boxes that hold your content which can be in form of text, images,etc.HTML tags are basically the boxes around the content.

34. List down the media types and format in HTML.

HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Below is the list extensions supported by each media format.

Media Type Formats Supported
Images png,jpg,jpeg,gif,apng,svg,bmp,BMP ico, png ico
Audio MIDI, RealAudio, WMA, AAC, WAC, Ogg, MP3, MP4
Video MPEG,AVI,WMV,QuickTime,RealVideo,Flash,Ogg,WebM,MPEG4 or MP4

35. What is the XHTML ?

XHTML means Extensible Hypertext Markup Language, which is basically a part of Family of XML markup language. It usually extends the most popularly used HTML i.e. Hypertext Markup Language, the pages in which the web pages are formulated.

36. What is Responsive Web Design ?

Responsive Web Design makes your web page look good and suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.

37. What is HTML 5?

HTML5 is the fifth major revision of the standard that defines Hypertext Markup Language (HTML). One of the design goals for HTML5 is to support for multimedia on mobile devices. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents.

38. Difference between HTML and HTML 5.

Basis of Difference HTML HTML 5.0
Running of JavaScript Allows JavaScript to perform only in the interface of the browser. It does not run originally in the background of the browser. The JavaScript code can run in the browser’s background itself via the JS web worker API.
Support for multimedia tags Does not allow the inclusion or running of audio <audio> and/or video <video> tags in its programs. Allows the inclusion and performance of video and audio controls and tags.
Support for visualization linked to shapes Does not support the drawing of different shapes (triangles, circles, rectangles, etc.) in the older HTML versions. HTML5 supports the drawing of different shapes (triangles, circles, rectangles, etc.)
Support for vector graphics Offers support for vector graphics exclusively with programs like Silver-light, Flash and VML. HTML 5 allows support and usage of virtual vector graphics even without the support of programs of the likes of Silver-light, Flash and VML.
Mobile- friendliness Older HTML versions provide lesser mobile-friendly features. HTML5 is a comparatively more mobile-friendly language.
Simplicity of doctype declaration Doctype declaration is long and complicated in case of HTML.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Doctype declaration is comparatively quite simple and easy to understand in HTML 5.
<!DOCTYPE html>
Complexity of character encoding Character encoding is complicated and lengthy in HTML. Character encoding is very simple and easy to decipher in HTML 5.
Storage of data Uses cookies for the cause of storing temporary data. Uses SQL databases and related application cache memory for storing the offline data.
Elimination of elements Most originally launched elements are present in the older HTML. Elements of the likes of tt, big, dir, basefont, strike, frame, frameset, noframes, applet, isindex, font, center, acronym, as well as many other deprecated elements have been eliminated completely in HTML 5.
Absence of attributes (sync, charset and ping) Attributes such as async, charset and ping are not a part of HTML. Attributes such as async, charset and ping form an important part of HTML 5.
Drag and Drop HTML disallows drag and drop effects. HTML5 features drag and drop effects.
Support for new form controls HTML does not provide any support for newly introduced form controls. HTML5 supports different new types of form controls such as date and time, range, tel, email, number, url, search, etc.
Presence of new elements The new elements contained in HTML 5 are absent in HTML. HTML 5 contains several new elements. These include summary, time, aside, datalist, details, embed, audio, command, data, footer, header, article, wbr, figcaption, figure, mark, meter, nav, hgroup, bdi, canvas, output, progress, rp, keygen, rt, track, video, ruby, section, source, etc.
Presence of new attributes New attributes like tabindex, id, repeat, etc. are absent for use in HTML. Tabindex, id, repeat, etc. are certain attributes that are applicable to HTML 5.0 elements.

39. List down new features Introduced in HTML 5.

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.

40. What are the various Elements Provided By HTML5 for Media Content ?

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.

41. Describe Form Input Types in HTML 5 ?

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.

42. How to use JavaScript in WebPage ?

To add interactive capabilities to your page, you’ll need JavaScript here, except already provided with HTML. This is a scripting language that allows you to interact with certain elements of the page, based on user input. With CSS, there are three main ways here:

In line

Specific HTML elements allow you to run a section of JavaScript while performing a specific event. For example, clicking on a button allows the script to run. These events are accessed by attributes and vary based on the events available for each element. The following example shows a warning of a message when the user clicks on it.

<button onclick = “Warning (‘You clicked me!’);”> Click Me! </ button>

A script module

Until the browser document reaches the part of the document, you can define a script package wherever you are. Note that this may be inside the <head> or <body> section of your document.

<Script>
var x = 5;
var y = 6;
var result = x + y;
Warning (“X + Y Equals” + End);
</Script>

Link to the JavaScript file

Again, like CSS, this is the preferred method here. This allows the content of the page to keep users content how they relate to content, and allows them to load the same script on multiple pages. Just like the script module, you can load the JavaScript file from <head> or <body>, but we will load it in the order in which your document is configured.

<script src = “my-code.js”> </ script>

43. What is SVG Element ?

SVG is followed by the XML format; It has scalable vector graphics used to create vector graphics with interactive and animated support.

Resolution is independent of SVG because it does not lose its size or rearrange its quality.

44. How to disable input in HTML 5 ?

<input type=”text” value=”Raj” disabled>

45. What is header tag in HTML 5 ?

The HTML <header> element represents a group of introductory or navigational aids. The <header> element is usually contain the section’s heading (an <h1>-<h6> element or other elements like a logo, wrapped section’s header, a search form, and so on).

You can’t placed the <header> tag within a <footer>, <address> or another <header> element

46. What is footer tag in HTML 5 ?

The <footer> tag defines a footer for a document or section.

A footer typically contains information about the author of the section, copyright data or links to related documents

47. What is HTML5

and
Elements.

 In HTML5 <figure> contain the images and caption grouped together.

Example:

<figure>
  <img src=”demo.jpg” alt=”demo” width=”150″ height=”150″>
  <figcaption>Fig1. – Hello, HTML5</figcaption>
</figure>

The element defines the image, the element defines the image caption(Content)

48. Which elements are no longer supported in HTML 5.

<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>

49. What is onblur and onfocus in HTML 5.

Event attributes

The onblur attribute hits the moment that the element loses focus

The onfocus attribute fires the moment that the element gets focus.

Demo

<input type="text" value="Search" onfocus="if (this.value=='Search') {this.value='';}"  onblur="if (this.value=='') {this.value='Search';}">

50. HTML5 Tag for playing video files.

<video width=”400″ controls> <source src=”video_name.mp4″ type=”video/mp4″> <source src=”video_name.ogg” type=”video/ogg”> </video>

51. In which format SVG graphics is defined.

SVG graphics is defined in XML format.

52. What is HTML 5 Graphics ?

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.

53. Difference between SVG and Canvas.

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.

55. What is the use of Drag and Drop in HTML 5?

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.

56. What is HTML 5 Web Storage ?

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.

57. List down different types of Web Storage provided in HTML 5.

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’,’Raj’)

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’);

58. Difference between LocalStorage and SessionStorage Objects.

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.

59. What is Manifest file ?

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.

60. What is Audio Tag in HTML 5? What are its Attributes.

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.

61. Name 5 common block-level and inline HTML elements.

block elements <h1>, <p>, <ul>, <ol>, <li> inline elements <span>, <a>, <strong>, <i>, <img>

62. What is the use of data-attribute ?

It allow you to store extra information/ data in the DOM. u can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it.

<div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>

63. How can you generate public key in html ?

Html has a keygen element that facilitate generation of key and submission via a form.

<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">

64. How can you change direction of html text ?

<p><bdo dir=”rtl”>This text will go right to left.</bdo></p>

65. Can you apply css rule to a part of html document ?

Yes. by using “scopped” in the style tag.

66. When should you use section, div or article ?

<section>, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. A section normally has a heading (title) and maybe a footer too.

<article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

67. Describe the difference between a cookie, sessionStorage and localStorage.

Cookie LocalStorage SessionStorage
Initiator Client or server. Server can use Set-Cookie header Client Client
Expiry Manually set Forever On tab close
Persistent across browser sessions Depends on whether expiration is set Yes No
Sent to server with every HTTP request Cookies are automatically being sent via Cookie header No No
Capacity (per domain) 4kb 5MB 5MB
Accessibility Any window Any window Same tab

68. What is Critical Rendering Path ?

  • Constructing the DOM Tree
  • Constructing the CSSOM Tree
  • Running JavaScript – parser blocking resource
  • Creating the Render Tree
  • Generating the Layout
  • Painting

HTML

What does a DOCTYPE do?

DOCTYPE is an abbreviation for DOCument TYPE. A DOCTYPE is always associated to a DTD – for Document Type Definition.
A DTD defines how documents of a certain type should be structured (i.e. a button can contain a span but not a div), whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document respects the HTML DTD).
For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the no-quirks mode matching this DOCTYPE for reading the document. If a user agent doesn’t recognize a correct DOCTYPE, it will trigger the quirks mode.
The DOCTYPE declaration for the HTML5 standards is <!DOCTYPE html>.

References

How do you serve a page with content in multiple languages?

The question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the Accept-Language header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the lang attribute in the <html> tag, such as <html lang=”en”>…</html>.
In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.

References

What kind of things must you be wary of when designing or developing for multilingual sites?

  • Use lang attribute in your HTML.
  • Directing users to their native language – Allow a user to change his country/language easily without hassle.
  • Text in images is not a scalable approach – Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to translate image text, each string of text will need to have a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.
  • Restrictive words/sentence length – Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It’s best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments.
  • Be mindful of how colors are perceived – Colors are perceived differently across languages and cultures. The design should use color appropriately.
  • Formatting dates and currencies – Calendar dates are sometimes presented in different ways. Eg. “May 31, 2012” in the U.S. vs. “31 May 2012” in parts of Europe.
  • Do not concatenate translated strings – Do not do anything like “The date today is ” + date. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: I will travel on {% date %} and {% date %} 我会出发. Note that the position of the variable is different due to grammar rules of the language.
  • Language reading direction – In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
References

What are data- attributes good for?

Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These days, using data- attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.

References

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

  • Semantics – Allowing you to describe more precisely what your content is.
  • Connectivity – Allowing you to communicate with the server in new and innovative ways.
  • Offline and storage – Allowing webpages to store data on the client-side locally and operate offline more efficiently.
  • Multimedia – Making video and audio first-class citizens in the Open Web.
  • 2D/3D graphics and effects – Allowing a much more diverse range of presentation options.
  • Performance and integration – Providing greater speed optimization and better usage of computer hardware.
  • Device access – Allowing for the usage of various input and output devices.
  • Styling – Letting authors write more sophisticated themes.
References

Describe the difference between <script>, <script async> and <script defer>.

  • <script> – HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
  • <script async> – The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use async when the script is independent of any other scripts on the page, for example, analytics.
  • <script defer> – The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing. There’s not much difference in putting a normal <script> at the end of <body>. A deferred script must not contain document.write.

Note: The async and defer attrib­utes are ignored for scripts that have no src attribute

References

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?

Placing <link>s in the <head>
Putting <link>s in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick “first meaningful paint” timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which can shows a webpage with no styling applied.
Placing <script>s just before </body>
<script>s block HTML parsing while they are being downloaded and executed. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
An exception for positioning of <script>s at the bottom is when your script contains document.write(), but these days it’s not a good practice to use document.write(). Also, placing <script>s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw and error and halt the entire script. If you need to put <script> in the <head>, use the defer attribute, which will achieve the same effect of downloading and running the script only after the HTML is parsed.

References

What is progressive rendering?

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
Examples of such techniques:

  • Lazy loading of images – Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
  • Prioritizing visible content (or above-the-fold rendering) – Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.
  • Async HTML fragments – Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found here.
References

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

You would use the srcset attribute when you want to serve different images to users depending on their device display width – serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: <img srcset=”small.jpg 500w, medium.jpg 1000w, large.jpg 2000w” src=”…” alt=””> tells the browser to display the small, medium or large .jpg graphic depending on the client’s resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

If the client’s resolution is 1x, 1.5625 is the closest, and 500w corresponding to small.jpg will be selected by the browser.
If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
srcsets solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don’t need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.

References

Have you used different HTML templating languages before?

Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.

Responses

Your email address will not be published. Required fields are marked *

New Report

Close