blog banner
 

1. What is HTML?

HTML stands for HyperText Markup Language. It is the dominant markup language for creating websites and anything that can be viewed in a web browser. If you want to get some extra bonus points, you can learn the history of HTML and throw in some obscure facts.
 

2. What is the difference between HTML elements and tags?

HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML tags. For the most part, tags come in pairs and surround text.
 

3. What is “Semantic HTML?”

Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like <b></b> for bold, and <i></i> for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use <strong></strong> and <em></em>. These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

 

4. What does DOCTYPE mean?

The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode. See example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.

Doctype tag is not a HTML tag, it is just an instruction that is passed to the web browser to check for the information that is being provided by the markup language in which the page is written. Doctype is sometimes referred as Document type definition (DTD) that describes some rules that has to be followed while writing the markup language so to make the web browser understand the language and the content correctly. Doctype is very important to be placed in the beginning of the HTML and before the <HTML> tag to allow easy rendering of the pages that are used.

 

5. Differentiate different types of Doctypes from one another

Doctype helps the web browser to correctly render the web pages. There are different types of Doctype that are available and they are as follows:

1. Strict Doctype :

It consists of all the HTML elements and it is also known as DTD (Document type definition) but it doesn't include the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. Transitional Doctype :

It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. Frameset Doctype :

It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also allowed in this.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 

6. What is a table in HTML ? What are the components of a table in HTML ?

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

Components of a table in HTML

table : defines a block of tabular data

caption : provides a visual caption (a title or description) for the table. This element should be used for providing a short heading for the table.

thead : logically groups header elements in a table. This element is used for grouping the top layer(s) of header cells.

th : defines a header cell in a table. This element is used to identify a table cell whose content is a header(thead) of some kind. It will make the texts bold.

tbody : logically groups elements that make the body of a table’s content. This element is used to group the bulk of the table’s content (that is, anything other than the headers, which are contained in the thead, and the footer area, which is contained by tfoot)

tfoot : logically groups elements that comprise the footer area of a table’s content. This element is used to group the table’s footer area (which may be a summary, an addition of column values, or some call to action based on the preceding content).

tr : defines a row in a table.

td : defines a standard data cell in a table.

Note : thead , tbody & tfoot is used for grouping the rows of a table and to make the code neat & clean. You can create a table using tr & td only.

Example :

<table border="1">

<caption>Interest Rates for Young Saver Accounts</caption>

<thead>

<tr>

<th>Name</th>
<th>Salary</th>

</tr>

</thead>

<tbody>

<tr>

<td>Ramesh Raman</td>
<td>5000</td>

</tr>
<tr>

<td>Shabbir Hussein</td>
<td>7000</td>

</tr>

</tbody>

</table>

Output :

 

7. What is cell spacing and cell padding ?

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.

The cellspacing attribute defines the width of the border. It will fill white spaces between two adjacent sells in a table.

The cellpadding represents the distance between cell borders and the content within a cell. It simply apply css's padding property with in a cell. it will fill white spaces betweent a cell's border and cell's content.

We specify these properties in table tag.

Example :

In the above example if we declare the table in following manner keeping rest of the code same :

<table border="1" cellpadding="15" cellspacing="15">

Then the output will look like :

 

8. Can we have cells with different width in a column and different height in a row ?

No, This is not possible. All cells in a particular column have equal width. All cells will inherit the width of the widest cell of that column. Similarly, All cells in a particular row have equal height. All cells will inherit the height of the tallest cell of that row.

 

9. What is colspan in tables ?

we use colspan attribute if we need to merge two or more columns into a single column of a row. This property is applied on td.

Example :

<table>

<tr>

<th>Month</th>
<th>Savings</th>

</tr>
<tr>

<td>January</td>
<td>$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>
<tr>

<td colspan="2">Sum: $180</td>

</tr>

</table>

output :

 

10. what is rowspan in tables?

We use rowspan if we want to merge two or more rows into a single row. This property is also applied on td.

Example :

<table>

<tr>

<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>

</tr>
<tr>

<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</table>

output :

 

11. Create the following table structure 

<table border="1">

<!-- First row -->

<tr>

<td>1</td>
<td colspan="2">2 and 3</td>
<td>4</td>

</tr>

<!-- Second row -->

<tr>

<td rowspan="3">5, 9 and 13</td>
<td>6</td>
<td>7</td>
<td>8</td>

</tr>

<!-- Third row -->

<tr>

<td>10</td>
<td>11</td>
<td>12</td>

</tr>

<!-- Fourth row -->

<tr>

<td colspan="3">14, 15 and 16</td>

</tr>

</table>

 

12. What is a div in html?

Div is  the best way to develpo a webpage. It creates containers ( like boxes) with in which we keep content. Div containers are complete flexible. Width, height, position in a webpage of any div is independent from another div in same webpage. A div does not inherit properties from another div until forced to inherit externally.

In other words, div, an abbreviation for ‘division’, is an HTML tag (otherwise known as an element). Used to create containers around groups of content on Web pages, it is usually given a unique id to distinguish it from other div elements on the same page.

Example :

<div id="header">

<img src="logo.png" alt="Company logo" />
<h1>Welcome to our Company!</h1>

</div>
 

13. What is span in html?

The HTML <span> tag is used for grouping and applying styles to inline elements.

Example :

<div id="userbar">

Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |

</div>

14. What is the difference between div & span in html?

div element is block level elements where span is an inline element and hence margin on span wont work. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;

Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
 

15. Which is preferrable technique when developing a webpage, tabular or div ? and why ?

current best practices is to use <div> instead of <table> for layout.

main reasons are:

  • <table> are inflexible, in the sense that a table layout is embedded in the html structure of the table element and his childs (ie <tr><td>)
  • <div> allows lots of freedom on layout with css regardless of their html structure
  • <table> layout can be easly achieved with div using css

note that for tabular data the best practice is to use <table>

For more study from here

 

16. How do you make comments without text being picked up by the browser?

Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with “*<!--” and end with ” -->“.

<!-- Insert comment here. -->

 

17. What is the difference between <div> and <frame>?

A <div> is a generic container element for grouping and styling, whereas a<frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding foreign elements (ie. Youtube videos) into a page.

 

18. In how many types CSS can be include in HTML?

There are three ways to include the CSS with HTML:

1. Inline CSS :

It is used when only small context is to be styled. - To use inline styles add the style attribute in the relevant tag.

<p style=”color:blue”>Lorem Ipsum</p>

2. External Style Sheet :

Is used when the style is applied to many pages. CSS is placed in an external .css file, and linked to the HTML document with a <link> tag. This can also be accomplished using the ‘@import’,. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

3. Internal Style Sheet :

Is used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag, like this:

<head>

<style type="text/css">

hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}

</style>

</head>

 

19. What is selectors in CSS ? What are he types of selectors in CSS?

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. In other words, a “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling.

    1. Universal Selector
    2. Element Type Selector
    3. ID Selector
    4. Class Selector
    5. Descendant Combinator
    6. Child Combinator
    7. General Sibling Combinator
    8. Adjacent Sibling Combinator
    9. Attribute Selector
    10. Pseudo-class
    11. Pseudo-element

 

20. Explain Universal Selector & Element Type Selector of CSS ?

Universal Selector

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Look at the following CSS example, which uses the universal selector:

* {

color: green;
font-size: 20px;
line-height: 25px;

}

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk(*). You can also use the universal selector in combination with other selectors.
 

Element Type Selector

Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements.

The following example uses an element type selector to match all <ul> elements:

ul {

list-style: none;
border: solid 1px #ccc;

}

To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:

<ul>

<li>Fish</li>
<li>Apples</li>
<li>Cheese</li>

</ul>

<div class="example">

<p>Example paragraph text.</p>

</div>

There are three main elements making up this part of the page: Two <ul> elements and a <div>. The CSS will apply only to the two <ul> elements, and not to the <div>.
 

21.Explain ID Selector of CSS ?

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.

Here’s an example:

#container {

width: 960px;
margin: 0 auto;

}

This CSS uses an ID selector to match an HTML element such as:

<div id="container"></div>

In this case, the fact that this is a <div> element doesn’t matter—it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply.

An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.
 

22. Explain Class selectors of CSS?

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

Take the following rule set:

.box {

padding: 20px;
margin: 10px;
width: 240px;

}

These styles will apply to the following HTML element:

<div class="box"></div>

The same styles will also apply to any other HTML elements that have a class attribute with a value of box. Having multiple elements on a single page with the same class attribute is beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to this, class selectors have very low specificity—again, more on this later.

Another reason the class selector is a valuable ally is that HTML allows multiple classes to be added to a single element. This is done by separating the classes in the HTML class attribute using spaces. Here’s an example:

<div class=”box box-more box-extended”></div>
 

23. Explain Descendant Combinator of CSS?

The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method. For example:

#container .box {

float: left;
padding-bottom: 15px;

}

This declaration block will apply to all elements that have a class of box that are inside an element with an ID of container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

Look at the following HTML:

<div id="container">

<div class="box"></div>

<div class="box-2"></div>

</div>

<div class="box"></div>

If we apply the CSS in the previous example to this section of HTML, the only element that’ll be affected by those styles is the first <div> element that has a class of box. The <div> element that has a class of box-2 won’t be affected by the styles. Similarly, the second <div> element with a class of box won’t be affected because it’s not inside an element with an ID of container.
 

24. Explain Child Combinatorof CSS?

A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements:

#container > .box {

float: left;
padding-bottom: 15px;

}

This is the same code from the descendant combinator example, but instead of a space character, we’re using the greater-than symbol (or right angle bracket.)

In this example, the selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element.

Here’s an HTML example:

<div id="container">

<div class="box"></div>

<div>
<div class="box"></div>

 

In this example, the CSS from the previous code example will apply only to the first <div> element that has a class of box. As you can see, the second <div> element with a class of box is inside another <div> element. As a result, the styles will not apply to that element, even though it too has a class of box.
 

25. Explain  General Sibling Combinator CSS?

A selector that uses a general sibling combinator matches elements based on sibling relationships. That is to say, the selected elements are beside each other in the HTML.

h2 ~ p {

margin-bottom: 20px;

}

This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

Let’s apply the CSS from above to the following HTML:

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">

<p>Paragraph example.</p>

</div>

In this example, the styles will apply only to the first three paragraph elements. The last paragraph element is not a sibling of the <h2> element because it sits inside the <div> element.
 

26. Explain Adjacent Sibling Combinator of CSS?

A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling. Let’s see what the CSS code for this looks like:

p + p {

text-indent: 1.5em;
margin-bottom: 0;

}

This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

So, if we apply this selector to the following HTML:

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class="box">

<p>Paragraph example.</p>
<p>Paragraph example.</p>

</div>

the styles will apply only to the second, third, and fifth paragraphs in this section of HTML.
 

27. Explain Attribute Selector of CSS ?

The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets:

input[type="text"] {

background-color: #444;
width: 200px;

}

There should not be a space before the opening square bracket unless you intend to use it along with a descendant combinator. The above CSS would match the following element:

<input type="text">

But it wouldn’t match this one:

<input type="submit">

The attribute selector can also be declared using just the attribute itself, with no value, like this:

input[type] {

background-color: #444;
width: 200px;

}

This will match all input elements with an attribute of type, regardless of the value.
 

28. Explain Pseudo-class & Pseudo-element of CSS?

Pseudo-class

A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated. Let’s look at a common example:

a:hover {

color: red;

}

In this case, the pseudo-class portion of the selector is the :hover part. Here we’ve attached this pseudo-class to all anchor elements ( elements). This means that when the user hovers their mouse over an element, the color property for that element will change to red. This type of pseudo-class is a dynamic pseudo-class, because it occurs only in response to user interaction—in this case, the mouse moving over the targeted element.
 

Pseudo-element

Finally, CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. The only caveat is that this selector is quite different from the other examples we’ve considered. Let’s see a pseudo-element in context:

.container:before {

content: "";
display: block;
width: 50px;
height: 50px;
background-color: #141414;

}

This example uses one kind of pseudo-element, the :before pseudo-element. As the name suggests, this selector inserts an imaginary element into the page, inside the targeted element, before its contents.
 

29. What is the difference between id and class ?

Regarding CSS, there is nothing you can do with an ID that you can't do with a Class and vise versa. So we can see that css doesn't care much about class and ids but javascript does. JavaScript people are already probably more in tune with the differences between classes and ID's. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn't be dependable.

Differences :

1. Classes have no special abilities in the browser, but ID's do have one very important trick up their sleeve. This is the "hash value" in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of "comments" and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.
 

2. ID's are unique

      • Each element can have only one ID
      • Each page can have only one element with that ID

 IDs must be unique--you can't have more than one element with the same ID in an html document.

      Classes are NOT unique

      • You can use the same class on multiple elements.
      • You can use multiple classes on the same element.

     Classes can be used for multiple elements and for several times.
 

30. What is grouping and what is it used for?

Grouping allows you to apply the same style to multiple elements with a single declaration. This is done by grouping the selectors into a list, separated by commas.

h1, h2 { font-family: Helvetica; font-size: 20; }

Grouping helps memory usage and enhances readability.
 

31. What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

1. HTML is application of Standard Generalized Markup Language(SGML) whereas XML is application of Extensible Markup Language(XML).
2. HTML is a static Web Page whereas XHTML is dynamic Web Page.
3. HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
4. HTML is about displaying information whereas XHTML is about describing the information.
 

32. Why doesn't <TABLE WIDTH="100%"> use the full browser width?

- This is because the graphical browser is designed to leave a margin between the display area and actual content.
- The navigator also leaves some space for the scroll bar on the right side of the display area. Though, if the page is not long enough, the scroll bar doesn’t appear.
 

33. How would you automatically transfer your visitors to a new web page?

- You can do it with the help of meta tag mentioned below:

<META HTTP-EQUIV="Refresh" CONTENT="2"; URL="http://www.yourname.com">

- Place this above code between <HEAD></HEAD> .

- It will load yousite.com in 2 seconds. the number for content is the time in seconds.
 

34. How to create nested tables within tables in HTML?

We can create nest table i.e. table inside a table.

To create table we use following attributes:

<table cellspacing="15" cellpadding="15" border="3" style="border-color: red">

<tr>

<td>first cell of the outer table</td>

<td>second cell of the outer table, creating second table inside the first table

<table cellspacing="15" cellpadding="15" border="3" style="border-color: blue">

<tr>

<td>first cell of the second table</td>
<td>second cell of the second table</td>

</tr>

</table>

</td>

</tr>

</table>

output

 

 

35. what’s the real difference between HTML and HTML5?

HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.

From a broader perspective, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as an application development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols. Thus, proprietary plug-in technologies like Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX are no longer needed, because browsers can now process these elements without additional requirements.

Admin Team


0 Respond



Written
Exam Questions
BLOG Posts
For study materials
Job Walk-In
Updates across India
Interview round
Questions
Interview or procedure
Experiences
Files
For study materials
Please LIKE our page to Get regular JOB WALK-IN UPDATES across India and STUDY MATERIALS on facebook news feed.