HELLO Awesome illustrations by Burnt Toast Creative

WHY ARE WE TALKING HTML?

@MANDY_KERR HTML IS SIMPLE

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

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

THERE ARELOTS OF 
 OPINIONS ON THE MATTER

@MANDY_KERR HTML CSS JS

@MANDY_KERR FUNCTIONAL HTML

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

@MANDY_KERR MAKING 
 THINGS 
 PRETTY

@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 \

@MANDY_KERR HOW THE BROWSER 
 INTERPRETS HTML

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@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

….

@MANDY_KERR WHY DOES THIS MATTER?

@MANDY_KERR TYPE

SCRIPT

@MANDY_KERR interface

dog {

name :

string

age :

number

isFluffy :

boolean }

@MANDY_KERR WE DETERMINE WHAT WE EXPECT THE CONTENT TO BE

@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

@MANDY_KERR interface

dog {

name :

any

age :

any

isFluffy :

any }

@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

@MANDY_KERR JUST <DIV> @MANDY_KERR

@MANDY_KERR SEMANTICS

@MANDY_KERR NOT EVERYONE INTERACTS 
 THE SAME

@MANDY_KERR ASSISTIVE SEARCH APPS BROWSER

@MANDY_KERR ASSITIVE 
 TECH

@MANDY_KERR ACCESSIBILITY TREE

@MANDY_KERR

@MANDY_KERR WHAT DOES IT SOUND LIKE?

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR Don’t just use divs.

@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 ” “

@MANDY_KERR USE SECTIONING 
 ELEMENTS

@MANDY_KERR Use sectioning elements

@MANDY_KERR Use sectioning elements

@MANDY_KERR Use sectioning elements

@MANDY_KERR Use sectioning elements

@MANDY_KERR CLEAR STRUCTURE 
 & HIERARCHY

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

@MANDY_KERR If you have a header, 
 use the

@MANDY_KERR MAKE THE MOST OF BUILT-IN 
 FUNCTIONALITY

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

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

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

@MANDY_KERR COMBINE ELEMENTS FOR IMPROVED CONTEXT

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


@MANDY_KERR If you need pre-formatted text 
 use the

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

@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

@MANDY_KERR

@MANDY_KERR APPS & 
 TOOLS

@MANDY_KERR Improved readability, 
 and options for personalisation

@MANDY_KERR

using the 


What does it 
 look like in using semantic 


@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR

@MANDY_KERR SAFARI READER

@MANDY_KERR WHY IS MY 
 CONTENT 
 MISSING? ! "

MY LIFE 
 IS A LIE!

@MANDY_KERR DON’T FORGET ABOUT THE ATTRIBUTES

@MANDY_KERR SUCCESS

@MANDY_KERR SEARCH

@MANDY_KERR MICRODATA

@MANDY_KERR SCHEMA .ORG

@MANDY_KERR Microdata needs the 
 itemscope itemtype itemprop 
 attributes

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

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

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

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

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

By < span

itemprop= "author"

Mandy Michael

</ span

</ p

Defining “Person” Metadata

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

@MANDY_KERR ASSISTIVE SEARCH APPS BROWSER

@MANDY_KERR MAKE IT USEFUL MAKE IT USABLE

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

@MANDY_KERR HTML MAKES 
 YOUR SITE FUNCTIONAL

@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

@MANDY_KERR THANKS 
 BURNT TOAST CREATIVE @ burnttoastcre8v

@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