Common HTML and CSS Interview-Questions with Answer

Here have the most commonly asked HTML5 And CSS interview questions and answers.

1. Why do we use HTML5?

Ans: HTML means hypertext markup language. It helps us to create an easy graphical web page audio video image animation and also link different pages. some point I mention

  • Better interactions.
  • Fresh code.
  • Cross-browser compatibility.
  • Smarter storage.

2. How do you open a popup window using HTML 5?

Ans: HTML5 version introduces a new element <dialog> and it’s made easy to create a popup in a single line. This element makes it natural to create popup dialogs and modals on a web page.

3. How do you pick a date in HTML?

Ans: The <input type="date"/>defines a date picker.

4. What is the difference between HTML elements and tags?

Ans: HTML tags-only opening and closing tags without content. other side elements hold content inside the tag.

  • Tag <p></p>
  • Elements <p>Hello world</p>

5. When you use <datalist> elements ?

Ans: datalistelements used when we need to get pre-defined value from the user using a dropdown lie. like, select a city name.

6. What is web storage in HTML5?

Ans: Web storage helps us to store data locally indoors the user’s browser. In the HTML older version we stored our application data in cookies. but cookies have some limitations.that’s time come web storage and web storage more secure also raise page performance.

7. What do you use? when do you need to write a copyright sign In footer?

Ans: I’m using HTML symbols &copy;

8. How to display mathematical expression use HTML?

Ans: HTML MathML (Mathematical Markup Language) that used to show the scientific and mathematical expression on the web.

9. Why doctype is important on the web page?

Ans: Doctype informs your browser what actually HTML document version you using and also how it’s rendered.

10. What is Microdata and why it needs it in HTML?

Ans: Microdata HTML specification used to nest metadata within existing content on web pages.it helps to Search engines extract the microdata from a web page to provide a good browsing experience.

11.How many text formating elements in HTML5?

Ans: ref: W3schools

  • <strong> - Important text
  • <b> - Bold text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

12. What type of Graphics supports HTML5?

Ans: HTML5 supports two types of graphics i.e. Canvas and SVG.

13. How many tags you don’t need to use after HTML5 release?

Ans: There are so many tags removed where html5 release.like

  • <canter>
  • <applet>
  • <bigcenter>

14. How do you write canvas in Html5?

Ans: HTML canvas example.

15. What the main tag migration between HTML4 to HTML5?

16. What is the purpose of the ‘section’ tag in HTML5?

Ans: The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

17. Why you use the “nav” tag instant of the list order method?

Ans: There’s nothing particularly wrong with the <ul> <li> method of coding your menus, just wrapping the elements in an <nav> element will serve to identify it as a navigation item. HTML5 introduces a new set of semantic elements.

18. What is the anchor tag in HTML?

Ans: An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link.

19. Why do you use the placeholder attribute in HTML5?

Ans: Provides a hint to the user what can be entered in the field.

20. How you focus on a specific input field in HTML5?

And: HTML5 introduced an autofocus attribute this helps us to focus on an input field when browser load.

21. How you use the SVG tag shortly without external support?

Ans: Using Directly <svg>...</svg>tag.

22. What do you know about web sockets API?

Ans: The WebSocket API makes it possible to open a two-way communication session between the client and the server.

23. What is the default size for an HTML form field (type=text)?

Ans: The default size is 20. To increase size use “size”

24. Tall me two advantages of HTML5?

Ans: Cleaner markup and local storage.

25. How longer life has local storage data?

Ans: Until the user doesn’t clean cache or clear browser data using javascript.

26. How many media elements exist in HTML5?

Ans: <audio> <video> <source> <track>

27. Which HTML element for inserting a line break?

Ans: <br>

28. What is Vibration API in HTML5?

Ans: Vibration API provide physical feedback to the user causing device shack.

29. How many storage in HTML5?

Ans: sessionStorage and localStorage

30. How do you get user geolocation in HTML?

Ans: Using HTML5 Geolocation API to get the geographical position of a user.

31. What is Web SQL?

Ans: WebSQL database defines an API for storing data in databases that can be queried using a variant of SQL.

32. What is SVG?

Ans: Scalable Vector Graphics is an Extensible Markup Language-based vector image format.

33. What are the limitations of Web Workers?

Ans: A worker can’t directly manipulate the DOM and has limited access to methods and properties of the window object.

34. What is Web Storage?

Ans: With web storage, web applications can store data locally within the user’s browser.

35. Why you used `<cite>` tag in HTML5?

Ans: HTML <cite>is used to describe a reference to a cited creative work and must include the title of that work.

36.Why you used ‘<details> tag in HTML5 ?

Ans: The <details>tag uses to providing a sort of content in hidden places. but the user can display on demand.

37. Whatever is semantic HTML?

Ans: Semantic HTML elements clearly describe it’s meaning in a human and machine-readable way.

38. Define HTML's largest heading?

Ans: <h1></h1>

39. What is Anchor tag and how can you open an URL into a new tab when clicked?

Ans: In order to open a link in a new window tab, add target=”_blank” inside the <a> tag. <a href="/about.html" target="_blank"></a>

40. What do you know about Modernizr?

Ans: Modernizr is a Javascript library that helps us to detects our HTML5 and CSS3 feature visitor's browser supports or not.

41. Why ‘lang’ attribute is important in HTML5?

Ans: The HTML lang an attribute is used to identify the language content on the web. This helps search engines return language-specific results.

42.What is HTML5?

Ans: HTML5 is a markup language used for structuring and presenting content on the World Wide Web. HTML5 was the fifth and last major version of HTML that is a World Wide Web Consortium recommendation

43. What is target _blank in a href?

Ans: A target=”_blank” Open in New Browser Tab (or Window) The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target=”_blank”, the linked document will open in a new tab or (on older browsers) a new window

44. What is the use of `<fieldset>` tag in HTML5?

Ans: The <fieldset>tag in HTML5 is used to make a group of related elements.

45. What is the difference between Progress Tag and Meter Tag?

Ans: The progress element represents the completion progress of a task. and the meter element represents a range value.

46. What is the Contenteditable Attribute in HTML5?

Ans: The contenteditable attribute specifies whether the content of an element is editable or not.

47. What is the purpose of the Battery Status API in HTML5?

Ans: Battery API, provides information about the system’s battery charge level and lets you be notified by events that are sent when the battery level or charging status changes.

ref: MDN

48. What is the purpose of Frames?

Ans: To define one particular window (frame) within a <frameset>.

49. What does HTML stand for?

Ans: HTML is the language used to create Web pages for display in Web Browsers.

50. Describe HTML.

Ans: HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display text, images and other forms of multimedia on a webpage.

51. What is the main difference between span and div?

Ans: div block label element and span inline element.

52. HTML Paragraphs are blocking label element?

Ans: Yes

53. HTML Is Case Sensitive?

Ans: No

54. How can you provide additional information about an element?

Ans: Attributes provide additional information about an element

55. Why heading important and why do you need it?

Ans: Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure.

56. `span` tag is inline elements in HTML?

Ans: Yes

57. What tag uses to make an HTML Horizontal Rules?

Ans: The <hr> tag defines a thematic break in an HTML page and is most often displayed as a horizontal rule.

58. How can you Highlight parts of a text?

Ans: The <mark>tag defines marked text.

59. How can you write a comment in HTML5?

Ans: <!-- Write comment in here -->

60. What is the meta tag? why it’s important in HTML?

Ans: Metadata is data about document information. the meta tag provides information about the HTML document. Metadata will not be displayed on the page but will be machine parsable.

ref: w3school

61. Why Meta tags are used in HTML?

Ans: Metadata is data (information) about data. Metadata will not be displayed on the page but is machine parsable.<meta> tags are typically used to specify a character set, page description, keywords, author of the document, and viewport settings.

62. Which type of video formats are supported by HTML5?

Ans: There are three supported video formats: MP4, WebM, and Ogg.

63. Is audio tag supported in HTML 5?

Ans: The HTML <audio> element is used to play an audio file on a web page.

64. How do you apply JavaScript code to an HTML web page?

Ans: In HTML, JavaScript code is inserted between <script> and </script> tags.

Common CSS Interview Question With Answer

1. How do you select a tag with an attribute?

Ans:

2. How CSS style priority works?

Ans: Frist priority inline CSS then internal CSS and finally external CSS.

3. What difference between VH and VW measurement units?

Ans: vh for viewport height and vw for viewport width.

4. Which property is used to control the image background space?

Ans: The background-position property is used to control the position of an image in the background.

5. Why CSS media queries used for?

Ans: CSS media queries improve content style based on device features like width, height, orientation, resolution, and display type.

6. What is a CSS preprocessor?

Ans: CSS Preprocessors extend the functionality of CSS by allowing great features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors.

7. What is the box model in CSS?

And: CSS box model provides a layout paradigm for HTML elements that structure a webpage.

  • border: The border enclosing the padding.
  • content: Any text or images within the box.
  • margin: The transparent area around borders.
  • padding: The transparent area inundating content.

8. What is the float in CSS?

Ans: The float property in CSS places an element on the right or left side of its container, allowing text and inline elements to wrap around it.

9. What is the hover effect in CSS?

Ans: It selects and styles when mouse over it. An :hover is used to select elements when you mouse over them.

10. What is the use of z-index in CSS?

Ans: An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements like position:absolute, position:relative, or position:fixed.

11. What is the difference between “display: none” and “visibility: hidden” in CSS?

Ans: visibility: hidden: It hides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout.display: none: It hides an element as well as doesn’t preserve the space.

12. What is the use of ! important? How we can use it?

Ans: The !important A CSS rule is used for overriding the previously assigned CSS declarations.

13.Why CSS Transitions?

Ans: CSS transitions allow you to change property values smoothly, over a given duration.

14. What does object-fit property do?

Ans: The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

15. What are gradients in CSS?

Ans: It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.

Front End Developer