Aug 2, 2012

HTML and CSS Interview Questions and Answers

Q. Can you have a DIV element nested inside a SPAN element?A. It is a bad practice to have a DIV element nested inside a SPAN element. You can have a SPAN inside a DIV. The reason being the DIV is a block element and SPAN is an inline element. So, why would you want to have a block element inside an inline element? SPAN is a like sub tag, which applies styles for the specified content in-between the SPAN tag.Q. How will you decide between using nested HTML table tags and a DIV tag with CSS?A. Use DIV tags with CSS for laying out the web pages and use TABLE for representing data.

Tabular data represented using html table tag.

To layout web page elements

The traditional way of laying out web pages was to place them inside invisible tables as demonstrated below. This way of laying out is more complicated to do, harder to maintain and makes the web pages to load very slowly.

The newer way to lay out your page elements is using DIVs and CSS. It can do everything tables can do and much more, and as an added bonus it loads a lot faster than tables ever did. It is easier to maintain, if you don't go overboard with nested DIVs. Use DIV for the conatainer and then use other elements SPAN, P, etc with CSS.

Note: It is a best practice to define HTML, CSS, and JavaScript in separate files. The CSS is combined with HTML in these examples for illustration purpose only.

The typical usecase for the "clear" css tag is when you want to put a footer at the bottom of your page, beneath the RHS menu and the content sections. So, by using the CSS tags like float, clear, absolute, relative, and display you can create attractive, maintainable, and faster layouts.