Shubelal Kumar

HTML Interview Questions and Answers

what is doctype in html?: Answer : The !DOCTYPE declaration is a top-level tag-like reference known as a Public Text Identifier. It should appear at the very beginning of an HTML/XHTML document in order to identify the content of the document as conforming (theoretically) to a particular HTML DTD specification. Historically, including a DTD was not required by browsers; they just interpreted a document according to what elements and attributes it understood. That has now changed (see the section on DOCTYPE switching below.)

The quoted segment within a !DOCTYPE declaration is called a Formal Public Identifier (FPI.) Every distinct DTD variation will have its own unique FPI string.

Syntax

Typical HTML DOCTYPE statement:

<!DOCTYPE	HTML	PUBLIC	"-//	W3C//	DTD	HTML 4.0 Transitional//	EN"	"http://www.w3.org/TR/html4/loose.dtd">
	(1)	(2)	(3)	(4)	(5)	(6)	(7)	(8)

Annotated syntax:

<!DOCTYPE	[Top Element]	[Availability]	"[Registration]//	[Organization]//	[Type]	[Label]//	[Language]"	"[URL]">
	(1)	(2)	(3)	(4)	(5)	(6)	(7)	(8)

Explanation

General : A pair of forward slash characters ("//") is used as delimiters between keyword fields in the FPI declaration.

(1) : [Top Element] - Indicates the top level element type declared in the DTD; for HTML it is <html>.

(2) : [Availability] - field indicates whether the identifier is a publicly accessible object (PUBLIC) or a system resource (SYSTEM) such as a local file or URL. HTML/XHTML DTDs are specified by PUBLIC identifiers.

(3) : [Registration] - Indicated by either a plus ("+") or minus ("-"). A plus symbol indicates that the organization name that follows is ISO-registered. A minus sign indicates the organization name is not registered. The IETF and W3C are not registered ISO organizations and thus use a "-".

(4) : [Organization] - This is the "OwnerID" - a unique label indicating the name of the entity or organization responsible for the creation and/or maintenance of the artifact (DTD, etc.) being referenced by the DOCTYPE. The IETF and W3C are the two originating organizations of the official HTML/XHTML DTDs.

(5) : [Type] - This is the "Public Text Class" - the type of object being referenced. There are many different keywords possible here, but in the case of an HTML/XHTML DTD, it is "DTD" - a Document Type Definition.

(6) : [Label] - This is the "Public Text Description" - a unique descriptive name for the public text (DTD) being referenced. If the public text changes for any reason, a new Public Text Description string should be created for it.

(7) : [Language] - This is the "Public Text Language"; the natural language encoding system used in the creation of the referenced object. It is written as an ISO 639 language code (uppercase, two letters.) HTML/XHTML DTDs are usually (always?) written in English ("EN".)

(8) : [URL] - This is the optional explicit URL to the DTD being referenced. \

!DOCTYPE Examples
HTML 2.0: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN">
HTML 3.0: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01: [Strict DTD]: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[Transitional DTD]: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[Frameset DTD]: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0: [Strict DTD]: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[Transitional DTD]: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[Frameset DTD]: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

Tips & Tricks

Some HTML validation tools will need to have the !DOCTYPE declaration present in order to choose the proper DTD to validate against.
Using a !DOCTYPE declaration also allows tools (such as SGML browsers or document validators) to view your document. Some of these tools can play vital roles in managing HTML documents.
SGML tools can also use URLs as FPI references to DTDs. The SYSTEM keyword in the Public Text Identifier indicates that the FPI may be a URL reference. Example:
<!DOCTYPE HTML SYSTEM "http://www.w3.org/DTD/HTML4-strict.dtd">

Browser Peculiarities

[Bug described elsewhere] IE6 and Opera 7.0x: If there is anything before the <!DOCTYPE> declaration, quirks mode will be used. In the case of In an XML document (including XHTML), it is syntactically correct and recommended to have the XML declaration (eg: <?xml version="1.0" ?>) come before any other content. This means that XHTML documents that use the XML declaration, even if they carry a current and/or strict DTD, will use Quirks mode.
After Mozilla 1.0 (Netscape 7.0) was released, a third specialized mode, called "almost standards" mode was created. Please see Mozilla's documentation on !DOCTYPE switching for more details on the authoring implications.
Historically, browsers did not care about doctypes, because they were expecting the content of the documents to be HTML and they would only interpret what they could in a single way. That has now changed with the adoption of doctype switching behaviors in all the popular browsers (beginning in the versions indicated above) to allow for full standards adoption while also allowing for legacy behavior with older content.
Note: This is not really a browser peculiarity about doctypes, it is a peculiarity about this particular page in Netscape 4.x. If you are using one of these browsers and most of the above content is invisible, you are seeing an interesting and elusive Netscape rendering bug. A fix that works for me is to expand the browser window (if window is not already maximized and resolution permits) at least wide enough for the entire "Annotated Syntax" line to be visible on a single line. I have been trying to track down the reason for this behavior for a long time but it has been exceedingly hard to reproduce... this fix works on MY machine at least. Strange bug.

Question: What's the difference between display: none and visibility: hidden?
The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren't.
Answer:

These two style properties do two different things.
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Question: What's the difference between Image Alt and Image Title?

Answer:
Alt text is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without an alt text an image will be displayed as an empty icon In Internet Explorer Alt text also pops up when you hover over an image. Last year Google officially confirmed that it mainly focuses on an alt text when trying to understand what an image is about.
Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image: