10 Common HTML and CSS Interview Questions and Answers

1. What are semantic and empty elements in HTML?

Semantic elements in HTML are curricula part of browsers to understand and maintain the structure of a web page. Using these elements, developers can optimize a web page and improve its SEO. Moreover, developers can clean their HTML codes to improve readability. Some of the important semantic elements are header, footer, article, section, nav, aside and main.
When there is no content between an opening and a closing tag, the tag is called an empty element. It is also called a void element. With the help of this tag, You can control the layout of a web page without using unnecessary HTML tags. You can embed an image with img tag or if you want to break lines, you can use
tag. Other necessary empty tags are hr, meta, link, and source.

2. Explain the differences between div and span tags in HTML.

div tag is a block-level element that is used to create blocks and layouts in content. This tag is used to design the structure of a web page. Apart from that, this tag contains paragraphs and images. The div tag is also used in CSS styling.
span is a crucial inline element. Unlike div, You can use this tag in the middle of any line and write other elements beside them. This tag is used alongside CSS and you can change styles and fonts of any words and phrases using span.

3. What are the differences between GET and POST methods in the HTML Form?

Both GET and POST methods are used to send data to the server. GET method sends data along with the URL and other query parameters. URL length restricts the request to 2048 characters. Browser and server cache the repetitive requests in this method. There are ample security concerns in the GET method.
In the POST method, when you send data like login credentials as a part of the HTTP request, they are delivered safely. The data delivery is more secure in this method than that of the GET method. As it produces unique URLs on every submission, you can not bookmark it.

4. What is local and session storage?

Local storage is when a website domain stores data in the form of a key-value format in the user-side browser. Closing or reopening the browser does not affect data stored in the local storage. Unlike local storage, the data is stored for a limited period in session storage. If you close the browser or window, the stored data will be cleared,

5. What are the purposes of Z-index property in CSS?

You can control the overlapping elements of a web page using Z-index. You can render an element with a higher Z-value. For example, if an element’s Z-index value is 20, it will be displayed faster than an element with Z-index value 5.

6. How do you optimize the loading of CSS titles in the browser?

• Insert all the essential style elements in the head section.

• Minify and compress CSS files by removing unnecessary whitespaces and characters.

• Split larger CSS files into small ones. Load only necessary CSS files and lazy-load non-critical files.

7. What is a box model in CSS?

A box model is an important concept of CSS. It is usually used in designing the structure and layout of a web page. The important components of a box model are content, padding, border, and margin. You can set an area of a web page by determining the height and width of that web page. In this mode, you can also control the border, padding, margin, and spacing of a web page. For example, In this simple mpg to mpl converter, you can see how padding and spacing are used in a perfect manner.

8. What are the pseudo-classes and pseudo-elements in CSS?

A Pseudo class is added to the selector to specify a certain element in CSS. The structure of writing a pseudo-class is that you need to put a colon (:) between the pseudo-class name and the selector. The important pseudo-classes are “:hover”, “:active”, “:visited”, “:focus” and “:first-child”.
With the help of pseudo-elements, you can design a specific part of a larger element. The good part is you do not need to use any additional markup here.

9. Explain CSS sprites and their purposes.

CSS sprites are essential to improve website performance. Using that, you can combine all the images you used on your website into a single image file. It improves a website’s loading speed.

10. Explain media queries in CSS

Media queries are an essential element in CSS. Developers use this powerful feature to optimize a website based on various platforms like PC, tablets, and smartphones where the website will be displayed. You can create seamless navigation on a website using media queries.