TOP HTML & CSS Interview Questions with Answers

Top HTML & CSS interviews questions with answers are given below —

#HTML

1. What is an image map?

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.

2. How do you create links to sections on the same page?

Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.

3. Does a hyperlink apply to text only?

No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a href=” “>…</a> tag combinations.

4. Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50

5. What is the advantage of grouping several checkboxes together?

Although checkboxes don’t affect one another, grouping checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.

6. What will happen if you overlap sets of tags?

If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem when the text does not display properly on the browser screen.

7. What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the HTML file?

If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear. Some tags, especially tags without a closing tag like the <img> tag, do not require any text between them.

8. How do you create a link that will connect to another web page when clicked?

To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.

9. Do <th> tags always need to come at the start of a row or column?

Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.

10. What is a marquee?

A marquee allows you to put scrolling text on a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

11. How do you create text on a webpage that will allow you to send an email when clicked?

To change text into a clickable link to send an email, use the mailto command within the href tag. The format is as follows:

12. Are <br> tags the only way to separate sections of text?

No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.

13. How are active links different from normal links?

The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered normal link.

14. How do you make a picture into a background image of a web page?

To do this, place a tag code after the </head> tag as follows:

Replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.

15. When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

16. Name two new tags included in the HTML 5

<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items.

17. Do you know which are two semantic tags are included in the HTML5 version?

The <article> and <section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole.

18. Tell me two benefits of HTML5 Web Storage

Two main benefits of HTML5 Web Storage:

• It can store up to 10 MB of data which is certainly more than what cookies have.
• Web storage data cannot be transferred with the HTTP request. It helps to increase the performance of the application.

19. What are the two types of Web Storage in HTML5?

Two storage types of HTML5 are:

Session Storage:

It stores data of the current session only. It means that the data stored in session storage clear automatically when the browser is closed.

Local Storage:

Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.

20. What is the Application Cache in HTML5 and why it is used?

The Application Cache concept means that a web application is cached. It can be accessed without the need for an internet connection.

Some advantages of Application Cache:

1. Offline browsing — Web users can also use the application when they are offline.
2. Speed — Cached resources load quicker
3. Reduce the server load — The web browser will only download updated resources from the server.

#CSS

1. What are the limitations of CSS?

Limitations are:

• Ascending by selectors is not possible
• Limitations of vertical control
• No expressions
• No column declaration
• Pseudo-class not controlled by dynamic behavior
• Rules, styles, targeting specific text are not possible

2. In how many ways can a CSS be integrated as a web page?

CSS can be integrated into three ways:

• Inline: Style attribute can be used to have CSS applied HTML elements.
• Embedded: The Head element can have a Style element within which the code can be placed.
• Linked/ Imported: CSS can be placed in an external file and linked via a link element.

3. What does CSS selector mean?

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

4. Differentiate logical tags from physical tags?

• While physical tags are also referred to as presentational mark-ups, logical tags are useless for appearances.
• Physical tags are newer versions while logical tags are old and concentrate on the content.

5. Differentiate Class selector from ID selector?

While an overall block is given to the class selector, the ID selector prefers only a single element differing from other elements. In other words, ID is uniques while classes are not. It’s possible that an element has both class and ID.

6. How to overrule underlining Hyperlinks?

Control statements and external style sheets are used to overrule underlining Hyperlinks.

7. 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.

8. Define the float property of CSS?

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property are applied do not change their properties.

9. How can the gap under the image be removed?

As images being inline elements are treated the same as texts, so there is a gap left, which can be removed by:

CSS:

10. What is Inline style?

The Inline style in CSS is used to add up styling to individual HTML elements.

11. How comments can be added in CSS?

The comments in CSS can be added with /* and */.