Header Ads Widget

Important HTML interview questions

Rajeev Sharma 00:51
HTML advance concepts

HTML is Hypertext Markup Language. it is the code that is used to structure a web page and its content. HTML has predefined set of elmemts like- DIV, P, SPAN, H1 till H6, A, UL, FORM Elements etc. We use CSS rules along with HTML to design the page layout.

important List of HTML interview Questions

  1. What is HTML and what is HTML page hierarchy?
  2. What is doctype in HTML? what if you do not specify doctype on the page?
  3. What are meta tags, why do we use them? Give an example.
  4. How does DOM created and rendered in browser?
  5. Is CSS render blocking, does it affects the web page performance?
  6. What is render blocking, how can we avoid it?
  7. Where to use <script> in html document?
  8. What is async and defer?
  9. What are block and inline elements in html?
  10. What happen behind the scene when you type a URL in browser and enter?
  11. What is viewport, why do we use viewport?
  12. What are new feature in html5?
  13. What are new semantics in html, why/when should you use them?
  14. What is canvas?
  15. What is HTML5 storage, difference between localStorage and sessionStorage?
  16. What is difference between web storage and cookie?
  17. How to implement caching in html5?

1. What is HTML and what is HTML page hierarchy?

HTML stands for hypertext mark-up language. It is used to describe the structure of the webpage. HTML has predefined set of elements which tells the browser- how to display them on the page. 

 <html>
  <head>
    <title>page title</title>
    <scripts />
  </head>
  <body>
      //body of the page
  </body>
 </html>

2. What is doctype in HTML? what if you do not specify doctype on the page?

<!DOCTYPE> declaration is an instruction to the browser about the type of markup language used for the current page. In simple world it tells the browser that this current html document is of this type.
For Example- <!DOCTYPE html> this indicates that the html page is HTML5 type.

3. What are meta tags, why do we use them? Give an example.

Meta tags provide information about the HTML document. Metadata will not be displayed on the page, but it will be machine parsable. Meta elements are typically used for description, keywords, author of the document etc 

  <meta charset="UTF-8">
  <meta name="description" content="HTML important concepts">
  <meta name="keywords" content="HTML, html concepts">
  <meta name="author" content="Author name">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

4. How does DOM created and rendered in browser?

Parsing HTML involves 5 Steps:

  1. Reading Bytes
  2. Converting Bytes to characters
  3. Converting characters to tokens
  4. Converting tokens to nodes
  5. Converting nodes to DOM (Document Object Model)

Parsing CSS involves 5 steps(it also follow same steps as DOM creation)

  1. Reading Bytes
  2. Converting Bytes to characters
  3. Converting characters to tokens
  4. Converting tokens to nodes
  5. Converting nodes to CSSOM (Cascade StyleSheet Object Model)

HTML markup is transferred into DOM and CSS markup is transferred into a CSSOM. DOM and CSSOM both are independent data structure. DOM and CSSOM are combined into a render tree. Render tree is then used to compute the layout of each node (each visible element). Once layout process is done, it is served as input to paint process. Paint process finally renders the pixels to the screen. It is very important to optimise all these steps to achieve optimal rendering performance of webpage.

5. Is CSS render blocking? does it affects the web page performance?

CSS is treated as render blocking resource. When CSS is loaded to the browser CSSOM is created. CSSOM is further used to create render tree which further used to create layout and layout is used in painting of screen (painting means- rendering pixels to screen). It means browser will not render any processed content until the CSSOM is created. 

  <link href="print.css" rel="stylesheet" media="print">
  <link href="query.css" rel="stylesheet" media="(min-width: 40em)">

When we provide type to the link tag, we tell the browser that what kind of media resource it is. If we see the above example it is clear that print.css is only required when we are printing the page, and query.css is only required when we viewport min-width is 40em. Unless these criteria satisfy we do not need to block the browser from rendering the page. However if we remove media type from these link tags then it will become render blocking CSS resource, because browser will treat it as important CSS rules to construct render tree and wait to load.

Conclusion: CSS is a render blocking resource hence it is important that it is available to browser ASAP to optimise first render of page.

6. What is render blocking, how can we avoid it?

if browser hold the initial rendering of the page because there some dependency to create DOM, CSSOM then it is called render blocking of page. CSS and Scripts both can block the initial rendering of page.

When browser load HTML page and if it encounter any resource like external CSS or script, it stop rendering of the DOM and start loading the Script files. This is called render blocking, because HTML elements are not rendered Until it finishes the load. Therefor it is necessary to keep the CSS file lean so that it load fast. Also use proper media type for CSS so that it unblock rendering. It is better to keep any script at the end of the body right before </body> tag. This way you will make sure that browser does not hold initial render of the page. Otherwise user will see a blank page initially which is not good. It is better to read the article mentioned above to understand it. Sometimes interviewer dive deep into this question and ask- How can you enhance/optimise your page load time? At that time can include this to your answer.

7. Where to use <script> in html document?

Any script should be used within <head> tag, however it affect the page load time. So, it is good to include any script just before end of the </body> tag. Here is a detailed article to read. It gives complete detail where to use script in page.

whenever HTML parser encounters a script tag, DOM construction is paused and control is given to JavaScript engine. After JavaScript finishes it execution, HTML parser resumes the DOM construction work from where it left.

8. What is async and defer, what is difference between them?

By default, JavaScript is a parser blocking. When browser encounters script tag, HTML parser is paused (DOM construction is paused) until script finish its execution. This can significantly reduce the performance of the page.

When a script is async it is loaded while html is being parsed, it happens in parallel. Once it is loaded html parsing is paused and script start its execution. Once script execution is over html parsing resumes.

When a script is defer it is loaded while html is being parsed (same as sync), however html parsing is not paused. Once html parsing is over, the script start its execution.

async does not guarantee its execution sequence because it depends when a script loaded. Async scripts start its execution as soon as the script is loaded, However defer scripts wait until html parsing is over then it executes in the order scrips were encountered in the document.

Conclusion: - Using async or defer can significantly increase the performance of the page.

9. What are block and inline elements in html?

Block HTML element- A block HTML element take full with of its parent element. DIV, P, H1 till H6 are block elements.

Inline HTML element- A inline HTML element doesn't take full with of its parent element. It takes the with of its content. SPAN, A, etc are inline elements.

NOTE- By using display property of CSS we can change any element to block or inline.

10. What happen behind the scene when you type a URL in browser and enter?

Below are the things that happens step by step when we hit a web urt-

  1. You enter a URL into a web browser
  2. The browser looks up the IP address for the domain name via DNS
  3. The browser sends a HTTP request to the server
  4. The server sends back a HTTP response
  5. The browser begins rendering the HTML
  6. The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
  7. Once the page is loaded, the browser sends further async requests as needed.

11. What is viewport, why do we use viewport?

The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content. when we see a webpage(If it is not responsive) in mobile it will look very small, because when rendering a wider content to a narrow screen the viewport/virtual screen will render the content and shrink it down to fit to the screen. To adjust it according to mobile or tablet screen we mention view port. 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" >

12. What are new feature in html5?

Below are the new things included in HTMTL 5

  • New Semantic elements (header, footer, section, article)
  • Web form 2.0 having new input types (email, number, date, range)
  • Web Storage (sessionStorage, localStorage)
  • Canvas(for drawing graphics ex:- square, circle, rectangle etc.)
  • Media support (Audio, Video tags)
  • Geolocation
  • The cache manifest in HTML5

13. What are new semantics in html, why/when should you use them?

HTML5 came up with new semantics- <header>, <footer>, <section>, <article>, <nav>, <aside>

These new semantics clearly describes its meaning to both the browser and the developer.

14. What is canvas?

The HTML <canvas> element is used to draw graphics on a web page like- square, circle, rectangle etc.

15. What is HTML5 storage, difference between localStorage and sessionStorage?

HTML5 or web storage us used to store data locally within the user’s browser. The storage limit is 5 MB.
localStrage: store Data with no expiration date.
sessionStrage: store Data for one session.

16. What is difference between web storage and cookie?

Cookies data can be read by server, however server can’t access local/session storage data, we need to send it explicitly. Cookie has limit of 4096 bytes however web storage has limit of 5 MB.

Web Storage (localStorage/sessionStorage) is accessible through JavaScript on the same domain. This means that any JavaScript running on your site will have access to web storage. Because of this, it can be vulnerable to cross-site scripting (XSS) attacks. XSS in a nutshell is a type of vulnerability where an attacker can inject JavaScript that will run on your page. Basic XSS attacks attempt to inject JavaScript through form inputs, where the attacker puts alert('You are Hacked'); into a form to see if it is run by the browser and can be viewed by other users.

17. How to implement caching in html5?

we can use a manifest file (a text file) to tell browser what to cache (like: html, css and image files), 

  <!doctype html>
  <html manifest="example.appcache">
  .....
  </html>
Example of cache manifest file
  # 2012-02-21 v1.0.0
  /theme.css
  /logo.gif
  /main.js

  NETWORK:
  login.asp

  FALLBACK:
  /html/ /offline.html
Tags:

Post a Comment

1 Comments