HELLO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081194/hand.gif)
Illustrations by Burnt Creative
Mandy MICHAEL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081163/ball.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081175/Squiggle1-static.png)
@mandy_kerr
Front End Developer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081282/clouded_mind.jpg)
Why are we talking html ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5068203/Squiggle1.gif)
Is there any value in people who cannot write JavaScript?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069724/line.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081288/face-plant.jpg)
THERE are
LOTS OF
OPINIONS
ON THE
MATTER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069714/cross.gif)
When every website has perfect, semantic, accessible HTML, that works on every device & browser, then you can tell me that HTML IS not valuablE
“
”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5068203/Squiggle1.gif)
HTML
CSS
JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081271/rainbowface-43-trans.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081277/heart-temp.gif)
Functional HTML
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069724/line.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069724/line.gif)
I'm JUST MAKING
IT FUNCTIONAL RIGHT NOW
“
”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069714/cross.gif)
Making THiNGs Pretty
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5068203/Squiggle1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081308/pretty.jpg)
“
”
functional
adjective
func·tion·al
\ ˈfəŋ(k)-shnəl, -shən-ᵊl \
: designed to be practical and useful, rather than attractive.
: working properly
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5069724/line.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081346/Screen_Shot_2018-07-03_at_1.01.39_AM.png)
Voice
SEARCH
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081349/Screen_Shot_2018-07-03_at_1.03.28_AM.png)
APPS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081352/Screen_Shot_2018-07-03_at_1.04.34_AM.png)
BROWSERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081353/Screen_Shot_2018-07-03_at_1.06.00_AM.png)
HOW THE BROWSER READS HTML
[[[STUFF HERE]]]
TYPESCRIPT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5068203/Squiggle1.gif)
const interface person {
name: string
age: number
likesBatman: boolean
}
We tell the content what we expect it to be
<header>
</header>
<div>
</div>
const interface person {
name: any
age: any
likesBatman: any
}
If you wanted to build for people and the long term, then simple, structural, semantic HTML was best—each element deployed for its intended purpose. Don’t use a div when you mean a 'p'
“
”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5068203/Squiggle1.gif)
Jeffery Zeldman
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081376/busyhands_full.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/33153/images/5081346/Screen_Shot_2018-07-03_at_1.01.39_AM.png)
Voice
Functional HTML
By Mandy Michael
Functional HTML
- 498