For Javascript developer to have some idea about html to impress interviewer..
January 01, 2014
Need more: CSS Interview Questions, JavaScript Beginners Algorithm
Question: What is doctype? Why do u need it?
Answer: doctype is an instruction to the browser to inform about the version of html document and how browser should render it.
It ensures how element should be displayed on the page by most of the browser. And it also makes browser's life easier. otherwise, browser will guess and will go to quirks mode. Moreover, doctype is required to validate markup.
<!DOCTYPE html>
<meta charset="UTF-8">
extra: this the first tag of html file, don't need a closing tag and not case sensitive.
ref: don't forget doctype, Sparse vs Dense ArrayQuestion: What is the use of data- attribute?
Answer: allow you to store extra information/ data in the DOM. u can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it.
<div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>
Question: How can u generate public key in html?
Answer: html has a keygen element that facilitate generation of key and submission via a form.
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
extra: keygen has to be used inside a form.
ref: MDN: keygenQuestion: How can u change direction of html text?
Answer: use bdo (bidirectional override) element of html.
<!-- Switch text direction -->
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
This text will go right to left.
extra: rtl: right to left. and alternatively you can use, ltr: left to right.
Question: How can u highlight text in html?
Answer: use mark element.
<p>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>
result:Some part of this paragraph is highlighted by using mark element.
Question: Can u apply css rule to a part of html document?
Answer: yes. by using "scopped" in the style tag.
ref MDN: styleQuestion: Does the following trigger http request at the time of page load?
<img src="mypic.jpg" style="visibility: hidden" alt="My photo">
Answer: yes
<div style="display: none;">
<img src="mypic.jpg" alt="My photo">
</div>
Answer: yes
ref: David Shariff: quiz
Question: Does style1.css have to be downloaded and parsed before style2.css can be fetched?
<head>
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
</head>
Answer: No
Question: Does style2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?
<head>
<link href="style1.css" rel="stylesheet">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<link href="style2.css" rel="stylesheet">
</body>
Answer: yes
ref: David Shariff: quizQuestion: What are optional closing tag? and why would u use it?
Answer: p, li, td, tr, th, html, body, etc. you don't have to provide end tag. Whenever browser hits a new tag it automatically ends the previous tag. However, you have to be careful to escape it.
reason: you can save some byte and reduce bytes needs to be downloaded in a html file.
<p>Some text
<p>Some more text
<ul>
<li>A list item
<li>Another list item
</ul>
the above html will be parsed as the following blocks.
<p>Some text</p>
<p>Some more text</p>
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
Question: What is the difference between span and div?
Answer: div is a block element and span is inline element.
Extra: It is illegal to put block element inside inline element. div can have a p tag and a p tag can have a span. However, span can't have a div or p tag inside.
Question: When should you use section, div or article?
Answer:
<section>, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. A section normally has a heading (title) and maybe a footer too.
<article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
Good Summary:div, section & article
Extra: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
ref: (copied from) W3C: section, W3C: div, W3c: article
Question: What are the difference between svg and canvas?
Answer: Read this one. (I am tired of copy-pasting)
Question: How to serve a page content in multiple languages?
Answer: CMS could be used to deliver content in different language with same structure and style.
ref: john polacek
Question: Difference between standard/ strict mode and quirks mode?
Answer: quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.
Question: What is semantic HTML?
Answer: Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content.
for example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they’re to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don’t have to do so in all browsers), while adding meaning to the structure of the content.
Question: Why you would like to use semantic tag?
Answer: Search Engine Optimization, accessibility, repurposing, light code.
Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly.
Search engine needs to understand page content to rank and semantic tag helps.
ref: why important, Wiki: semantic HTML
Question: What does “semantically correct” mean?
Answer: read it in Stackoverflow
Feel free to express your anger (sorry folks, you have to use g+.). Also point out my mistakes ( technical, wrong answer, spelling, grammar, sentence..., whatever), let your dude learn and grow.