html5 interview questions
Top html5 frequently asked interview questions
When one wants to refer to some part of a webpage with the "http://example.com/#foo" method, should one use
<h1><a name="foo"/>Foo Title</h1>
or
<h1 id="foo">Foo Title</h1>
They both work, but are they equal, or do they have semantic differences?
Source: (StackOverflow)
Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?
Source: (StackOverflow)
I'm trying to include an html snippet inside of an ng-repeat, but I can't get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using <div ng-include src="path/file.html"></div> but in the official docs, it says to use <div ng-include="path/file.html"></div> but then down the page it is shown as <div ng-include src="path/file.html"></div>.
Regardles, I tried
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
My snippet is not very much code, but it's got a lot going on; I read in SO#12361680 that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.
I also tried declaring the template directly in the page like this:
<script type="text/ng-template" id="tmpl">
foo
</script>
And running thru all the variations of ng-include referencing the script's id, and still nothin'.
My page had a lot more in it, but now I've stripped it down to just this:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header>
<article id="sidepanel">
<section class="panel"> <!-- will have ng-repeat="panel in panels" -->
<div ng-include src="views/sidepanel.html"></div>
</section>
</article>
<!-- index.html -->
</body>
</html>
The header renders, but then my template doesn't. I get no errors in console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).
Source: (StackOverflow)
I've looked into the source of Facebook, they use the <i> tag to display icons.
Also, today I looked into Twitter's Bootstrap. It also uses <i> tag to display icons.
But,
From the HTML5 spec:
The I element represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose, such as a taxonomic
designation, a technical term, an idiomatic phrase from another
language, a thought, a ship name, or some other prose whose typical
typographic presentation is italicized.
Why are they using <i> tag to display icons?
Is it not a bad practice?
Or am I missing something here?
I am using span to display icons and it seems to be working for me till now.
Update:
Bootstrap 3 now uses span for icons. Official Doc
Source: (StackOverflow)
Seems the minlength attribute for an <input> field doesn't work.
Is there any other attribute in HTML5 with the help of which I can set minimal length of value for fields?
Source: (StackOverflow)
The W3C validator doesn't like self-closing tags (those that end with "/>") on non void elements (those that may not ever contain any content). Are they still valid in HTML5?
Some examples of accepted void elements would be:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements would be:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note: the W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />). However, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
Source: (StackOverflow)
Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success.
Why is this important?
As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in PPI (pixels per inch).
For web applications and games to offer a friendly user interface, certain elements are adjusted in size relative to a user's thumb or finger position, thus, we may want to scale certain images or buttons to provide for that better user experience.
Things I have tried so far (including some pretty obvious approaches):
window.devicepixelratio- CSS element width in cm unit
- CSS media queries (such as
resolution and -webkit-device-pixel-ratio)
- SVG drawings in similar units
- Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with
requestAnimFrame (I was hoping to detect a measurable difference)
I'm fresh out of ideas. How about you?
Update
Thanks for the responses so far. I would like to comment on people voting against detecting iPad mini versus 2 as Apple has uhm, one guideline to rule them all. Okay, here's my reasoning why I feel it really makes all sense in the world to know if a person is using an iPad mini or a 2. And do with my reasoning what you like.
The iPad mini is not only a much smaller device (9.7 inch versus 7.9 inch), but its form factor allows for a different usage. The iPad 2 is usually held with two hands when gaming unless you're Chuck Norris. The mini is smaller, but it is also much lighter and allows for gameplay where you hold it in one hand and use another to swipe or tap or whatnot. As a game designer and developer myself, I'd just like to know if it's a mini so I can choose to provide the player with a different controlscheme if I want (for instance after A/B testing with a group of players).
Why? Well, it's a proven fact that the majority of users tend to go with the default settings, so leaving out a virtual thumbstick and putting some other tap-based control on the screen (just giving an arbitrary example here) when the player loads up the game for the first time is what I, and probably other game designers, would love to be able to do.
So IMHO this goes beyond the thick fingers / guidelines discussions and is just something Apple and all other vendors ought to do: allow us to uniquely identify your device and think different instead of following guidelines.
Source: (StackOverflow)
What is the difference in usage between $.data and $.attr when using data-someAttribute?
My understanding is that $.data is stored within jQuery's $.cache, not the DOM. Therefore, if I want to use $.cache for data storage, I should use $.data. If I want to add HTML5 data-attributes, I should use $.attr("data-attribute", "myCoolValue").
Source: (StackOverflow)
Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down arrows from appearing.
<input id="test" type="number"/>
Source: (StackOverflow)
There is enough information about HTML5 on the web (and also on stackoverflow), but now I'm curious about the "best practices". Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these tags. So what do you guys think of the following layout and code?
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a rel='nofollow' href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a rel='nofollow' href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a rel='nofollow' href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
line 7. section around the whole website? Or only a div?
line 8. Each section start with a header?
line 23. Is this div right? or must this be a section?
line 24. Split left/right column with a div.
line 25. Right place for the article tag?
line 26. Is it required to put your h1-tag in the header-tag?
line 43. The content is not related to the main article, so I decided this is a section and not a aside.
line 44. H2 without header
line 53. section without header
line 63. Div with all (non-related) news items
line 64. header with h2
line 65. Hmm, div or section? Or remove this div and only use the article-tag
line 105. Footer :-)
Source: (StackOverflow)