Functional HTML

A presentation at Web Directions Code 2018 in August 2018 in Melbourne VIC, Australia by Mandy Michael

Slide 1

Slide 1

HELLO Awesome illustrations by Burnt Toast Creative

Slide 2

Slide 2

@MANDY_KERR WHY ARE WE 
 TALKING HTML?

Slide 3

Slide 3

@MANDY_KERR HTML IS SIMPLE

Slide 4

Slide 4

@MANDY_KERR WE MAKE THE MISTAKE OF ASSUMING BECAUSE IT’S SIMPLE IT’S NOT VALUABLE

Slide 5

Slide 5

@MANDY_KERR IS THERE ANY VALUE IN PEOPLE WHO 
 CANNOT WRITE 
 JAVASCRIPT?

Slide 6

Slide 6

@MANDY_KERR THERE ARE 
 LOTS OF 
 OPINIONS ON THE MATTER

Slide 7

Slide 7

@MANDY_KERR HTML CSS JS

Slide 8

Slide 8

@MANDY_KERR FUNCTIONAL HTML

Slide 9

Slide 9

@MANDY_KERR I’M JUST MAKING IT FUNCTIONAL 
 RIGHT NOW ” “

Slide 10

Slide 10

@MANDY_KERR MAKING 
 THINGS 
 PRETTY

Slide 11

Slide 11

@MANDY_KERR : designed to be practical and useful, rather than attractive 
 : working properly FUNCTIONAL ADJECTIVE
FUNC·TION·AL

ˈ F ƏŊ (K)-SHN Ə L, -SH Ə N- ᵊ L \

Slide 12

Slide 12

@MANDY_KERR HOW THE BROWSER 
 INTERPRETS HTML

Slide 13

Slide 13

@MANDY_KERR

Slide 14

Slide 14

@MANDY_KERR

Slide 15

Slide 15

@MANDY_KERR

Slide 16

Slide 16

@MANDY_KERR < html

… < body

<

header

        <

h1

Some text </ h1

</ header


 
 < p

A paragraph… </ p

< ul

 <

li

A list item </ li

<

li

Another item </ li

</ ul

< p

More content… </ p

< hr

….

Slide 17

Slide 17

@MANDY_KERR WHY DOES THIS MATTER?

Slide 18

Slide 18

@MANDY_KERR TYPE

SCRIPT

Slide 19

Slide 19

@MANDY_KERR interface

dog {

name :

string

age :

number

isFluffy :

boolean }

Slide 20

Slide 20

@MANDY_KERR WE DETERMINE WHAT WE EXPECT THE CONTENT TO BE

Slide 21

Slide 21

@MANDY_KERR < html

< body

< header

< h1

Dogs: They are good </ h1

</ header

    <

main

< h2

Why are dogs good? </ h2

< p

All dogs are good, they are the goodest doggies. </ p

< figure

< img

href

"dog.png"

alt

"A golden retriever"

/>

< figcaption

Michaelangelo AKA "Jello" </ figcaption

</ figure

    </

main

</ body

</ html

Slide 22

Slide 22

@MANDY_KERR interface

dog {

name :

any

age :

any

isFluffy :

any }

Slide 23

Slide 23

@MANDY_KERR < html

< body

< div

< div

Dogs: They are good </ div

</ div

    <

div

< div

Why are dogs good? </ div

< p

All dogs are good, they are the goodest doggies. </ p

< div

< img

href

"dog.png"

alt

"A golden retriever"

/>

< div

Michaelangelo AKA "Jello" </ div

</ div

    </

div

</ body

</ html

Slide 24

Slide 24

@MANDY_KERR JUST <DIV> @MANDY_KERR

Slide 25

Slide 25

@MANDY_KERR SEMANTICS

Slide 26

Slide 26

@MANDY_KERR NOT EVERYONE INTERACTS 
 THE SAME

Slide 27

Slide 27

@MANDY_KERR ASSISTIVE SEARCH APPS BROWSER

Slide 28

Slide 28

@MANDY_KERR ASSITIVE 
 TECH

Slide 29

Slide 29

@MANDY_KERR ACCESSIBILITY TREE

Slide 30

Slide 30

@MANDY_KERR

Slide 31

Slide 31

@MANDY_KERR WHAT DOES IT SOUND LIKE?

Slide 32

Slide 32

@MANDY_KERR

Slide 33

Slide 33

@MANDY_KERR

Slide 34

Slide 34

@MANDY_KERR

Slide 35

Slide 35

@MANDY_KERR

Slide 36

Slide 36

@MANDY_KERR

Slide 37

Slide 37

@MANDY_KERR Don’t just use divs.

Slide 38

Slide 38

@MANDY_KERR …TO BUILD FOR PEOPLE AND THE LONG TERM, THEN SIMPLE, STRUCTURAL, SEMANTIC HTML WAS BEST—EACH ELEMENT DEPLOYED FOR ITS 
 INTENDED PURPOSE … JEFFERY ZELDMAN ” “

Slide 39

Slide 39

@MANDY_KERR USE SECTIONING 
 ELEMENTS

Slide 40

Slide 40

@MANDY_KERR Use sectioning elements

<section> <article> 
 <nav> <aside>

Slide 41

Slide 41

@MANDY_KERR Use sectioning elements

<section> <article> 
 <nav> <aside>

Slide 42

Slide 42

@MANDY_KERR Use sectioning elements

<section> <article> 
 <nav> <aside>

Slide 43

Slide 43

@MANDY_KERR Use sectioning elements

<section> <article> 
 <nav> <aside>

Slide 44

Slide 44

@MANDY_KERR CLEAR STRUCTURE 
 & HIERARCHY

Slide 45

Slide 45

@MANDY_KERR If you have headings, use the heading elements.

<h1> <h2> <h3> 
 <h4> <h5> <h6 >

Slide 46

Slide 46

@MANDY_KERR If you have a header, 
 use the

<header> element < header > This is a header </ header >

Slide 47

Slide 47

@MANDY_KERR MAKE THE MOST OF BUILT-IN 
 FUNCTIONALITY

Slide 48

Slide 48

@MANDY_KERR If you need a link, 
 use the <a> element

Slide 49

Slide 49

@MANDY_KERR If you need a button, use the <button> element

Slide 50

Slide 50

@MANDY_KERR When to use a 
 <button> vs <a> ?

Slide 51

Slide 51

@MANDY_KERR COMBINE ELEMENTS FOR IMPROVED CONTEXT

Slide 52

Slide 52

@MANDY_KERR If you have images, 
 illustrations and diagrams use the 


<figure> & <figcaption> element s* *not every image etc is a figure

Slide 53

Slide 53

@MANDY_KERR If you need pre-formatted text 
 use the

<pre> e lement

Slide 54

Slide 54

@MANDY_KERR The <abbr> and <dfn> e lements

Slide 55

Slide 55

@MANDY_KERR < p

The < dfn

< abbr

title =" International Good

Dog Association ">IGDA</ abbr

</ dfn

is an international,

not-for-profit organization responsible for determining

that all dogs are good.

</ p

The <abbr> and <dfn> e lements

Slide 56

Slide 56

@MANDY_KERR

<dl> 
 <kbd> <wbr> 
 <bdo> 
 <time > <dialog> <address> 
 <picture> 
 <progress> 
 <datalist> <mark> <bidi> 
 <audio> 
 <track> 
 <video>

Slide 57

Slide 57

@MANDY_KERR APPS & 
 TOOLS

Slide 58

Slide 58

@MANDY_KERR Improved readability, 
 and options for personalisation

Slide 59

Slide 59

@MANDY_KERR

Slide 60

Slide 60

using the 


<div> What does it 
 look like in

Slide 61

Slide 61

What does it 
 look like in using semantic 


<html>

Slide 62

Slide 62

Slide 63

Slide 63

@MANDY_KERR

Slide 64

Slide 64

@MANDY_KERR

Slide 65

Slide 65

@MANDY_KERR

Slide 66

Slide 66

@MANDY_KERR

Slide 67

Slide 67

@MANDY_KERR

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

@MANDY_KERR SAFARI READER

Slide 71

Slide 71

@MANDY_KERR WHY IS MY 
 CONTENT 
 MISSING? ! "

Slide 72

Slide 72

MY LIFE 
 IS A LIE!

Slide 73

Slide 73

@MANDY_KERR DON’T FORGET ABOUT THE ATTRIBUTES

Slide 74

Slide 74

@MANDY_KERR SUCCESS

Slide 75

Slide 75

@MANDY_KERR SEARCH

Slide 76

Slide 76

Slide 77

Slide 77

@MANDY_KERR MICRODATA

Slide 78

Slide 78

@MANDY_KERR SCHEMA .ORG

Slide 79

Slide 79

@MANDY_KERR Microdata needs the 
 itemscope itemtype itemprop 
 attributes

Slide 80

Slide 80

@MANDY_KERR < p itemscope itemtype= "http://schema.org/Person"

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

Slide 81

Slide 81

@MANDY_KERR < p itemscope itemtype= "http://schema.org/Person"

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

Slide 82

Slide 82

@MANDY_KERR < p itemscope itemtype= "http://schema.org/Person"

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

Slide 83

Slide 83

@MANDY_KERR SOMETIMES, HTML ELEMENTS ARE NOT ENOUGH, WE NEED TO PROVIDE ADDITIONAL CONTEXT USING METADATA.

Slide 84

Slide 84

@MANDY_KERR ASSISTIVE SEARCH APPS BROWSER

Slide 85

Slide 85

@MANDY_KERR MAKE IT USEFUL MAKE IT USABLE

Slide 86

Slide 86

@MANDY_KERR HTML IS NOT JUST THE FOUNDATION WE BUILD ON. 
 IT’S VITAL IN MAKING OUR WEBSITES FUNCTIONAL FOR ANY TECHNOLOGY

Slide 87

Slide 87

@MANDY_KERR HTML MAKES 
 YOUR SITE FUNCTIONAL

Slide 88

Slide 88

@MANDY_KERR THANKS & RESOURCES Julie Grundy

  • @stringy Ricky Mondello
  • @rmondello 
 developer.mozilla.org/docs/Web/HTML 
 abookapart.com/products/accessibility-for-everyone 
 microsoft.com/design

schema.org

Slide 89

Slide 89

@MANDY_KERR THANKS 
 BURNT TOAST CREATIVE @ burnttoastcre8v

Slide 90

Slide 90

@MANDY_KERR THANKS & RESOURCES Julie Grundy

  • @stringy Ricky Mondello
  • @rmondello 
 developer.mozilla.org/docs/Web/HTML 
 abookapart.com/products/accessibility-for-everyone 
 microsoft.com/design

schema.org