HTML related interview questions

For Javascript developer to have some idea about html to impress interviewer..

January 01, 2014

  1. Why do u need doctype?
  2. What is the use of data-* attribute?
  3. How can you generate public key in html?
  4. How do you change direction of html text?
  5. How can you highlight text in html?
  6. Can you apply css to a part of html document only?
  7. Will browser make http request for the following cases?
  8. Which resource would be downloaded first?
  9. What is optional tag?
  10. What are the differences between div and span?
  11. How would you differentiate div, section and article?
  12. How to select svg or canvas for your site?
  13. How to serve html in multiple languages?
  14. Explain standard and quirks mode.
  15. What is semantic tag?

Need more: CSS Interview Questions, JavaScript Beginners Algorithm

1. doctype

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 Array

2. data-*

Question: 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>

ref: MDN: data-*, use data attribute

3. keygen

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: keygen

4. bdo

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

5. mark

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.

6. scoped

Question: Can u apply css rule to a part of html document?

Answer: yes. by using "scopped" in the style tag.

ref MDN: style

7. http request

Question: 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">

Answer: yes

ref: David Shariff: quiz

8. download order

Question: Does style1.css have to be downloaded and parsed before style2.css can be fetched?

<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">

Answer: No

Question: Does style2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?

<link href="style1.css" rel="stylesheet">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<link href="style2.css" rel="stylesheet">

Answer: yes

ref: David Shariff: quiz

9. self closing tag

Question: 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
<li>A list item
<li>Another list item

the above html will be parsed as the following blocks.

<p>Some text</p>
<p>Some more text</p>
<li>A list item</li>
<li>Another list item</li>

ref: index of elements

Old School questions

10. span vs div

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.

ref: Stackoverflow: div vs span

11. div, section & article

Question: When should you use section, div or article?

<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

12. svg vs canvas

Question: What are the difference between svg and canvas?

Answer: Read this one. (I am tired of copy-pasting)

13. multiple languages

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

14. standard & quirks mode

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.

15. semantic

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

Need more!

More questions: CSS Interview Questions, JavaScript Beginners Algorithm

read: HTML5

Express anger!

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.