-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathHTML.html
351 lines (205 loc) · 9.96 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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
/* -------------------------------------------------- */
HTML5 Template
/* -------------------------------------------------- */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="template description">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Daniel Lin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main role="main">
<section>
<article>
<header>
<h1>Section header</h1>
</header>
<p>Section body</p>
<footer>Section footer</footer>
</article>
</section>
<aside>
<p>tangentially connected section</p>
</aside>
</main>
<footer>
footer for nearest section or sectioning root
</footer>
<script src="./script.js"></script>
</body>
</html>
/* -------------------------------------------------- */
HTML5 Components
/* -------------------------------------------------- */
section
Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”
aside
Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header
There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav
Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer
Sounds like its a description of the position, but its not. Footer elements contain informations about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
Usage:
<body>
<h1>page title</h1>
<nav>
<h1>navigation</h1>
</nav>
<aside>
<h1>tangentially related to the topic at hand</h1>
</aside>
<article></article>
<article>
<h1>named article</h1>
</article>
<h2>untyped section, sibling
of the last article</h2>
Usage:
<body>
<h3>if you want siblings at top level</h3>
<h3>you have to use untyped sections with <hX> </h3>
<article>
<h1>as any section will descent</h1>
</article>
<nav>
<ul><li><a href=...>...</a></li></ul>
</nav>
What is the difference between <article> and <section>?
both can:
be nested in each other
take a different notion in a different context or nesting level
<section>s are like book chapters
they usually have siblings (maybe in a different document?)
together they have something in common, like chapters in a book
one author, one <article>... at least on the lowest level
standard example: a single blog comment
a blog entry itself is also a good example
a blog entry <article> and its comment <article>s could also be wrapped with an <article>
it’s some “complete” thing, not a part in a series of similar
<section>s in an <article> are like chapters in a book
<article>s in a <section> are like poems in a volume (within a series)
How do <header>, <footer> and <main> fit in?
they have zero influence on sectioning
<header> and <footer>
they allow you to mark zones of each and every section
even within a section you can have them several times
to differentiate from the main part in this section
limited only by the author’s taste
<header>
may mark the title/name of this section
may contain a logo for this section
has no need to be at the top or upper part of the section
<footer>
may mark the credits/author of this section
can come at the top of the section
can even be above a <header>
<main>
only allowed once
marks the main part of the top level section (i.e. the document, <body> that is)
subsections themselves have no markup for their main part
<main> can even “hide” in some subsections of the document, while document’s <header> and <footer> can’t (that markup would mark header/footer of that subsection then)
but it is not allowed in <article> sections4
helps to distinguish “the real thing” from document’s non-header, non-footer, non-main content, if that makes sense in your case...
/* -------------------------------------------------- */
Data form validation
/* -------------------------------------------------- */
While you should always validate data on your servers, additional validation of data on the Web page itself has multiple benefits. In many ways, users are annoyed by forms. By validating form data while the user is filling it out, the user can know immediately if they've made any mistakes; this saves the time of waiting for an HTTP response and saves your server from dealing with bad form input.
:invalid CSS pseudo class
<input id="choose" name="i_like" pattern="banana|cherry" required>
<input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+">
<input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry">
<input type="email" name="email">
<textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
Radio
<fieldset>
<legend>Title<abbr title="This field is mandatory">*</abbr></legend>
<input type="radio" required name="title" id="r1" value="Mr" ><label for="r1">Mr. </label>
<input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
</fieldset>
Customized error messages
There is no standard way to change their look and feel with CSS.
They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.
Use JavaScript to customize appearance and text.
Example
<form>
<label for="mail">I would like you to provide me an e-mail</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>
var email = document.getElementById("mail");
email.addEventListener("keyup", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, darling!");
} else {
email.setCustomValidity("");
}
});
/* -------------------------------------------------- */
Web Components
/* -------------------------------------------------- */
Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use new or still-developing standard browser capabilities.
Sometimes there is some confusion regarding Web Components and Google Polymer. Polymer is a framework that is based on Web Components technologies. You can make and use Web Components without Polymer.
Web Components are not fully implemented in all browsers yet, and so to use them right now in most browsers (January 2015) you will probably need to use polyfills to fill in the gaps in browser coverage. Polyfills are available in the Google Polymer project. To find out which browsers implement Web Components, see Are We Componentized Yet?
Custom Elements
HTML Templates
Shadow DOM
HTML Imports
/* -------------------------------------------------- */
Canvas
/* -------------------------------------------------- */
Sceen coordinate system
Images are loaded asynchronously
<canvas id="c" width="200" height="200"></canvas>
<script>
var c = document.querySelector("#c");
var ctx = c.getContext("2d");
var image = new Image();
image.onload = function() {
console.log("Loaded image");
ctx.drawImage(image, 0, 0, c.width, c.height);
}
image.src = "picture.png";
</script>
/* -------------------------------------------------- */
Async JavaScript
/* -------------------------------------------------- */
<script src="analytics.js" async></script>
Does not block DOM construction!
Does not block CSSOM!
We use async when JS does not affect the critical rendering path.
Alternative is to use the onload event.
/* -------------------------------------------------- */
General Strategies and CRP Diagrams
/* -------------------------------------------------- */
Minify, Compress, Cache
HTML, CSS, JavaScript
Minimizer use of render blocking resources (CSS)
Use mmedia queries on <link> to unblock rendering
Inline CSS
Minimize use of parser blocking resources (JS)
Defer JavaScript execution
Use async attribute on <script>
Buckets:
Reduce the amount of data sent, minimize bytes
Reduce critical resources (CSS & JS)
Shorten CRP length
/* -------------------------------------------------- */
/* -------------------------------------------------- */