Top 10 HTML , CSS interview Questions

1 . Define Semantic elements in HTML .

Ans: Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. Elements such as <header>, <footer>, and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

2. Why meta tags are used in HTML?

Ans: Meta tags in HTML are used by developers to tell the browser about the page description, author of the template, character set, keywords, and many more. Meta tags are used for search engine optimization to tell the search engine about the page content.

3 . What would happen if the HTML document does not contain <!DOCTYPE>?

Ans: It instructs the Web Browser about the version of HTML used for creating the Web page. If the developer misses declaring the DOCTYPE information in the code, then new features and tags provided by HTML5 will not be supported. Additionally, the Browser may automatically go into Quirks or Strict Mode.

4 . What is image map ?

Ans: Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to take part in an image mapping.

5 . What is the concept of application cache in HTML 5?

Ans: HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

i. Offline browsing — users can use the application when they’re offline

ii. Speed — cached resources load faster

iii. Reduced server load — the browser will only download updated/changed resources from the server

6. Differences between Local storage and Session storage?

Ans :

• In localStorage, there is no expiry date. But sessionStorage stores data for only one session.
• Data will not be deleted in the local storage though we close the window, in session storage data will be deleted by closing the window.
• In local storage, data can be shared between multiple windows of the browser. On the other hand, data is accessible only in the current window of the browser in session storage.

7. What is the difference between visibility: hidden and display: none?

Ans: The visibility:hiddenproperty means that even though the tag is not visible, it is still taking space on the web page. The tag is rendered, but invisible on the page.

On the other hand, the display:none property means that the tag will not appear on the page and there will be no space allocated for it between the other tags.

8 . What is CSS Box Model and what are its elements?

This box defines the design layout of the elements CSS. The elements are:

Margin: the topmost layer, the overall structure is shown
Border: the padding and content option with a border around it is shown. The background color affects the border.
Padding: Space is shown. The background color affects the border.
Content: Actual content is shown.

9. What are Pseudo-elements?

Ans: Pseudo-elements are used to add special effects to some selectors. CSS is used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

10 . How can the dimension be defined of an element?

Ans: Dimension properties can be defined by:

• Height
• Max-height
• Max-width
• Min-height
• Min-width
• Width