-
Notifications
You must be signed in to change notification settings - Fork 1
/
html.html
284 lines (270 loc) · 17.2 KB
/
html.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="html interview question, front end interview question, interview preparation, interview questions">
<meta name="that js dude" content="">
<link rel="shortcut icon" href="images/favicon.jpg">
<title>interview: html</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/zenburn.css">
<!-- Custom styles for this template -->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-bottom: 20px;
}
.purpleBold{
color:purple;
font-weight: bold;
}
.singInStuff{
margin-top: 9px;
}
#uName{
margin-top: -7px;
}
.skipListItem{
list-style-type: none;
}
</style>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>html</h1>
<h2>HTML related interview questions</h2>
<p>For Javascript developer to have some idea about html to impress interviewer..</p>
<p>January 01, 2014</p>
<div id="fb-root"></div><div class="fb-like" data-href="http://www.thatjsdude.com/interview/html.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> <div class="g-plusone"></div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row center">
<!-- <iframe width="853" height="480" src="//www.youtube.com/embed/Rx_JFOSxgpY" frameborder="0" allowfullscreen></iframe> -->
</div>
<!-- <h3>If you have hard time to follow this video, you can see the content below. Things you will learn-</h3> -->
<ol>
<li><a href="#doctype">Why do u need doctype?</a></li>
<li><a href="#data_attribute">What is the use of data-* attribute?</a></li>
<li><a href="#keygen">How can you generate public key in html?</a></li>
<li><a href="#bdo">How do you change direction of html text?</a></li>
<li><a href="#mark">How can you highlight text in html?</a></li>
<li><a href="#scopped">Can you apply css to a part of html document only?</a></li>
<li><a href="#http_request">Will browser make http request for the following cases?</a></li>
<li><a href="#download_order">Which resource would be downloaded first?</a></li>
<li><a href="#optional_tag">What is optional tag?</a></li>
<li><a href="#div_span">What are the differences between div and span?</a></li>
<li><a href="#div_section_article">How would you differentiate div, section and article?</a></li>
<li><a href="#svg_canvas">How to select svg or canvas for your site?</a></li>
<li><a href="#mtuli_lang">How to serve html in multiple languages?</a></li>
<li><a href="#standard_quirks">Explain standard and quirks mode.</a></li>
<li><a href="#semantic_html">What is semantic tag?</a></li>
</ol>
<p><strong>Need more:</strong> <strong><a href="css.html">CSS Interview Questions</a></strong>, <strong><a href="js1.html">JavaScript Beginners Algorithm</a></strong></p>
<div id="doctype">
<h2>1. doctype</h2>
<p><strong>Question:</strong> What is doctype? Why do u need it?</p>
<p><strong>Answer:</strong> doctype is an instruction to the browser to inform about the version of html document and how browser should render it.</p>
<p>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 <a href="http://en.wikipedia.org/wiki/Quirks_mode">quirks mode</a>. Moreover, doctype is required to <a href="http://validator.w3.org/">validate markup</a>.</p>
<pre><code>
<!DOCTYPE html>
<meta charset="UTF-8">
</code></pre>
<p><strong>extra:</strong> this the first tag of html file, don't need a closing tag and not case sensitive.</p>
ref: <a href="http://www.w3.org/QA/Tips/Doctype">don't forget doctype</a>, <a href="http://www.2ality.com/2012/06/dense-arrays.html">Sparse vs Dense Array</a>
</div>
<div id="data_attribute">
<h2>2. data-*</h2>
<p><strong>Question:</strong> What is the use of data- attribute?</p>
<p><strong>Answer:</strong> 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.</p>
<pre><code>
<div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>
</code></pre>
<p>ref: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">MDN: data-*</a>, <a href="http://www.sitepoint.com/use-html5-data-attributes/">use data attribute</a></p>
</div>
<div id="keygen">
<h2>3. keygen</h2>
<p><strong>Question:</strong> How can u generate public key in html?</p>
<p><strong>Answer:</strong> html has a keygen element that facilitate generation of key and submission via a form.</p>
<pre><code>
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
</code></pre>
<p><strong>extra:</strong> keygen has to be used inside a form.</p>
ref: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen">MDN: keygen</a>
</div>
<div id="bdo">
<h2>4. bdo</h2>
<p><strong>Question:</strong> How can u change direction of html text?</p>
<p><strong>Answer:</strong> use bdo (bidirectional override) element of html.</p>
<pre><code>
<!-- Switch text direction --><br/><p><bdo dir="rtl">This text will go right to left.</bdo></p>
</code></pre>
<strong>result:</strong>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
<p><strong>extra:</strong> rtl: right to left. and alternatively you can use, ltr: left to right.</p>
</div>
<div id="mark">
<h2>5. mark</h2>
<p><strong>Question:</strong> How can u highlight text in html?</p>
<p><strong>Answer:</strong> use mark element.</p>
<pre><code>
<p>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>
</code></pre>
<p><strong>result:</strong>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>
</div>
<div id="scopped">
<h2>6. scoped</h2>
<p><strong>Question:</strong> Can u apply css rule to a part of html document?</p>
<p><strong>Answer:</strong> yes. by using "scoped" in the style tag.</p>
ref <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style">MDN: style</a>
</div>
<div id="http_request">
<h2>7. http request </h2>
<p><strong>Question:</strong> Does the following trigger http request at the time of page load?</p>
<pre><code>
<img src="mypic.jpg" style="visibility: hidden" alt="My photo"><br/>
</code></pre>
<p><strong>Answer:</strong> yes</p>
<pre><code>
<div style="display: none;"><br/> <img src="mypic.jpg" alt="My photo"><br/></div>
</code></pre>
<P><strong>Answer:</strong> yes</P>
<p>ref: <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a></p>
</div>
<div id="download_order">
<h2>8. download order</h2>
<p><strong>Question:</strong> Does style1.css have to be downloaded and parsed before style2.css can be fetched?</p>
<pre><code>
<head><br/> <link href="style1.css" rel="stylesheet"><br/> <link href="style2.css" rel="stylesheet"><br/></head>
</code></pre>
<p><strong>Answer:</strong> No</p>
<p><strong>Question:</strong> Does style2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?</p>
<pre><code>
<head><br/> <link href="style1.css" rel="stylesheet"><br/></head><br/><body><br/> <p>Paragraph 1</p><br/> <p>Paragraph 2</p><br/> <link href="style2.css" rel="stylesheet"><br/></body>
</code></pre>
<p><strong>Answer:</strong> yes</p>
ref: <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a>
</div>
<div id="optional_tag">
<h2>9. self closing tag</h2>
<p><strong>Question:</strong> What are optional closing tag? and why would u use it?</p>
<p><strong>Answer:</strong> 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.</p>
<p><strong>reason:</strong> you can save some byte and reduce bytes needs to be downloaded in a html file.</p>
<pre><code>
<p>Some text<br/><p>Some more text<br/><ul><br/> <li>A list item<br/> <li>Another list item<br/></ul>
</code></pre>
<p> the above html will be parsed as the following blocks.</p>
<pre><code>
<p>Some text</p><br/><p>Some more text</p><br/><ul><br/> <li>A list item</li><br/> <li>Another list item</li><br/></ul>
</code></pre>
<p>ref: <a href="http://www.w3.org/TR/REC-html40/index/elements.html">W3.org: index of elements</a> </p>
</div>
<h1>Old School questions</h1>
<div id="div_span">
<h2>10. span vs div</h2>
<p><strong>Question:</strong> What is the difference between span and div?</p>
<p><strong>Answer:</strong> div is a block element and span is inline element.</p>
<p><strong>Extra:</strong> 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.</p>
<p>ref: <a href="http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span">Stackoverflow: div vs span</a> </p>
</div>
<div id="div_section_article">
<h2>11. div, section & article</h2>
<p><strong>Question:</strong> When should you use section, div or article?</p>
<p><strong>Answer:</strong> <br><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.</p>
<p><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.</p>
<p><div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.</p>
<p><strong>Good Summary:</strong><a href="http://oli.jp/2009/html5-structure1/">div, section & article</a></p>
<p><strong>Extra:</strong> 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.</p>
<p>ref: (copied from) <a href="http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element">W3C: section</a>, <a href="http://dev.w3.org/html5/spec-author-view/the-div-element.html#the-div-element">W3C: div</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">W3c: article</a> </p>
</div>
<div id="svg_canvas">
<h2>12. svg vs canvas</h2>
<p><strong>Question:</strong> What are the difference between svg and canvas?</p>
<p><strong>Answer:</strong> <a href="http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/">Read this one.</a> (I am tired of copy-pasting)</p>
</div>
<div id="mtuli_lang">
<h2>13. multiple languages</h2>
<p><strong>Question:</strong> How to serve a page content in multiple languages?</p>
<p><strong>Answer:</strong> CMS could be used to deliver content in different language with same structure and style.</p>
<p>ref: <a href="https://github.com/johnpolacek/Front-end-Developer-Interview-Questions/blob/master/README.md">john polacek</a> </p>
</div>
<div id="standard_quirks">
<h2>14. standard & quirks mode</h2>
<p><strong>Question:</strong> Difference between standard/ strict mode and quirks mode?</p>
<p><strong>Answer:</strong> quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.</p>
</div>
<div id="semantic_html">
<h2>15. semantic</h2>
<p><strong>Question:</strong> What is semantic HTML?</p>
<p><strong>Answer:</strong> 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.</p>
<p>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.</p>
<p><strong>Question:</strong> Why you would like to use semantic tag?</p>
<p><strong>Answer:</strong> Search Engine Optimization, accessibility, repurposing, light code. </p>
<p>Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly.</p>
<p>Search engine needs to understand page content to rank and semantic tag helps.</p>
<p>ref: <a href="http://www.adobe.com/devnet/html5/articles/semantic-markup.html#articlecontentAdobe_numberedheader_0">why important</a>, <a href="http://en.wikipedia.org/wiki/Semantic_HTML">Wiki: semantic HTML</a> </p>
<p><strong>Question:</strong> What does “semantically correct” mean?</p>
<p><strong>Answer:</strong> read it in <a href="http://stackoverflow.com/questions/1294493/what-does-semantically-correct-mean/1294512#1294512">Stackoverflow</a></p>
</div>
<div>
<h2>Need more!</h2>
<p><strong>More questions:</strong> <strong><a href="css.html">CSS Interview Questions</a></strong>, <strong><a href="js1.html">JavaScript Beginners Algorithm</a></strong></p>
read: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5?redirectlocale=en-US&redirectslug=HTML%2FHTML5">HTML5</a>
</div>
<div>
<h3 class="purpleBold">Express anger!</h3>
<p class="gray">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.</p>
<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="http://www.thatjsdude.com/interview/html.html"
data-width="642"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>
</div>
<div>
<div class="fb-comments" data-href="http://www.thatjsdude.com/interview/html.html" data-numposts="5" data-colorscheme="light"></div>
</div>
<hr>
<footer>
<p>©thatJSDude 2013</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
//g+
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
//fb
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>