<noscript> The most useless tag of them all </noscript>

A presentation at Amsterdam HTML & CSS Meetup in June 2016 in Amsterdam, Netherlands by Niels Leenheer

Slide 1

Slide 1

<noscript> The most useless tag of them all </noscript> CSS Day 2016 – June 16th

Slide 2

Slide 2

your name here:

Slide 3

Slide 3

the idea

Slide 4

Slide 4

<noscript>

Slide 5

Slide 5

<noscript> The most useless tag of them all </noscript>

Slide 6

Slide 6

HTML is special. Unlike many other languages the browser won’t show an error message when you make a mistake. Sure, that makes it easy to write bad code, but it also allows HTML to be both backwards and future compatible. It allowed the HTML5 specification to extend the existing form field types. It allowed the RICG to create the <picture> element. And it forms the basis of Web Components because it makes custom elements possible. And most importantly, it allows the <noscript> tag, which by definition does absolutely nothing. This talk will explain the concepts behind graceful degradation, progressive enhancement and feature detection, and focus on how to solve practical problems with these concepts.

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

resilience

Slide 22

Slide 22

HTML is both backwards and 
 future compatible

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

<HEADER> <TITLE> The World Wide Web project </TITLE>

<NEXTID

N= "55"

</HEADER> <BODY> <H1> World Wide Web </H1> The WorldWideWeb (W3) 
 is a wide-area 
 <A NAME= 0 HREF= "WhatIs.html" >

hypermedia </A> information retrieval initiative aiming to give universal access to a large universe of documents.

<P>

Everything there is online about W3 is linked directly or indirectly to this document, including an <A

Slide 26

Slide 26

<nextid n="55">

Slide 27

Slide 27

Slide 28

Slide 28

<nextid n="55">

Slide 29

Slide 29

<nextid n="55">

Slide 30

Slide 30

<header> 
 <title>…</title> 
 </header>

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

<header> 
 <title>…</title> 
 </header>

Slide 34

Slide 34

<picture> 
 <source srcset='cat.jpg , cat@2x.jpg 2x'> 
 <img src='catastrophe.jpg'> 
 </picture>

Slide 35

Slide 35

<picture> 
 <source srcset='cat.jpg, cat@2x.jpg 2x'> 
 <img src='catastrophe.jpg'> 
 </picture>

Slide 36

Slide 36

<picture> 
 <source srcset='cat.jpg, cat@2x.jpg 2x'> 
 <img src='catastrophe.jpg'> 
 </picture>

Slide 37

Slide 37

<noscript> 
 What is this, 1995? Take a chill pill! 
 Enable your JavaScript! Booyah! 
 </noscript>

Slide 38

Slide 38

<noscript> 
 What is this, 1995? Take a chill pill! 
 Enable your JavaScript! Booyah! 
 </noscript>

Slide 39

Slide 39

<script> 
 confirm( 
 'You will lose unsaved changes ' + 
 'if you cancel, is this OK?' 
 ); 
 </script>

Slide 40

Slide 40

<script> 
 confirm( 
 'You will lose unsaved changes ' + 
 'if you cancel, is this OK?' 
 ); 
 </script>

Slide 41

Slide 41

<script> 
 <!-- 
 confirm( 
 'You will lose unsaved changes ' + 
 'if you cancel, is this OK?' 
 ); 
 //--> 
 </script>

Slide 42

Slide 42

<script> 
 <!-- 
 confirm( 
 'You will lose unsaved changes ' + 
 'if you cancel, is this OK?' 
 ); 
 //--> 
 </script>

Slide 43

Slide 43

create polyfills for our favourite tags

Slide 44

Slide 44

<blink>

Slide 45

Slide 45

<blink> 
 my eyes! please make it stop! 
 </blink >

Slide 46

Slide 46

@keyframes

blink

{

0 %

{

visibility :

visible ;

}

50 %

{

visibility :

hidden ;

}

}

blink

{

animation

:

blink

1s steps( 1 ) infinite; }

Slide 47

Slide 47

<marquee>

Slide 48

Slide 48

supported by all browsers <marquee>

Slide 49

Slide 49

Slide 50

Slide 50

DOM HTML </>

Slide 51

Slide 51

DOM HTML </> tokenizer 
 & 
 tree builder

Slide 52

Slide 52

tokenizer

Slide 53

Slide 53

analyse html character by character

Slide 54

Slide 54

<a href="#">

Slide 55

Slide 55

<a href="#"> data state

Slide 56

Slide 56

< a href="#"> tag open state

Slide 57

Slide 57

< a href="#"> tag name state

Slide 58

Slide 58

< a href="#"> before attribute name state

Slide 59

Slide 59

< a

h ref="#"> attribute name state

Slide 60

Slide 60

< a

hr ef="#"> attribute name state

Slide 61

Slide 61

< a

hre f="#"> attribute name state

Slide 62

Slide 62

< a

href ="#"> attribute name state

Slide 63

Slide 63

< a

href

"#"> before attribute value state

Slide 64

Slide 64

< a

href =" #"> attribute value (double-quoted) state

Slide 65

Slide 65

< a

href ="

"> attribute value (double-quoted) state

Slide 66

Slide 66

< a

href ="

"

after attribute value quoted state

Slide 67

Slide 67

< a

href ="

"> data state

Slide 68

Slide 68

< a

href ="

"> tag name attribute name attribute value

Slide 69

Slide 69

{ 
 type: 'tag open'

name: ' a', attributes: [

{

  name: 'href'

, value: '#'

} 
 ] } <a href="#">

Slide 70

Slide 70

Data state –

Character reference in data state –

RCDATA state –

Character reference in RCDATA state

RAWTEXT state –

Script data state –

PLAINTEXT state –

Tag open state –

End tag open state –

Tag name state –

RCDATA less-than sign state –

RCDATA end tag open state –

RCDATA end tag name state –

RAWTEXT less-than sign state –

RAWTEXT end tag open state –

RAWTEXT end tag name state –

Script data less-than sign state –

Script data end tag open state –

Script data end tag name state –

Script data escape start state –

Script data escape start dash state –

Script data escaped state –

Script data escaped dash state –

Script data escaped dash dash state –

Script data escaped less-than sign state –

Script data escaped end tag open state –

Script data escaped end tag name state –

Script data double escape start state –

Script data double escaped state –

Script data double escaped dash state –

Script data double escaped dash dash state –

Script data double escaped less-than sign state –

Script data double escape end state –

Before attribute name state –

Attribute name state –

After attribute name state –

Before attribute value state –

Attribute value (double-quoted) state –

Attribute value (single-quoted) state –

Attribute value (unquoted) state –

Character reference in attribute value state –

After attribute value (quoted) state –

Self-closing start tag state –

Bogus comment state –

Markup declaration open state –

Comment start state –

Comment start dash state –

Comment state –

Comment end dash state –

Comment end state –

Comment end bang state –

DOCTYPE state –

Before DOCTYPE name state –

DOCTYPE name state –

After DOCTYPE name state –

After DOCTYPE public keyword state –

Before DOCTYPE public identifier state –

DOCTYPE public identifier (double-quoted) state –

DOCTYPE public identifier (single-quoted) state –

After DOCTYPE public identifier state –

Between DOCTYPE public and system identifiers state –

After DOCTYPE system keyword state –

Before DOCTYPE system identifier state –

DOCTYPE system identifier (double-quoted) state –

DOCTYPE system identifier (single- quoted) state –

After DOCTYPE system identifier state –

Bogus DOCTYPE state –

CDATA section state

Slide 71

Slide 71

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

<a<a<a<a<a> 
 this is a tag! 
 </a<a<a<a<a>

Slide 76

Slide 76

<u ʍ op- ǝ pısdn> 


ƃɐʇ

ɐ sı sı ɥʇ
 </u ʍ op- ǝ pısdn>

Slide 77

Slide 77

Slide 78

Slide 78

<c( ╯ ° □ ° ‚ ╯ —  ┻━┻


 this really is a tag too! 
 </c( ╯ ° □ ° ‚ ╯ —  ┻━┻

Slide 79

Slide 79

<a   href="#"> 
 and this one too! 
 </a>

Slide 80

Slide 80

<a   href="#"> 
 and this one too! 
 </a>

Slide 81

Slide 81

Slide 82

Slide 82

<a   href="#"> 
 and this one too! 
 </a>

Slide 83

Slide 83

<a   href="#"> 
 and this one too! 
 </a>

Slide 84

Slide 84

<a   href="#"> 
 and this one too! 
 </a>

Slide 85

Slide 85

<a   href="#"> 
 and this one too! 
 </a   href="#">

Slide 86

Slide 86

find ~ -type f -name '*.html' -print0 | 
 xargs -0 -L1 perl -C -p -i -e 's/<a h/<a\x { 2007 } h /g'

Slide 87

Slide 87

find ~ -type f -name '*.html' -print0 | 


xargs -0 -L1 perl -C -p -i -e 's/<a /<a\x { 2007 } /g'

Slide 88

Slide 88

Slide 89

Slide 89

<i-

unicode</i-

? ?

Slide 90

Slide 90

<i- ❤

unicode</ i- ❤

Slide 91

Slide 91

<i- ❤

HTML </i- ❤

i- ❤ :before

{

content :

'I ❤ ' ; } I

HTML

Slide 92

Slide 92

<is- "

X HTML </is- "

is- " :after

{

content :

' = " ' ; }

XHTML =

"

Slide 93

Slide 93

<dangerous>

Slide 94

Slide 94

Slide 95

Slide 95

custom elements custom dom interface for your own element receive events when an element is 
 created, attached or detached, 
 and when attributes are changed

Slide 96

Slide 96

Slide 97

Slide 97

<dangerous>

Slide 98

Slide 98

<not allowed>

Slide 99

Slide 99

<completely- safe>

Slide 100

Slide 100

<this-is-

Slide 101

Slide 101

Slide 102

Slide 102

A document.createElement('image ').tagName B IMAGE Something else

Slide 103

Slide 103

document.createElement('image ').tagName A B IMAGE Something else

Slide 104

Slide 104

d = document.createElement('div'); 
 d.innerHTML = '<image>'; 
 d.firstChild .tagName A B IMAGE Something else

Slide 105

Slide 105

d = document.createElement('div'); 
 d.innerHTML = '<image>'; 
 d.firstChild .tagName A B IMAGE Something else

Slide 106

Slide 106

tree builder

Slide 107

Slide 107

<a href="#"> # </a>

Slide 108

Slide 108

{ 
 type: 'tag open'

name: ' a', attributes: [

{

  name: 'href'

, value: '#'

} 
 ] } { 
 type: 'tag close'

name: ' a' } { 
 type: 'character'

value: '

' }

Slide 109

Slide 109

HTMLAnchorElement Text :

HTMLHtmlElement

HTMLBodyElement

HTMLHeadElement

Slide 110

Slide 110

creating missing elements

Slide 111

Slide 111

initial insertion mode <a href="#">

</a>

Slide 112

Slide 112

before html insertion mode <a href="#">

</a>

Slide 113

Slide 113

HTMLHtmlElement before head insertion mode <a href="#">

</a>

Slide 114

Slide 114

HTMLHtmlElement HTMLHeadElement in head insertion mode <a href="#">

</a>

Slide 115

Slide 115

HTMLHtmlElement HTMLHeadElement after head insertion mode <a href="#">

</a>

Slide 116

Slide 116

HTMLHtmlElement HTMLBodyElement HTMLHeadElement in body insertion mode <a href="#">

</a>

Slide 117

Slide 117

HTMLAnchorElement HTMLHtmlElement HTMLBodyElement HTMLHeadElement in body insertion mode <a href="#">

</a>

Slide 118

Slide 118

HTMLAnchorElement HTMLHtmlElement HTMLBodyElement HTMLHeadElement in body insertion mode Text :

<a href="#">

</a>

Slide 119

Slide 119

HTMLAnchorElement HTMLHtmlElement HTMLBodyElement HTMLHeadElement in body insertion mode Text :

<a href="#">

</a>

Slide 120

Slide 120

HTMLAnchorElement HTMLHtmlElement HTMLBodyElement HTMLHeadElement Text :

<a href="#">

</a>

Slide 121

Slide 121

Slide 122

Slide 122

fixing mistakes

Slide 123

Slide 123

<b> 1 <i> 2 </b> 3 </i>

Slide 124

Slide 124

Slide 125

Slide 125

<b> 1 <i> 2 </b> 3 </i>

Slide 126

Slide 126

<b> 1 <i> 2 </b> 3 </i> A C B 3


 Bold Italic 3


 Italic 3


 Regular

Slide 127

Slide 127

<b> 1 <i> 2 </b> 3 </i> HTMLBodyElement

Slide 128

Slide 128

<b> 1 <i> 2 </b> 3 </i> HTMLElement :

b HTMLBodyElement

Slide 129

Slide 129

<b> 1 <i> 2 </b> 3 </i> Text : 1 HTMLElement :

b HTMLBodyElement

Slide 130

Slide 130

<b> 1 <i> 2 </b> 3 </i> HTMLElement :

i HTMLElement :

b HTMLBodyElement Text : 1

Slide 131

Slide 131

<b> 1 <i> 2 </b> 3 </i> HTMLElement :

i HTMLElement :

b HTMLBodyElement Text : 1 Text : 2

Slide 132

Slide 132

<b> 1 <i> 2

</b> 3 </i> HTMLElement :

i HTMLElement :

b HTMLBodyElement Text : 1 Text : 2

Slide 133

Slide 133

<b> 1 <i> 2

</b> 3 </i> HTMLElement :

i HTMLElement :

b HTMLBodyElement Text : 1 Text : 2

Slide 134

Slide 134

<b> 1 <i> 2 </b> 3 </i> HTMLElement :

i HTMLElement :

b HTMLBodyElement Text : 1 Text : 2

Slide 135

Slide 135

<b> 1 <i> 2 </b> 3

</i> HTMLElement :

b HTMLElement :

i HTMLElement :

i HTMLBodyElement Text : 1 Text : 3 Text : 2

Slide 136

Slide 136

<b> 1 <i> 2 </b> 3 </i> HTMLElement :

b HTMLElement :

i HTMLElement :

i HTMLBodyElement Text : 1 Text : 3 Text : 2

Slide 137

Slide 137

HTMLElement :

b HTMLElement :

i HTMLElement :

i <b> 1 <i> 2 </b> 3 </i> HTMLBodyElement Text : 1 Text : 3 Text : 2

Slide 138

Slide 138

<b> 1 <i> 2 </b> 3 </i> A C B 3


 Bold Italic 3


 Italic 3


 Regular

Slide 139

Slide 139

<b> 1 <i> 2 </b> 3 </i> A C 3


 Bold Italic 3


 Italic 3


 Regular B

Slide 140

Slide 140

aside

Slide 141

Slide 141

HTMLElement

Slide 142

Slide 142

HTMLElement <b> <u> <code> <var> <kbd> <samp> <sub> <rtc> <i> <mark> <ruby> <rb> <rt> <rp> <bdi> <bdo> <wbr>

Slide 143

Slide 143

Slide 144

Slide 144

Slide 145

Slide 145

Slide 146

Slide 146

Slide 147

Slide 147

Slide 148

Slide 148

validation

Slide 149

Slide 149

Slide 150

Slide 150

Slide 151

Slide 151

<DD> A summary of the history of the project. <DT><A

NAME= 37

HREF= "Helping.html"

How can I help </A> ?

<DD> If you would like to support the web.. <DT><A

NAME= 48

HREF= ". . / R E A D M E . h t m l "

Getting code </A>

<DD> Getting the code by <A

NAME= 49

HREF= "LineMode/Defaults/Distribution.html"

anonymous FTP </A> , etc. </A>

</DL> </BODY>

Slide 152

Slide 152

Slide 153

Slide 153

noscript

Slide 154

Slide 154

all browsers support javascript

Slide 155

Slide 155

nobody disables javascript anymore

Slide 156

Slide 156

and if you do, stuff will break

Slide 157

Slide 157

deal with it

Slide 158

Slide 158

Slide 159

Slide 159

<noscript> <noscript> 
 … 
 </noscript> 
 </ noscript>

Slide 160

Slide 160

<noscript> 1 <noscript> 2 </noscript> 3 </noscript> HTMLBodyElement

Slide 161

Slide 161

<noscript> 1 <noscript> 2 </noscript> 3 </noscript> HTMLElement :

noscript HTMLBodyElement

Slide 162

Slide 162

<noscript> 1 <noscript> 2 </noscript> 3 </noscript> HTMLElement :

noscript Text : 1 HTMLBodyElement

Slide 163

Slide 163

<noscript> 1 <noscript> 2

</noscript>

3 </noscript> HTMLElement :

noscript Text : 1 <noscript> HTMLBodyElement

Slide 164

Slide 164

<noscript> 1 <noscript> 2 </noscript>

3 </noscript> HTMLElement :

noscript Text : 1 <noscript> 2 HTMLBodyElement

Slide 165

Slide 165

<noscript> 1 <noscript> 2 </noscript> 3 </noscript> HTMLElement :

noscript Text : 1 <noscript> 2 HTMLBodyElement

Slide 166

Slide 166

<noscript> 1 <noscript> 2 </noscript> 3

</noscript> Text : 3 HTMLElement :

noscript Text : 1 <noscript> 2 HTMLBodyElement

Slide 167

Slide 167

<noscript> 1 <noscript> 2 </noscript> 3 </noscript> Text : 3 HTMLElement :

noscript Text : 1 <noscript> 2 HTMLBodyElement

Slide 168

Slide 168

<noscript style='…'> 
 … 
 </ noscript>

Slide 169

Slide 169

no

Slide 170

Slide 170

<noscript> 
 <script> 
 … 
 </script> 
 </ noscript>

Slide 171

Slide 171

wtf?

Slide 172

Slide 172

@html5test

Slide 173

Slide 173

https://html5te.st/quiz #HTMLQuiz