Basic HTML and CSS Interview Questions with Answers

Introduction 

HTML is the abbreviation for HyperText Markup Language. HTML is the standard markup language to design the documents displayed on a web page. Different technologies like CSS (Cascading Style Sheets) and scripting languages such as Java can assist HTML. With the increasing use of HTML and CSS in the It industry, the HTML CSS Interview questions are becoming common. 

Web browsers receive different HTML documents from the web servers or the local storage. Further, the web browser renders the documents on multimedia pages. HTML is used to describe the structure of the page systematically.

HTML was developed by physicist Tim Berners Lee in 1980. Later, Lee wrote the browser and server software in 1990. The World Wide Web is based on HTML using the HyperText Transfer Protocol (HTTP). 

The use of HTML is extensive in designing the web. All the browsing runs on HTML. It is a basic and necessary thing if the IT industry is taken into account. One should know about HTML and its working. CSS is another essential component for the smooth functioning of the browsers. 

HTML and CSS Questions are necessary for the interviews. Some of the HTML CSS interview Questions are present in this article with their answers. If one goes through them thoroughly, one can crack the interview with a good HTML interview experience. In this article, you can find:

• Some general questions related to HTML and CSS 
• HTML interview questions
• CSS interview questions

Some general questions related to HTML and CSS 

There are some general things about web designing and functioning. All the questions regarding the basic concepts are present below. It is necessary to go through the basic ideas for the minor problems to be fixed readily. Companies look for trained individuals. So, one must know about these things to have a good HTML CSS Interview experience.

1. What is the DOM; tell us about the working of the DOM?

DOM stands for Document Object Model. It is a cross-platform API that handles HTML documents as a tree consisting of the nodes. The nodes are element or text nodes that can be manipulated programmatically. Any visible changes made to these nodes are reflected live in the document. The changes made t9 the DOM nodes include changes in their styles, content, placement, etc. 

• The DOM is designed to work independently of any other programming language. The structural representation of the document is available from a single, consistent API.
• The common functions for selecting DOM nodes are document.getElementByld(), document,querySelector().
• If the inner HTML property is set to a new value, the string runs through the HTML Parser. It offers an easy way to append dynamic HTML content to a node.

2. List the differences between standards mode and quirk mode?

Layout emulates non-standard behaviour in Navigator 4 and Internet Explorer 5 in Quirk mode. The websites that were developed before the widespread adoption of the web standards specifically require this mode. 

The behaviour is described by the HTML and CSS specifications in the Standards mode.

The browsers use a at the beginning of the document to determine whether the HTML document is in the Standard mode or Quirk mode.

3. Can you tell us how absolute, relative, fixed, static, and sticky positions work?

The different  positioning of the elements are classified as follows:

• The absolute position places the element at the exact location where you want to place it. This position is set relative to the element’s parent. If no parent is available, then the relative place to the page itself.
• Relative position signifies “relative to itself.” If the relative position is set on an element and no other positioning attributes, there will be no effects on its positioning. The s-element can be used, and the scope of absolutely placed child elements is limited. 
• The fixed element is positioned concerning the viewport window or the browser window itself. The viewpoint does not change on scrolling retaining the fixed element in the same place. 
• Static positioning is the default for all the page elements. Static is used to change the position of any element that got applied to an element outside your control. 
• Relative and fixed positioning hybridise to make a sticky positioning. Till a specific threshold, the element is treated to be relative. After that, it is treated as fixed.

4. Tell us something about progressive rendering?

The rendering of the data as it is downloading is known as progressive rendering. It is a feature for documents having tons of text. The scroll bar gets shorter in length as more text comes in, and the vertical size of the document increases. The downloaded text is displayed immediately. It does not rely on the closing body or HTML tag. The entire page on the server is rendered.

5. What is the difference between responsive design and adaptive design?

Various adjustments for the viewport size, resolution, usage contexts, etc., are made to improve the user experience using responsive and adaptive designs. 

Responsive design is flexible. Responsive websites use flexible grids, media queries, and responsive images. It is to create a user experience that changes and flexes based on multiple factors.

Adaptive design is like a modern definition of progressive enhancement. Adaptive design detects the device and other features. Then it provides different features and Layouts that are appropriate for the device. So instead of having one flexible design in responsive design, many options are available with the adaptive response.

6. What are the things you can do to optimise a website’s responses?

The things we can do are:

• We should concatenate and compress CSS, JavaScript, and HTML files wherever possible. 
• Configure your server to deliver a Gzip file, cache resources, etc.
• Set longer expiration dates on the HTTP headers so that you need not change them frequently.
• Compress images wisely as they are among the heaviest files we share.
• We can optimise the delivery of the image content in the future.
• Consider using WebP format for sharing images in the future rather than the conventional JPEG or PNG. 
• Use CDN or other domains to host your resources and leverage domain sharing.

7. Expand the abbreviation CORS and talk about its use?

CORS stands for Cross-Origin  Resource Sharing. The browsers restrict the cross-domain HTTP requests initiated from within the scripts. CORS gives access to the web servers to control the cross-origin files. Thus, it enables the secure sharing of cross-domain data.

HTML Interview Questions 

HTML is a widely used language to create web pages. It is a thing that a candidate appearing for an HTML CSS interview should know. Many questions asked in an HTML CSS Interview are listed here. You can have a good interview experience if you go through these HTML CSS Interview questions once.

8. Can you tell us something about semantic HTML?

A Semantic HTML is a type of coding style. The use of HTML markup to reinforce the meaning or semantics of the content is called semantic HTML. The HTML tag is not used for a bold statement on semantic HTML.

9. Why is it necessary to encode a URL in HTML?

For encoding non-ASCII characters into a format that can be used over the internet, a URL is necessary. A URL is sent over the internet only by using the ASCII character set. Any characters outside the ASCII set should be converted. All non-ASCII characters are replaced by a “%” sign.

10. Tell us something about SVG?

Two-dimensional vector and vector/raster are described using HTML SVG. SVG images and their behaviours are defined in another set of files, known as XML files. So when you edit an XML file, you are editing an SVG image. Vector type diagrams like pie charts, 2-dimensional graphs in x-y coordinate systems use SVG.

11. Can you tell us about the advantage of collapsing in the white space?

A blank sequence of space characters is known as white space. It is treated as one single space character in HTML. The browser will collapse multiple spaces into one single space. It helps you to indent the text without worrying about the multiple spaces. It also enables you to organise the HTML content into a readable form.

12. Tell me about the use of alternative text in image mapping?

It becomes confusing to determine which link corresponds to which hotspot when using image mapping. You can put descriptive text over each hotspot using alternative text. It makes things simple and convenient.

13. Are there any limits to the text field size?

Thirteen characters are the default size for a text field. You can also set the text field to as low as one using the size field attributes. The browser width determines the maximum value. You can never put the text width to zero. In case if you do so, the text width will automatically be set to thirteen characters.

14. Differentiate between active links and the normal links?

The active link appears in blue. When the mouse cursor is over the active link, some browsers recognize the active link. Other browsers recognize the active link when the link has the focus. The normal link appears as normal text. This is because the mouse pointer does not move to this type of link.

15. Tell me about the application cache in HTML5 and its use?

When the web application is cached, it is known as the application cache. The application cache is accessible without an internet connection. 

Some of the advantages of application cache are:

• It is possible to browse offline. As the information is available offline, the user can browse offline.
• Speed- the speed increases as the coached content is loaded fast.
• The load on the server reduces. This is because only the updated resources are to be downloaded from the server.

16. List the differences between DIV and SPAN in HTML?

The SPAN element is in line. It is used for a small chunk of HTML inside the line, such as in a paragraph. 

A DIV or division element is a block line. It is equivalent to having a line break before and after it. It is used to group a large chunk of code.

17. List the differences in the Local Storage and Session Storage objects?

The differences between Local Storage and Session Storage objects are:

• The Local Object Stores have no expiry date and store the data indefinitely. The Session Storage objects can store the data only for a single session. 
• When the data gets stored in the Local Storage, it does not get deleted when the window closes. But, this is not true for Session Storage. The data gets deleted if the window is closed. 
• The data in the Session Storage is accessible only through the current window. While the data available in the Local Storage is accessible through multiple windows.

18. Tell the difference between HTML and XHTML?

We can differentiate HTML and XHTML based on the following features:

• HTML is a standard generalized markup language. On the other hand, XML is an application of extensive markup language.
• HTML is a static web page in comparison to XML, which is a dynamic one. 
• HTML allows the programmer to change the tags and minimize the attributes. In XHTML, the user needs to define a new tag whenever any changes are to be made. 
• Information can be displayed using HTML, whereas you can explain the content using XHTML.

19. Tell us something about the web workers?

Web workers bring multi-threading to JavaScript if it lasts long. The script that runs in the background is known as a web-worker. It runs in the other thread without needing the page to wait for it to complete. The user can interact with the page when the web-worker runs in the background. To achieve parallelism, workers use thread-like message passing.

20. Tell us about the Geolocation API used in HTML5?

The Geolocation API in HTML5 enables the users to share their physical location with the selected websites. JavaScript is capable of catching the latitude and longitude of the user. It sends the details to the backend server. It enables location-aware features like local businesses or showing their location on the map etc. Most of the apps are capable of using the Geolocation API feature today. This feature now works with a new property of the global navigator object. A geolocation object is a service object. It allows widgets to retrieve information about the user’s location from the device.

21. What is the significance of the word Markup in HTML?

Markup refers to the sequence of characters or other symbols which we insert at certain places. These are inserted in a word or text file to indicate how the file should look when it is displayed or printed. Markup describes the logical structure of the document, which are also known as tags. There is a difference between elements and tags. HTML documents contain tags but not elements. Elements get generated only after the parsing step from tags.

22. Is it possible that the HTML source is not viewable?

No method or script makes the HTML source non-viewable. The following method can be tried if you are worried about your source code:

• Create a web page in Macromedia Flash. The visitor will have to download the Macromedia Flash plug-in and would be unable to view the source code for the Flash applet. 
• Various scripts disable the right-click feature. It prevents the user from saving images or viewing the source code. 
• Several programs make the code unreadable. This will not stop someone from viewing the code but will make the understanding difficult.

The HTML CSS Interview Questions mentioned above are very important with regards to HTML. HTML is the basic language used to design different World Wide Web pages. Along with being simple, it is one of the most widely used languages. Many websites are created using HTML. With the advancing time, the use of HTML is also advancing.

If one is to appear for an interview in the IT sector, one should go through these questions. These questions help in articulating the knowledge one already has. HTML CSS Interview Questions are gaining popularity nowadays. They are asked often; one is expected to know about these things. This list of HTML CSS Interview Questions will surely help you.

CSS Interview Questions 

CSS is a style sheet language. It is used for describing the presentation of a document written in a markup language such as HTML. CSS is an essential component of the World Wide Web, after HTML and JavaScript. It helps in separating the presentation of the content, including colours, layouts, fonts, etc. This improves the user experience and presentation of any document on the internet. It is very essential to know about CSS if you are interested in work in a related field. HTML CSS Interview questions are common if you are appearing for the job interview. Below are some HTML CSS Interview questions that will help you to pass through the interview with a good interview experience.

23. How do the rules of CSS precedence/cascading work? What effect does the important directive have on the rules?

CSS style rules cascade in the order of their precedence. Firstly, Global style rules are applied to HTML, and the local style rules override them. So, for instance, the style defined in a style element overrides the style defined in the external style sheet. 

The same goes for the inline style defined in HTML. It overrides the elements described somewhere else. The way to make your CSS cascade is important, but also apply the rules you feel to be most crucial. The rules having important properties will always be applied no matter where those rules appear in a CSS document. If you want to make sure that the property is always applied, then add a !Important Property tag to it.

24. What are the different things that can be done with style sheets that can’t be done with HTML?

Many recent extensions to HTML are tentative and make crude attempts to control document layout. Style sheets go beyond the scope of every such extension. They can insert complex borders, margins, and spacing controls to most HTML elements. HTML browser extensions are used to add some properties, and style sheets further extend those capabilities. Background colours are assigned now to any HTML element and not only the BODY element.

25. Why are fixed size fonts not preferred?

Fixed-size fonts render in the devices in very few cases. Fixed-size fonts can be an issue for many users. The size with which the developer is comfortable may not be suitable for many people. Several users have vision defects that can create problems in using the application. Many people may prefer more text on the screen. What is comfortable for person A may be uncomfortable for person B. Browsers usually have a default size of the fonts. If the user is uncomfortable with the default font size, the user can change to something more preferable. So, the font size should be left alone in the majority of the document. It can be fixed in some places, such as for the copyright or something similar. 

26. List some of the benefits of CSS Sprites?

A page may have a large number of images that take a long to load. It is because each image sends a different HTTP request. Here, the concept of CSS Sprites is used. It combines various small images into one image and thus, sending one request and reducing the loading time.

When a sprite sheet comes into use in CSS, various properties get used as a background image, background position, and background size.

27. List the merits plus demerits of embedded style sheets?

The merits plus demerits of embedded style sheets are as follows:

Merits:

• Several tag types are created in a single document.
• In a complex situation, styles are applied by Selector and grouping methods. 
• The extra download is not needed.

Demerits:

• Multiple documents are not controlled together in CSS.

28. What do you understand about a CSS Selector?

CSS Selector is a string equivalent to that of an HTML element by which different declarations are made. These declarations are the links that can be referred to for linking HTML and Style Sheets in CSS Selector.

29. Tell us something about contextual selector?

The selector used to select special occurrences of an element is called a contextual selector. Individual selectors should be written separately with space. In this kind of selector, only the last element of the pattern is addressed.  

30. What do you know about graceful degradation?

Even if the component fails, it can continue to work smoothly in the presence of graceful degradation. This feature is used nowadays in the latest applications. This feature is not available to everyone, but efforts are being made to deliver this feature to a comparatively large audience. If the image is not available for viewing, the text displays with the alt tag.

31. Tell us something about Alternate Style Sheets?

The alternate style sheets option enables the user to see multiple versions of a page according to their needs and preferences. The user can select the style in which the page is displayed by using the view>page style menu. It enables the user to choose the preferential style.

32. What do you understand about CSS specificity?

CSS specificity is a rank or score that decides the style of the declaration to be used by an element. (*) is a universal selector that has low specificity, and ID Selectors possess high specificity.

33. What is the significance of the ruleset?

The function of the ruleset is to identify whether a selector can be attached with another selector or not. It has two parts:

• Selector: It indicates the HTML element you want to style.
• Declaration Block: The declaration Block can have more than one declaration separated by a semicolon.

34. Tell us about the pseudo-elements and their uses?

When particular parts of the element are to be designed rather than the whole element, the pseudo-elements come into use. You can use pseudo-elements to style the first line, first letter of the paragraph, the selected text, or anything you want.

35. List some disadvantages of using CSS?

Some of the disadvantages of using CSS are:

• In CSS, ascending by selectors is not possible. 
• The vertical controls are limited.
• There are no expressions in CSS. 
• There are no column declarations.
• Pseudo-class is not controlled by dynamic behaviour.
• Features like rules, styles, and targeting specific text are not possible with CSS.

36. Describe the use of float property in CSS?

With the use of the float property, the element is placed on the left or right side of its container, allowing text and in-line elements to wrap around it. The element remains the part of the flow even after being removed from the normal flow.

37. Do you know how inheritance works in CSS?

Inheritance is a widely used concept in HTML and many programming languages. In CSS, Inheritance is used to define the hierarchy from top to bottom level. The child will certainly inherit the properties of its parents. Some restriction is also applied so that all the properties can not be inherited. Inheritance is passing the properties from the parent class, so the necessity of defining the properties again is finished. If the child uses the same properties, they are overridden by the child class.

The HTML CSS Interview Questions listed above are of utmost importance for cracking an interview for an IT company. Making a website is one thing but making it presentable is also equally important. CSS is a feature used along with HTML to style documents. The users get a better internet experience when things are designed in a specific manner. It makes the stuff more appealing and attractive.

CSS plays an important role in doing all this. It is important to have CSS knowledge as it is one of the most used features. Various HTML CSS Interview Questions present above are important. These questions are commonly asked. The bare minimum a candidate can know in the IT field is about HTML and CSS, so the candidates should make sure they are thorough with HTML CSS Interview Questions.

Conclusion

Most people are well-versed with the basics of HTML and CSS. The knowledge is immense, but there are glitches in putting that knowledge in words. Candidates are not able to aggregate the knowledge they have. They are unable to differentiate between the important things and the unnecessary ones. Reading helps, but compact and easy stuff is convenient to grab.  Here, all the HTML CSS Interview questions are clubbed together so that you can have a basic idea about the kind of questions asked in the interviews. It will also help the candidates in doing a guided study and knowing all the essential things. By going through these questions, the candidates get confident for the interview along with gaining knowledge.

Make sure that you go through these HTML CSS Interview Questions to extract the maximum possible benefit out of them.

More Resources: Urgent part time jobs in Chennai | Weekend part time jobs in Bangalore | Strengths and Weaknesses Answers For HR Interviews | AngularJS Interview Questions and Answers