HTML basic interview questions for freshers

HTML Interview Questions With Answers

1) What is HTML?

Ans)HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web.


2) What are Tags?

Ans) HTML tags are composed of three things: opening tag, content and ending tag. Some tags are unclosed tags. HTML documents are made of two things:

  • content, and
  • tags
  • Content is placed between tags to display data on the web page.


    3) Do all HTML tags have end tag?

    Ans) No. There are some HTML tags that don't need a closing tag.For example:

    <image> tag, <br> tag.

    4) What are some common lists that are used when designing a page?

    Ans) There are many common lists which are used to design a page. You can choose any or a combination of the following list types:

  • Ordered list
  • Unordered list
  • Menu list
  • Directory list
  • Definition list

  • 5) What is the difference between HTML elements and tags?

    Ans) HTML elements communicate to the browser to render text. When the elements are surrounded by brackets <>, they form HTML tags. Most of the time, tags come in pair and surround content.


    6) What is semantic HTML?

    Semantic <a href="http://www.opentechgates.com/interview_questions/htmlq_a.php">HTML</a> is a coding style. It is the use of <a href="http://www.opentechgates.com/interview_questions/htmlq_a.php">HTML</a> markup to reinforce the semantics or meaning of the content. For example: In semantic <a href="http://www.opentechgates.com/interview_questions/htmlq_a.php">HTML</a> <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.


    7) What is image map?

    Ans) Image map facilitates you link many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.


    8) How to insert a copyright symbol on a browser page?

    Ans) can insert a copyright symbol by using © or © in an HTML file.


    9)How do you keep list elements straight in an HTML file?

    Ans)You can keep the list elements straight by using indents.


    10)Does a hyperlink only apply to text?

    Ans) No, you can use hyperlinks on text and images both.


    11) Do all HTML tags come in a pair?

    Ans) No, there are single HTML tags that do not need a closing tag. Examples are the tag and
    tags.


    12) How do you insert a comment in HTML?

    Comments in HTML begins with “”. For example:


    13) Do all character entities display properly on all systems?

    No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.


    14) What is the advantage of collapsing white space?

    Ans) White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.


    15) How do you create links to sections within the same page?

    Ans) Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.</p>

    16) Is there any way to keep list elements straight in an HTML file?

    Ans) Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the website.


    17) What is the use of alternative text in image mapping?

    Ans) When you use image maps, it can easily become confusing and difficult to determine which hotspots correspond to which links. Using alternative text lets, you put a descriptive text on each hotspot link.


    18) Do older HTML files work on newer browsers?

    Ans) Yes, older HTML files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.


    19) Does a hyperlink apply to text only?

    Ans) No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a href=” “>…</a> tag combinations.

    20) If the user’s operating system does not support the needed character, how can the symbol be represented?

    Ans) In cases wherein their operating system does not support a particular character, it is still possible to display that character by showing it as an image instead.


    21) How do you change the number type in the middle of a list?

    Ans) The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.


    22) State bullet types available in HTML

    Ans) With ordered lists, you can select to use some different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.


    23) How do you create multicolored text in a webpage?

    Ans) To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.

    24) Why are there both numerical and named character entity values?

    Ans) The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.


    25) Write an HTML table tag sequence that outputs the following:

    Ans) 50 pcs 100 500 10 pcs 5 50

    <table> <tr> <td>50 pcs</td> <td>100</td> <td>500</td> </tr> <tr> <td>10 pcs</td> <td>5</td> <td>50</td> </tr> </table>


    26) What is the advantage of grouping several checkboxes together?

    Ans) Applets are small programs that can be embedded within web pages to perform some specific functionality, such as computations, animations, and information processing. Applets are written using the Java language.


    27) What will happen if you overlap sets of tags?

    Ans) If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem when the text does not display properly on the browser screen.


    28) What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the HTML file?

    Ans) If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear. Some tags, especially tags without a closing tag like the tag, do not require any text between them.


    29) Is it possible to set specific colors for table borders?

    Ans) You can specify a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.


    30) How do you create a link that will connect to another web page when clicked?

    Ans) To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is: text Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.


    31) What other ways can be used to align images and wrap text?

    Ans) Tables can be used to position text and images. Another useful way to wrap text around an image is to use style sheets.


    32) Can a single text link point to two different web pages?

    Ans) No. The <a> tag can accept only a single href attribute, and it can point to only a single web page.

    33) What is the difference between the directory and menu lists and the unordered list?

    Ans) The key difference is that the directory and menu lists do not include attributes for changing the bullet style.


    34) Can you change the color of bullets?

    Ans) The bullet color is always the same as that of the first character in the list item. If you surround the <li> and the first character with a set of <font> tags with the color attribute set, the bullet color, and the first character will be a different color from the text.

    35) What are the limits of the text field size?

    Ans) The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. If the size attribute is set to 0, the size will be set to the default size of 13 characters.


    36) Do <th> tags always need to come at the start of a row or column?

    Ans) Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.

    37) What is the relationship between the border and rule attributes?

    Ans) Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if the rules attribute is added to the <table> tag.

    38) What is a marquee?

    Ans)A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

    39) How do you create text on a webpage that will allow you to send an email when clicked?

    Ans) To change text into a clickable link to send email, use the mailto command within the href tag. The format is as follows: XHTML <A HREF=”mailto:youremailaddress”>text to be clicked</A> <A HREF=”mailto:youremailaddress”>text to be clicked</A>

    40)Are <br> tags the only way to separate sections of text?

    Ans) No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.

    41) How are active links different from normal links?

    Ans) The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.


    42)Do style sheets limit the number of new style definitions that can be included within the brackets?

    Ans) Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol.


    43) Can I specify fractional weight values such as 670 or 973 for font weight?

    Ans) Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes.


    44) Can several selectors with class names be grouped together?

    Ans) You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names.


    45) What is the hierarchy that is being followed when it comes to style sheets?

    Ans) If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.


    46)What happens if you open the external CSS file in a browser?

    Ans) When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using tag within another HTML document.


    47)What happens if the list-style-type property is used on a non-list element like a paragraph?

    Ans) If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph.


    48) When is it appropriate to use frames?

    Ans) Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.


    49 )What is the relationship between SGML,HTML , HTML and HTML?

    Ans) SGML (Standard generalized markup language) is a standard which tells how to specify document markup. It’s only a Meta language which describes how a document markup should be. HTML is a markup language which is described using SGML. So by SGML they created DTD which the HTML refers and needs to adhere to the same. So you will always find “DOCTYPE” attribute at the top of HTML page which defines which DTD is used for parsing purpose.


    50) If I do not put <! DOCTYPE html> will HTML 5 work?

    Ans) No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function properly.


    51) Which browsers support HTML 5?

    Ans)Almost all browsers i.e. Safari, Chrome, Firefox, Opera, Internet Explorer support HTML 5.


    52) What is datalist in HTML 5?

    Ans) Datalist element in HTML 5 helps to provide autocomplete feature in a textbox


    53)What happens if the number of values in the rows or cols attribute doesn’t add up to 100 percent?

    Ans) The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first.


    54) Name two new tags included in the HTML 5?

    Ans)<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items.


    55) Do you know which are two semantic tags are included in HTML5 version?

    Ans) The <article> and <section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole.


    56) What is <figure> in HTML5?

    Ans)This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference the main flow of the document.


    57)What is the use of Canvas element?

    Ans) The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code.


    58) What are the new FORM elements which are available in HTML5?

    Ans)The new Form elements in HTML5 offers much better functionality than the earlier versions.

    The tags given provided to carry out these functions are: 1) <datalist> – This tag is use to specify a list of options for input controls. 2) <keygen> – This tag represents a key-pair generator field. 3) <output> – It represents the result of any scripting calculation.


    59) Tell me two benefits of HTML5 Web Storage

    Ans) Two main benefits of HTML5 Web Storage:

  • It can store up to 10 MB data which is certainly more than what cookies have.
  • Web storage data cannot be transferred with the HTML request. It helps to increase the performance of the application.

  • 60) What are two types of Web Storage in HTML5?

    Ans) The CSS box model is used to define the design and layout of elements of CSS.

    Two storage types of HTML5 are:

    Session Storage:

  • It stores data of current session only. It means that the data stored in session storage clear automatically when the browser is closed.
  • Local Storage:

  • Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.

  • 61) What is the Application Cache in HTML5 and why it is used?

    Ans) The Application Cache concept means that a web application is cached. It can be accessible without the need for internet connection.

    Some advantages of Application Cache:

  • Offline browsing – Web users can also use the application when they are offline.
  • Speed – Cached resources load quicker
  • Reduce the server load – The web browser will only download updated resources from the server.

  • 62) Explain five new input types provided by HTML5 for forms?

    Ans) Following are the important, new data types offered by HTML5:

  • Date: It allows the user to select a date.
  • datetime-local: This input type allows the user to select a date and time without time zone.
  • datetime: This input type allows the user to select a date and time with time zone.
  • month: It enables the user to select a month and year
  • email: These input fields used to contain an e-mail address.

  • 63) What is local storage concept in HTML 5?

    Ans) Many times we would like to store information about the user locally in the computer. For example let’s say user has half-filled a long form and suddenly the internet connection breaks off. So the user would like you to store this information locally and when the internet comes back.He would like to get that information and send it to the server for storage. Modern browsers have storage called as “Local storage” in which you can store this information.


    64) What is WebSQL?

    Ans) WebSQL is a structured relational database at the client browser side. It’s a local RDBMS inside the browser on which you can fire SQL queries.


    65) Is WebSQL a part of HTML 5 specification?

    Ans) No, many people label it as <a href="http://www.opentechgates.com/">HTML5</a> but it’s not part of HTML 5 specification. The specification is based around SQLite. </p> <br/> <p><b>66) What is fallback in Application cache?</b></p> <p> <xmp><a name="WhatisfallbackinApplicati>FALLBACK: /home/ /homeoffline.html </a></pre> <h2><a name=" whatisfallbackinapplicati=""></a>


    67) What is the purpose of url input control in Web form 2.0?

    Ans)This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format..


    68)What is the purpose of 'output' tag in HTML5?

    Ans) HTML5 introduced a new element <output> which is used to represent the result of different types of output, such as output written by a script.


    69) What is the purpose of 'placeholder' attribute in HTML5?

    Ans)HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.


    70) What is the purpose of 'autofocus' attribute in HTML5?

    Ans) This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.


    71) What is the purpose of 'required' attribute in HTML5?

    Ans) HTML5 introduced a new attribute called required which would insist to have a value in an input control..


    72) Can you use SVG tags directly in HTML5 without any plugin?

    Ans) Yes! HTML5 allows embeding SVG directly using <svg>...</svg> tag.


    73)Can you use MathML tags directly in HTML5 without any plugin?

    Ans) Yes! The <a href="http://www.opentechgates.com/">HTML5</a> syntax of <a href="http://www.opentechgates.com/">HTML5</a> allows for MathML elements to be used inside a document using <math>...</math> tags.


    74)What are the drawbacks of cookies?

    Ans) Cookies have following drawbacks−

  • Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
  • Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
  • Cookies are limited to about 4 KB of data . Not enough to store required data.

  • 75) What do you mean by session storage in HTML5?

    Ans) HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window i.e. session and as soon as you close the window, session would be lost.


    76)When a session storage data gets deleted?

    Ans) The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.


    77) When a local storage data gets deleted?

    Ans) Local storage data has no time limit. To clear a local storage setting you would need to call localStorage.remove('key'); where 'key' is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.


    78)What is Server Side Events in HTML5?

    Ans) Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continously from your web server to the visitor's browser.

    The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.

    Server-sent events standardizes how we stream data from the server to the client.


    79) How to utilize a server-sent event in HTML5?

    Ans) To use Server-Sent Events in a web application, you would need to add an <eventsource> element to the document. The src attribute of <eventsource> element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events. The URL would point to a PHP, PERL or any Python script which would take care of sending event data consistently.

    80) What are the steps of server side scripts for SSE?

    Ans) server side script should send Content-type header specifying the type text/event-stream as follows− print "Content-Type: text/event-stream\n\n"; After setting Content-Type, server side script would send an Event − tag followed by event name. Following example would send Server-Time as event name terminated by a new line character. print "Event: server-time\n"; Final step is to send event data using Data − tag which would be followed by integer of string value terminated by a new line character as follows− $time = localtime(); print "Data: $time\n";


    81) What are web sockets?

    Ans) Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers. Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler. Following is the API which creates a new WebSocket object. var Socket = new WebSocket(url, [protocal] ); Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.


    82) What is the purpose of Socket.readyState atribute of WebSocket?

    Ans) The readonly attribute readyState represents the state of the connection. It can have the following values:

  • A value of 0 indicates that the connection has not yet been established.
  • A value of 1 indicates that the connection is established and communication is possible.
  • A value of 2 indicates that the connection is going through the closing handshake.
  • A value of 3 indicates that the connection has been closed or could not be opened.

  • 83) What is the purpose of Socket.bufferedAmount atribute of WebSocket?

    Ans) The readonly attribute bufferedAmount represents the number of bytes of UTF-8 text that have been queued using send() method.


    84)What is the purpose of 'audio' tag in HTML5?

    Ans) <a href="http://www.opentechgates.com/">HTML5</a> supports <audio> tag which is used to embed sound content in an <a href="http://www.opentechgates.com/">HTML5</a> or XHTML document. The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. You can use <source> tag to 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.


    85) What is the purpose of 'video' tag in HTML5?

    Ans) HTML5 supports <video> tag which is used to embed a video file in an HTML or XHTML document.The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are− Ogg − Ogg files with Thedora video codec and Vorbis audio codec. mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec. You can use <source> tag to 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.


    86) What is Geolocation API in HTML?

    Ans) <a href="http://www.opentechgates.com/">HTML5</a> Geolocation API lets you share your location with your favorite web sites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map. Today most of the browsers and mobile devices support Geolocation API. The geolocation APIs work with a new property of the global navigator object ie. Geolocation object which can be created as follows: var geolocation = navigator.geolocation; The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.


    87) What is purpose of getCurrentPosition() method of geolocation object of HTML5?

    Ans) This method retrieves the current geographic location of the user.


    88) What is purpose of watchPosition() method of geolocation object of HTML5?

    Ans) This method retrieves periodic updates about the current geographic location of the device.


    89) What is purpose of clearPosition() method of geolocation object of HTML5?

    Ans) This method cancels an ongoing watchPosition call.


    90) What are Web Workers?

    Ans) Web Workers do all the computationally expensive tasks without interrupting the user interface and typically run on separate threads.

    Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.


    91)What are the extension supported by HTML?

    Ans) HTML supports both .htm and .html extension.


    92) How to open a link in new tab or window?

    Ans) To open a link in new tab or window, we have to use the following html code: <a href=”http://www.E-techconnectivity.com” target=”_blank”>Welcome to FreshersEmploy.com!</a>


    93) What are the different types of Headings supported by HTML?

    Ans) <a href="http://www.opentechgates.com/">HTML</a> headings are important to highlight the contents of the documents. HTML supports 6 heading starting from <h1> to <h6>.


    94) Explain HTML blocks?

    Ans) HTML blocks can be defined by HTML tags like <span> and <div>. What is the difference between <div> and <span> elements? <div> tags are used to define section in document block wise whereas <span> tag is used to define section in documents inline.


    95) What is the difference between get and post method?

    Ans) HTML methods sends request using get an post method. GET post request data from the server and POST is used to submit data to the server.

    96) What is iframes? Why is recommended to avoid iframes?

    Ans)<Iframe> tags are used to embedded documents within current HTML document. HTML 5 does not support <iframe> any more. So it is recommend not ti use iframe in HTML any more.


    97) How to redirect using HTML?

    Ans) Using <a href="http://www.opentechgates.com/">HTML</a>, we can redirect users to different webpage. <meta http-equiv="refresh" content="0; url=http://www.e-techconnectivity.com" /> <meta http-equiv="refresh" content="0; url=http://www.e-techconnectivity.com" />


    98) How to create emails links?

    Ans) To <a href="http://www.opentechgates.com/">HTML</a> create email links using <a href> <a href="mailto:youremail@domain.com">Send Email</a> <a href="mailto:youremail@domain.com">Send Email</a>


    99)Do all HTML tags come in pair?

    Ans) No, not all HTMLS tags come in pair. For e.g. <img>, <br>


    100) What is the advantage of collapsing white space?

    Ans) 1.The browser collapses the multiple white spaces into a single white space in HTML.
    2.This allows the developers to arrange the HTML code in a well organized and legible format.