-
Notifications
You must be signed in to change notification settings - Fork 16
/
HTML.language.txt
1727 lines (1484 loc) · 121 KB
/
HTML.language.txt
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
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
HTML
SUMMARY ==> #Interoperability browser hacks, quirks mode
#Syntax self-closing, optional [end] tags
#Categories metadata, flow (sectioning, containing, phrasing (including replaced)), interactive, palpable, transparent
#Formatting
#Header <meta>, viewport, format-detection
#Icons/titles titles, icons, pinned tabs, desktop shortcuts
#Embedding OpenGraph protocol (Facebook), Twitter, Google+
#Attributes HTML vs IDL, data-ATTR
#Selection class, id
#i18n <meta>, lang, hreflang, dir, <bdo>, <ruby>
#Sectioning top <!DOCTYPE>, <html>, <head>, <body>
#Sectioning upper <div>, <header|main|footer|aside|figure|figcaption>, <section|article|nav>, <blockquote|address>
#Sectioning lower <h*>, <p>, <pre>, <ol|ul|li>, <dl|dt|dd>
#Phrasing <span>, <strong|em|i|b|mark>, <ins|del|s|u>, <code|kbd|samp|var>, <q|cite|abbr|dfn>, <data|time>, <sub|sup|small>, <br|wbr|hr>
#Links <base>, <link> <a>, <map|area>
#Forms autofill|autocomplete, contenteditable, validation, <form>,
# <input type="text|password|email|tel|url|search|checkbox|radio|file|button|hidden|submit|image|reset|range">,
# <button type="button|submit|reset">, <texarea>, <select|optgroup|option>, <progress>, <label>, <fieldset|legend>
#Table <table>, <caption>, <thead|tbody|tfoot>, <tr|th>, <colgroup|col>
#Embedded <iframe>, <object|param>
#Images <img>, <picture|source>
#Media <audio|video|source>, <track>
#Vector <svg>, <canvas>
/=+===============================+=\
/ : : \
)==: GENERAL :==(
\ :_______________________________: /
\=+===============================+=/
STANDARDS ==> #W3C for most (5.1 recommendation, 5.2 working draft)
#But WHATWG (fork) has a spec as well
XHTML ==> #Follows HTML5 but:
# - MIME "application/[xhtml+]xml" instead of "text/html"
# - more restrictive
# - can be parsed as XML
#Polyglot: XHTML HTML-compatible
#Not documented here
DESIGN PRINCIPLES ==> #Meant for:
# - content structure (not presentation)
# - end-users:
# - first (before developers)
# - all of them: a11y, i18n
# - widely varying user agents:
# - support|reuse existing content|practices
# - degrade gracefully
# - clearly defined behavior (as opposed to implementation-specific)
# - media independence
/=+===============================+=\
/ : : \
)==: INTEROPERABILITY :==(
\ :_______________________________: /
\=+===============================+=/
BROWSER COMPTABILITY ==> #Desktop:
# - Chrome 57, Opera 43
# - Safari 10.0
# - IE 11
# - Edge 14
# - Firefox 52
#Mobile/tablet:
# - Chrome Mobile 57, Android browser 56, Opera Mobile 41
# - Safari Mobile 10.2
# - UC browser 11.4
CHECKING BROWSER SUPPORT ==> # - caniuse
# - Firefox (and others):
# - https://platform-status.mozilla.org/
# - MDN
# - IE: https://msdn.microsoft.com/en-us/library/hh772374
# - Edge:
# - https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/
# - https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
# - Safari: https://webkit.org/status/
# - Chrome: http://www.chromestatus.com/features/
# - https://platform.html5.org/
PROGRESSIVE ENHANCEMENT ==> #See a11y doc
BROWSER HACKS ==> #Syntax in HTML/CSS/JavaScript which only works in specific browsers/versions
#Goal is to target specific browsers
#To avoid
#See list online
QUIRKS MODE ==> #Rendering mode for older websites.
#Often triggered by browsers according to DOCTYPE
#WHATWG lists main changes in a spec.
DOCUMENT.compatMode #Can be:
# - "CSS1Compat": normal
# - "BackCompat": Quirks mode
/=+===============================+=\
/ : : \
)==: SYNTAX :==(
\ :_______________________________: /
\=+===============================+=/
<TAG attr[="value"]>...</TAG> #Not self-closing: tag has children
<TAG>/ #Self-closing: tag has no children nor end tag.
#Written <TAG> (preferred) or <TAG/>
OPTIONAL TAGS ==> #Are optional, but will be implicitely added: <html>, <head>, <body>, <tbody>
OPTIONAL END TAG ==> #Are:
# - Table-related: <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>
# - List-related: <option>, <optgroup> <li>, <dt>, <dd>, <colgroup>
# - <p>
<!-- COMMENT --> #Cannot include -- nor start with > or ->
CATEGORIES ==> #Content categories:
# - metadata: in <head>
# - flow|inline: in <body>
# - sectioning:
# - roots: <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>
# - content: <article>, <aside>, <nav>, <section>
# - containers:
# - thick: <div>, <dl|ol|ul>, <address|footer|header|main>, <menu>, <form>, <table>
# - headers: <h*>
# - thin: <p>, <pre>
# - phrasing:
# - script-related: <script>, <template>
# - replaced (external source influences display)
# - embedded: <audio|video>, <canvas>, <iframe>, <img|picture>, <math>, <svg>, <object>
# - form-related: <button|fieldset|input|label|object|output|select|textarea|img>
# - listed: have ELEM.form
# - submittable
# - resettable
# - labelable: can have <label>
# - others
#Also:
# - interactive: <a>, <img usemap>, <audio|video controls>, submittable form-related except <fieldset>, <details>, <iframe>, <label>
# - palpable: actual content, which excludes:
# - script-related, noscript
# - separators ([w]br)
# - datalist, del, dialog, picture, slot
#Children restriction:
# - none: marked <TAG>/
# - specific tags:
# - e.g. <colgroup> only allows <col>
# - noted in this doc
# - headers, thin containers and phrasing: can only contain phrasing
# - transparent:
# - allowed children are same as parent
# - i.e. can be suppressed with document still valid
# - i.e. embedded with no children, thin wrappers (<a>, <del|ins>), <slot>
/=+===============================+=\
/ : : \
)==: HTML FORMATTING :==(
\ :_______________________________: /
\=+===============================+=/
ABBREVIATIONS ==> # - CG: cssguidelin.es
# - GC: grvcoelho HTML style guide
# - JH: jQuery HTML style guide
# - MCG: mdo code guide
# - PG: primercss.io guidelines
# - WH: Wordpress HTML coding standards
ALTERNATIVES ==> #When there are competing recommandations, we use / instead of -, with the preferred choice on top
SUMMARY FORMATTING ==> # <!-- No <html|head|body|tbody> -->
#
# <!-- Lean markup. Follow visual order. -->
#
# <div class="BLOCK BLOCK__ELEMENT ANOTHERBLOCK">
# <input class="FIRST" name="SECOND" data-third="THIRD" src|for|value|href|type="checkbox" checked title="FIFTH" role="SIXTH">
# <div>
# <p|li|option>Text<a>URL<a/>Text
# <p|li|option>Text<a>URL<a/>Text
# </div>
# </div>
#
# <div class="BLOCK"></div>
#
#
#
#
#
# <!-- Another section -->
# <div class="BLOCK"></div>
NEWLINES ==> # - newlines between <TAG>:
# - none between sibling inline elements (GS)
# - one between related (GS CG)
# - two between loosely related (GS CG)
# - five between sections (CG)
# - newline before <br>
INDENT ==> # - width:
# / 2 spaces (PG GS)
# / tab (JH WH)
# - do not indent <html|body|script|style> children (JH)
# - indent attributes:
# / do not indent
# / indent each on a newline
SPACES ==> # - no trailing whitespace (GS JH)
STRUCTURE ==> # - should follow visual order (PG)
# - lean markup (MCG PG JH):
# - avoid wrapping a tag to only add a class
# - i.e. <TAG class="CLASS" ...> instead of <TAG2 class="CLASS"><TAG ...></TAG2
# - avoid HTML in JavaScript (MCG)
TAGS ==> # - <tag> lowercase (GS JH WH)
# - self-closing tags:
# / <TAG> (MCG PG GS JH)
# / <TAG /> (WH)
# - optional tags (e.g. <html|head|body|tbody>):
# / omit (GS)
# / keep (JH)
# - optional end tags (e.g. <p|li|option>):
# / omit (GS)
# / keep (JH)
ATTRIBUTES ==> # - case:
# - lowercase name
# - lowercase attribute value, if enum
# - order: class, id|name, data-*, src|for|type|href|value, title|alt, role|aria-* (MCG)
# - boolean attribute:
# / checked (MCG PG)
# / checked="checked" (WH)
# - omit optional attributes (JH)
# - use "" (PG GS JH WH)
# - classes: one space between related classes, two spaces otherwise (CG)
COMMENTS ==> # - use <!-- TODO: ... --> (GS)
# - newlines around <!-- --> if multilines, and no indentation (JH)
# - space around <!-- --> (JH)
# - newline before comment (JH)
# - sentence case (JH)
OTHERS ==> # - do not use entity references, except for & < > " (GS)
/=+===============================+=\
/ : : \
)==: HEADER :==(
\ :_______________________________: /
\=+===============================+=/
<meta name="STR" content="STR">/ #Anything
<meta name="viewport" content="WORD, ...">/ #See CSS doc
<meta name="format-detection" content="STR">/ #See tel URI scheme doc
NOT USED A LOT ==> #The following tags are not used a lot (if at all) by SEO or other tools
<meta>
name="generator" content="STR" #Generated by a tool
name="subject" content="STR" #Short description of site-wide content
name="abstract" content="STR" #<10-words description of site-wide content (for academic primarly)
name="rating" content="STR" #STR can be "Safe For Kids", "14 Years", "General", "Mature", "Restricted"
/=+===============================+=\
/ : : \
)==: ICONS/TITLE :==(
\ :_______________________________: /
\=+===============================+=/
<title> #Tab title, containing only text. No more than 100 chars
#Shown on browser tab
#Shown on search results (see SEO doc)
TITLE.text #Like TITLE.textContent
DOCUMENT.title #<title>.textContent
<meta>/
name="application-name" content="STR" #Like <title>, but site-wide
FAVICON ==> #Used not only on tabs, but also on desktop shortcuts, booksmarks, links bar.
#Should use:
# - DOMAIN/favicon.ico:
# - only one file for each size, but does not support transparency
# - requested by many tools, so should be defined
# - SIZE: 16x16, 32x32, 48x48
# - <link rel="icon" href="FILE" sizes="SIZE">/
# - formats:
# - ICO: Safari will prefer ICO over PNG if both available as <link>, so prefer putting at DOMAIN/favicon.io instead
# - JPG|GIF: does not support transparency, so prefer PNG|SVG
# - SVG: perfectly scale, but only supported by Firefox (with MIME 'image/svg+xml'), so prefer PNG for the moment
# - PNG: SIZE: 16x16, 32x32, 48x48, 62x62, 192x192
# - type attribute useless if Content-Type [S] correctly set
PINNED TAB ([MOBILE] SAFARI) ==> #
<link>/
rel="mask-icon" href="FILE.svg" color="#HEX" #Icon and background color. FILE should be only black color with transparency
DESKTOP SHORCUTS (IOS) ==> #
<link>/
rel="apple-touch-icon[-precomposed]" #Icon. SIZE: 76, 120, 152, 180
href="FILE-SIZE.png" #Unless "precomposed", iOS adds rounded corners, shadow and shine
<meta>/
name="apple-mobile-web-app-title"
content="TITLE" #Title. (def: <title>)
DESKTOP SHORTCURS (IE11) OR PINNED PAGE ==> #A pinned page is a Windows toolbar shortcut (as opposed to desktop shortcut)
<meta>/
name="msapplication-square|wideSIZElogo" #Icon: use <wide> when not square (i.e. 310x150)
content="FILE.png"> #SIZE: 70x70, 150x150, 310x150, 310x310
name="msapplication-TileImage"
content="FILE-SIZE.png" #Icon (IE10). SIZE: 144
name="msapplication-TileColor" content="#HEX" #Background color
name="msapplication-navbutton-color"
content="#HEX" #Back|Forward buttons colors
name="application-name" content="STR" #Title
name="msapplication-tooltip" content="TOOLTP">#When hovering title
name="msapplication-starturl" content="URI"> #URL when clicking on it
name="msapplication-window"
content="width=NUM,height=NUM2" #Window size when creating new window from click (min: 800x600)
name="msapplication-task" content="VAR=VL,..."#Creates subtasks when right-clicking on the pinned page
#VAR:
# - name TITLE
# - action-uri URI
# - icon-uri FILE.png
name="msapplication-task-separator"
content="1" #Adds an horizontal line between subtasks
/=+===============================+=\
/ : : \
)==: EMBEDDING :==(
\ :_______________________________: /
\=+===============================+=/
OPEN GRAPH PROTOCOL ==> #When user posts a URL, Facebook|Twitter fetches those metadata to provide rich snippets.
#Can also use some libraries to parse this.
#Types:
# - DATE: 'YYYY-MM-DD[ HH:MM]'
# - ARR: use tag several times
# - TYPE (e.g. MUSIC.ALBUM): URL to an HTML file containing <meta> for that type
#Can use online validators
<meta>/
property="og:url" content="URI" #Like <link rel="canonical">/
property="og:type" content="TYPE" #Type to interpret other <meta property="og:*">.
#The ones below are for any TYPE
property="og:site_name" content="NAME" #Like <meta name="application-name">/
property="og:title" content="TITLE" #Like <title>
property="og:determiner" content="STR" #Appears before title, among "" (def), "an", "a", "the" or "auto"
property="og:description" content="STR" #Like <meta name="description">/
property="og:audio" content="FILE" #Like og:audio:url
property="og:video" content="FILE" #Like og:video:url
property="og:image" content="THUMBNAIL" #Like og:image:url
property="og:image|audio|video:[secure_]url"
content="FILE" #
property="og:image|audio|video:type"
content="MIME" #
property="og:image|video:width|height"
content="NUM" #
property="og:locale[:alternate]"
content="LANG_ARR" #Use "alternate" for item with index > 1
property="og:type" content="website" #Webpage (no specific properties)
property="og:type" content="music.song" #
property="music:duration" content="UINT" #In seconds
property="music:album"
content="MUSIC.ALBUM_ARR" #
property="music:album:disc|track"
content="UINT_ARR" #
property="og:type" content="music.song|album" #
property="music:musician" content="PROFIL_ARR"#
property="og:type" content="music.album" #
property="music:release_date" content="DATE" #
property="og:type"
content="music.album|playlist" #
property="music:song" content="MUSIC.SONG" #
property="music:song:disc|track"
content="INT_ARR" #
property="og:type"
content="music.playlist|radio_station" #
property="music:creator" content="PROFILE" #
property="og:type"
content="video.movie|tv_show|episode|other" #
property="video:actor|director|writer"
content="PROFILE" #
property="video:actor:role" content="STR" #
property="video:duration" content="UINT" #
property="video:release_date" content="DATE" #
property="video:tag" content="STR_ARR" #
property="og:type" content="video.episode" #
property="video:series" content="MUSC.TV_SHOW"#
property="og:type" content="article" #
property="article:published|modified|
expiration_time" content="DATE" #
property="article:author" content="PROFIL_ARR"#
property="article:section" content="STR" #
property="article:tag" content="STR_ARR" #
property="og:type" content="book" #
property="book:author" content="PROFILE_ARR" #
property="book:isbn" content="STR" #
property="book:release_date" content="DATE" #
property="book:tag" content="STR_ARR" #
property="og:type" content="profile" #
property="first|last_name" content="STR" #
property="username" content="STR" #
property="gender" content="male|female" #
TWITTER ==> #To create rich snippet when users posts URL
#But Twitter also supports OpenGraph Protocol (so do not use properties where OGP equivalent exists)
#Can use online validators
<meta>/
name="twitter:card" content="TYPE" #Similar to <meta property="og:type">/
#Properties below are global
name="twitter:site" content="@ACCOUNT" #
name="twitter:creator" content="@ACCOUNT" #
name="twitter:url" content="URI" #Like <meta property="og:url">/
name="twitter:title" content="STR" #Like <meta property="og:title">/
name="twitter:description" content="STR" #Like <meta property="og:description">/
name="twitter:image" content="THUMBNAIL" #Like <meta property="og:image">/
name="twitter:image:alt" content="STR" #
name="twitter:card"
content="summary[_large_image]" #General website (in big size)
name="twitter:card" content="photo" #Image
name="twitter:image:width|height"
content="THUMBNAIL" #Like <meta property="og:image:width|height">/
name="twitter:card" content="gallery" #Carousel
name="twitter:image0-3" content="THUMBNAIL" #
name="twitter:card" content="player" #Video. Needs to be approved first (takes few days). See online for props
name="twitter:card" content="app" #Mobile app
name="twitter:app:country" content="COUNTRY" #
name="twitter:app:name:PLATFORM" content="STR"#PLATFORM: iphone|ipad|googleplay
name="twitter:app:id:PLATFORM" content="NUM" #
name="twitter:app:url:PLATFORM" content="URI" #
SCHEMA.ORG ==> #Used by Google+ to create rich snippet when users post URL
<meta>/
itemprop="name|description|image" content="*" #Similar to <meta property="og:title|description|image">/
<meta>/
name="apple-itunes-app" content="VAR=VAL,..." #Adds a box on top of page inviting people to download iOS app
#VAR:
# - app-id NUM
# - affiliate-data STR: for iTunes affiliates
# - app-argument URI: current URI, so that apps can use it
/=+===============================+=\
/ : : \
)==: DOM :==(
\ :_______________________________: /
\=+===============================+=/
LOADING|PARSING ORDER ==> #See DOM doc
HTMLElement #Child of ELEM, parent of all HTML tags.
HTMLTAGElement #HTMLELEM of <TAG>
#Only when there are IDL attributes on top of the HTML ones
#Sometimes called slightly differently
HTMLUnknownElement #HTMLELEM using a tagName not supported
HTMLCollection #HTMLELEM_ARR-like, with also HTMLCOLL.ID|NAME
/=+===============================+=\
/ : : \
)==: ATTRIBUTES :==(
\ :_______________________________: /
\=+===============================+=/
HTML VS IDL ATTRIBUTES ==> #The HTML attribute and JavaScript one (IDL attribute) are in sync but:
# - changing ELEM.onEvent does not change HTML
# - value|checked|selected (HTML) -> defaultValue|Checked|Selected (JavaScript)
# - value|checked|selected (JavaScript) does not have corresponding HTML attribute
# - some exist only in JavaScript
# - some are readonly in JavaScript
# - lowercase in HTML, camelcase in JavaScript
# - STR in HTML, any type in JavaScript
# - if empty in HTML, JavaScript might give default value
# - some name changes (to avoid reserved names): for -> htmlFor
ELEM.ATTR #IDL attributes
ELEM.attributes #HTML attributes as NAMEDNODEMAP (ARR-like of ATTRs, with also OBJ.ATTR 'VAL')
ELEM.getAttribute[Node]('ATTR')->'VAL'|ATTR #
ELEM.setAttribute[Node]('ATTR', 'VAL'|ATTR) #
ELEM.hasAttribute('ATTR')->BOOL #
ELEM.hasAttributes()->BOOL #
ELEM.removeAttribute[Node]('ATTR'|ATTR)[->ATTR] #HTML attributes
<any>
data-VAR="VAL" #Custom attribute:
# - VAR should start with namespace, e.g. data-myapp-myprop
# - [a-z-] (no uppercase)
ANY.dataset.VAR #Camelcased
/=+===============================+=\
/ : : \
)==: SELECTION :==(
\ :_______________________________: /
\=+===============================+=/
<any>
class="STR STR..." #Used for CSS|JavaScript selection
#Only [:alpha:][[:alnum:]-_].
HTMLELEM.className #'CLASS ...'
HTMLELEM.classList #DOMTOKENLIST
id="STR" #Same but must be unique. To avoid unless really need singleton.
DOMTOKENLIST #ARR-like
DOMTOKENLIST.add|remove('CLASS', ...) $#'WebReflection dom4.js' (1.8.3) (if multiple arguments)
DOMTOKENLIST.toggle('CLASS'[, BOOL2])->BOOL $#If BOOL2 true|false, is like add|remove() instead
$#'WebReflection dom4.js' (1.8.3) (if BOOL2 used)
DOMTOKENLIST.contains('CLASS')->BOOL #
DOMTOKENLIST.toString()->'CLASS ...' #
/=+===============================+=\
/ : : \
)==: I18N :==(
\ :_______________________________: /
\=+===============================+=/
<meta charset="utf-8">/ #Should be first in <head>
#Can also use (but optional with UTF-8):
# - �[00[00]]
# - &#NAME: HTML entity among a predefined set
#& < > = ' should always be escaped
DOCUMENT.characterSet #STR (e.g. 'UTF-8')
#Can be different than the one set by the document if user overrided it.
<any>
lang="STR" #Language code.
#Used by:
# - CSS: :lang(), hyphens, etc.
# - browser font selection
# - external tools: SEO, spellcheck, translation
# - a11y
#Should be used, and defined on <html>
[WORKER]NAVIGATOR.language #Language code of the browser UI
<a|area|link>
hreflang="STR" #Language code of document linked by href="URI".
<any>
dir="ltr|rtl|auto" #Text direction
DOCUMENT.dir #'ltr|rtl'
<bdo> #Phrasing content which should use dir="..."
<ruby> #Contains asian characters, meant to be enriched with Ruby annotations (i.e. latin|simpler alphabet pronunciation, placed on top|right of ideogram)
#Each character follows this order: character, opening parenthesis (<rp>), pronunciation (<rt>), closing parenthesis (<rp>)
#Parent of <rp>, <rt>
<rt> #Child must be pronunciation text
<rp> #Child must be parenthesis character
/=+===============================+=\
/ : : \
)==: SECTIONING TOP :==(
\ :_______________________________: /
\=+===============================+=/
<!DOCTYPE html>/
DOCUMENT.doctype #DOCUMENTTYPE. Readonly
DocumentType #NODE child.
DOCUMENTTYPE.name #Typically "html"
<html> #Should contain only <head> and <body>, in that order.
DOCUMENT.documentElement #HTML
<head> #
DOCUMENT.head #
<body> #
DOCUMENT.body #
/=+===============================+=\
/ : : \
)==: SECTIONING UPPER :==(
\ :_______________________________: /
\=+===============================+=/
<div> #Prefer other sectioning upper tags.
<header> #Beginning
<main> #Middle
##IE11: must manually define display: block in CSS
<footer> #End
<aside> #Not on document flow, but related (sidebars, glossary, ads, etc.)
<figure> #Not on document flow, self-contained (e.g. floating picture)
<figcaption> #Text inside <figure>. Only one per <figure>
<section> #Chapters, tabbed page, blocks, sections
<article> #Like <section> but more self-contained, from a list of similar items,
#e.g. blog post, comment, etc.
<nav> #Main purpose is to contain links
<blockquote> #Multiline quote
cite="URI" #Source
<address> #Postal address
/=+===============================+=\
/ : : \
)==: SECTIONING LOWER :==(
\ :_______________________________: /
\=+===============================+=/
<h1-h6> #Headings.
<p> #Generic
<pre> #Programming language content
<ol> #Ordered list (bullet point-like) of <li>.
#Can be nested.
start="NUM" #Starting index
<ul> #Same as <ol> but unordered
<li> #
value="NUM" #Index (only inside <ol>)
<dl> #Definition list, containing pairs of <dt> + <dd>
<dt> #Title followed by one or more <dd>
<dd> #Content
/=+===============================+=\
/ : : \
)==: PHRASING :==(
\ :_______________________________: /
\=+===============================+=/
<span> #Prefer other phrasing tag.
<strong> #Stressed as more important
<em> #Stressed as different content-wise
<i> #Stressed as different form-wise
<b> #Different style-wise
<mark> #Stressed as relevant to current context (e.g. currently searched keywords)
<ins|del> #New|removed content (document edits)
datetime="STR" #Change date
cite="URI" #URI explaining change
<s> #Outdated content (no document edits)
<u> #Wrong|mispelled content
<code> #Computer code
<kbd> #Command line input
<samp> #Command line output
<var> #Math|programming variable
<q> #Quote
cite="URI" #Source
<cite> #Reference
<abbr> #Abbreviation
title="STR" #Full name.
<dfn> #Term defined elsewhere
title="STR" #Defined term (def: textContent)
<data> $#Adds machine-readable metadata to phrasing content.
$#Unrecognized by some browsers, so cannot use DATA.value
value="STR" $#
<time> $#Adds date[time] metadata to phrasing content.
$#Unrecognized by some browsers, so cannot use TIME.datetime
datetime="DATE[TIME]" $#RFC 3339
<sub|sup> #Subscript|superscript
<small> #Small prints or side comments
<br>/ #Semantic line break. Avoid for style line breaks (use CSS instead)
<wbr>/ $#Optional word break.
$#Not supported by IE11 but degrades gracefully
$#Can also use (supported by all browsers):
$# - U+200B (zero-width space, ZWSP): same effect
$# - U+00AD (soft hyphen, ­): optional hyphen word break
<hr>/ #Semantic paragraph break.
/=+===============================+=\
/ : : \
)==: LINKS :==(
\ :_______________________________: /
\=+===============================+=/
<base>/ #Base for relative URIs (def: ".") and default target for following URIs.
#Only first <base> counts.
href="URI" #Can be relative|absolute
target="STR" #
<a|area|link>
href="URI" #
type="STR" #MIME type (semantic info)
rel="STR ..." #See HTTP doc
A|AREA|LINK.rel #"STR ..."
<link> #See HTTP doc
media="MEDIAQUERYLIST" #See CSS doc
integrity="ALGO-HASH ..." $#If content checksum does not match HASH, discard it with a network error.
$#Only useful if current document is trusted, i.e. only useful on third-party content (e.g. CDN)
$#Possible ALGO: sha256|384|512. Uses standard base64.
$#File cannot be served from filesystem (file:)
$#Not supported by IE nor [Mobile ]Safari, but degrades gracefully
<a> #Link
target="STR" #How to open link:
# - "_self" (def): same tab
# - "_blank": new tab
# - "_parent": parent iframe
# - "_top": top iframe
A.text #Same as A.textContent
A.protocol #
A.hostname #
A.port #
A.host #
A.pathname #
A.search #
A.hash #See URL in DOM doc
DOCUMENT.links #A|AREA_HTMLCOLL
<img|object> #
usemap="#MAP_NAME" #Use a <map>, i.e. transparent overlay
<map> #Can contain other things than <area>
MAP.areas #AREA_HTMLCOLL
MAP.images #IMG|OBJECT_HTMLCOLL
<area>/ #Hot-spot inside a <map>
shape="rect|circle|poly|default" #
coords="NUM..." #According to shape (in CSS pixels):
# - "rect|default" : left,top,right,bottom
# - "circle" : x,y,radius
# - "poly" : x1,y1,...,xn,yn
alt="STR" #Like <img>
target="STR" #
AREA.protocol #
AREA.hostname #
AREA.port #
AREA.host #
AREA.pathname #
AREA.search #
AREA.hash #Like <a>, A
<img> #
ismap #Adds '?NUM,NUM2' (pointer coordinates) to parent <a|area> URI when pressed
/=+===============================+=\
/ : : \
)==: FORM :==(
\ :_______________________________: /
\=+===============================+=/
AUTOFILL/AUTOCOMPLETE ==> #Browsers have different implementations:
# - what follows is Chrome-oriented, but should work on other browsers too
# - it also follows WHATWG (for autocomplete)
#Autocomplete (i.e. suggest as you type):
# - suggestions added when submitting any <form> (no user prompts)
# - suggestions reused:
# - accross domains
# - for any <control> using either:
# - same name="STR"
# - or same autocomplete="[section-ANYTHING] [shipping|billing] TYPE ..."
# - autocomplete can also be "off" or "on" (def)
# - not possible if type="hidden"
# - canonical autocomplete TYPE, name="STR", <control> type and value formats are documented below
# - recommended, but can use different <control> type or value format if needed
#Autofill (i.e. prefill):
# - add values to prefill when submitting <form>:
# - only for specific types of controls:
# - e.g. Chrome: login forms, addresses, credit card info
# - uses heuristics, e.g. login forms: <input type="text"> followed by <input type="password">
# - prompts user when page changes:
# - including reload or HISTORY.replaceState()
# - if <form action="URL">, when URL loads
# - prefill values:
# - on same page, same element, using heuristics (e.g. same name or place in DOM)
#History prefill:
# - control values are kept when going back|forth in history
# - does not persist after new tab or reload
#Will be prevented if:
# - <control disabled>
# - failing HTML validation
# - browser settings cleaning
# (autocomplete only)
# - type="password"
# - autocomplete="off"
# - if set on <form>, all <input> should also have autocomplete="off" as well
#Does not matter for autocomplete|autofill|prefill:
# - preventDefaut()
# - any <form> method works
CANONICAL AUTOCOMPLETE TYPES ==> #SUBTYPE is: home|work|mobile|fax|pager
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | AUTOCOMPLETE | TYPE | NAME | FORMAT | DESCRIPTION |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | email | email | email | | |
# | username | text | username | | |
# | new|current-password | password | password | | |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | language | text | language | BCP 47 | preferred language |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | name | text | name | | full name including prefixes |
# | given-name | text | firstname | | |
# | additional-name | text | middlename | | |
# | family-name | text | lastname | | |
# | honorific-prefix|suffix | text | | | e.g. Mr. or Jr. |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | nickname | text | | | |
# | bday | date | birthday | YYYY-MM-DD | like the three fields below |
# | bday-year | number | | YYYY | |
# | bday-month | number | | 1-12 | |
# | bday-day | number | | 1-31 | |
# | sex | text | gender | | |
# | tel | tel | phone | \+[[:digit:] ]+ | |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | organization-title | text | jobtitle | | |
# | organization | text | company | | |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | street-address | texarea | address | | |
# | address-line1|2|3 | text | address1|2|3 | | same as street-address but in one line each |
# | address-level4 | text | | | levels below district but above street |
# | address-level3 | text | | | district |
# | address-level2 | text | city | | |
# | address-level1 | text | state|region| | | |
# | | | proving|county| | |
# | postal-code | text | zip | | |
# | country[-name] | text | country | ISO-3166 | |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | url | url | url | | of the person|company|address related to other fields |
# | photo | url | photo | | of the person|company|address related to other fields |
# | SUBTYPE tel | tel | phone|mobile | \+[[:digit:] ]+ | e.g. +1 617 253 5702 |
# | SUBTYPE tel-country-code | text | country-code | | e.g. +1 |
# | SUBTYPE tel-national | text | | | tel minus country-code, e.g. 617 253 5702 |
# | SUBTYPE tel-area-code | text | area-code | | first part of tel-national, e.g. 617 |
# | SUBTYPE tel-local | text | | | second+third part of tel-national, e.g. 5235702 |
# | SUBTYPE tel-local-prefix | text | exchange | | second part of tel-national, e.g. 523 |
# | SUBTYPE tel-local-suffix | text | suffix | | third part of tel-national, e.g. 5702 |
# | SUBTYPE email | email | email | | for contact info, not login |
# | SUBTYPE impp | url | | | instant messaging |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
# | cc-[*-]name | text | ccname | | full|first|middle|last name for payment |
# | cc-number | text | cardnumber | [[:digit:]]+ | payment mean number (e.g. for credit cards) |
# | cc-exp | month | exp-date | YYYY-MM | payment mean expiration |
# | cc-exp-year | number | ccyear | YYYY | payment mean expiration |
# | cc-exp-month | number | ccmonth | 1-12 | payment mean expiration |
# | csc | text | cvc | [[:digit:]]+ | credit card (or payment mean) security code |
# | cc-type | text | card-type | | payment type |
# | transaction-currency | text | | ISO 4217 | for recurring payments |
# | transaction-amount | number | | FLOAT | for recurring payments |
# +--------------------------+----------+---------------+-----------------+-------------------------------------------------------+
<form|input|select|textarea>
autocomplete="..." #See above
#<input>: not for type="checkbox|radio|file|submit|reset|image"
$#<select|textarea>: not crossbrowser, but degrades gracefully
<any>
contenteditable="|true|false" #Make content editable by user, and all children tags.
HTMLELEM.contentEditable #'true|false|inherit'
HTMLELEM.isContentEditable #BOOL
<input|textarea|CONTENTEDITABLE|any>
spellcheck="true|false|" #Red line under wrong word, depending on lang attribute.
#Only works on INPUT|TEXTAREA|CONTENTEDITABLE but is inherited by descendants on <any>
#Can be:
# - "true" (def for TEXTAREA or contenteditable)
# - "false" (def for INPUT)
# - "": inherit
VALIDATION ==> #Prevents value update (both UI and IDL):
# - soft:
# - for: required|type|pattern
# - allow invalid values through, but updates validity
# - hard:
# - for: maxlength|min|max|step
# - does not let invalid through, so always valid
# - bug: maxlength let invalid values through when using JavaScript, and does not update validity
#Prevents form submission on submit event, i.e.:
# - when using UI, or SUBMIT.click()
# - not when using FORM.submit()
<control> #Means <input|textarea|select|button|fieldset|object|output>
CONTROL.validity #Returns VALIDITYSTATE
VALIDITYSTATE.valid #False if any other property is true
VALIDITYSTATE.typeMismatch #True if incorrect pattern (via default pattern in some <input>)
VALIDITYSTATE.patternMismatch #True if incorrect pattern (via CONTROL.pattern)
VALIDITYSTATE.tooLong #True if beyond CONTROL.maxlength
VALIDITYSTATE.rangeOverflow|Underflow #Same for CONTROL.max|min
VALIDITYSTATE.stepMismatch #Same for CONTROL.step
VALIDITYSTATE.customError #setCustomValidity() has been called
CONTROL.validationMessage #Current error message
CONTROL.setCustomValidity(STR) #Sets:
# - VALIDITYSTATE.customError: false if "", true otherwise
# - CONTROL.validationMessage: STR
CONTROL|FORM.checkValidity()->BOOL #Returns CONTROL|FORM.validity.valid
#If false:
# - fills CONTROL.validationMessage (automatically localized by browser)
# - fires CONTROL|FORM.oninvalid = FUNC(EVENT)
#Called on FORM:
# - automatically before submit event, and if false:
# - does not trigger submit event
# - does not submit form (if it was going to)
# - show validationMessage next to ELEM, unless invalid EVENT.preventDefault()
# - unless FORM.novalidate true
CONTROL.willValidate #True if checkValidity() will be called during submit
#Usually true, except e.g. if CONTROL.disabled true
<form>
novalidate #See above
<form> #Parent of <control>
#Don't nest.
action="URI" #Redirects current URI when the form is submitted:
method="post|get" # - unless EVENT.preventDefault()
enctype="TYPE" # - can do AJAX request instead in event handler
# - use METHOD:
# - GET: payload in query string
# - POST: payload in request body
# - using each <control name="VAR">, CONTROL.value VAL and TYPE:
# - "text/plain": see HTTP doc
# - "application/x-www-form-urlencoded" (def): see HTTP doc
# - "multipart/form-data; boundary=STR": see HTTP doc
# - <input type="file">:
# - with "multipart/form-data", use filename="FILE" and Content-Type: TYPE
# - with others, just send filename
FORM.enctype|encoding #Same thing
accept-charset="STR" #Charset in Content-Type [C]. Def is charset of the page (often UTF-8).
target="STR" #Like <a>
FORM.onsubmit = FUNC(EVENT) #Fired by:
# - clicking on <input|button type="submit">
# - enter key while focus inside the <form>
#Default browser action (cancelable): see above
FORM.submit() #Submits form.
#Does not fire submit event (use SUBMIT_INPUT.click() instead)
FORM.onreset = FUNC(EVENT) #Fired by:
# - clicking on <input|button type="reset">
# - FORM.reset() (sometimes)
#Default browser action (cancelable): reset controls
FORM.reset() #Fires reset event
FORM.elements #CONTROL_HTMLCOLL
FORM[UINT]
FORM.ID
FORM.length #Same as using FORM.elements
DOCUMENT.forms #FORM_HTMLCOLL
<control>
form="ID" #Def: parent <form>
##IE11: HTML attribute (not IDL) does not work
CONTROL|LABEL|LEGEND|OPTION.form #
<input>/ #Various <control>, depending on type="STR"
name="VAR" #
value="VAL" #Default value
INPUT.defaultValue #Default value
INPUT.value #Current value
disabled #
autofocus $#Gives focus as soon as in the DOM (not Safari Mobile)
type="text" #Single-line input (linebreaks are removed)
maxlength="NUM" #Max number of Unichars. Def: -1 (infinite)
size="NUM" #Size of box, in number of Unichars (similar to CSS 'ch') (def: 20)
placeholder="STR" #What to show when value empty
readonly #Like disabled, but user can still click it (but not modified).
type="password" #Like type="text" but doesn't show input
type="email|tel|url|search" #Like type="text" but semantically indicate content which can influence:
# - layout (e.g. "tel" gets input keyboard on iOS)