A presentation at Web Directions Code 2018 in in Melbourne VIC, Australia by Mandy Michael
HELLO Awesome illustrations by Burnt Toast Creative
@MANDY_KERR 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?
@MANDY_KERR THERE ARE LOTS 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
"dog.png"
"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
"dog.png"
"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
<section> <article> <nav> <aside>@MANDY_KERR Use sectioning elements
<section> <article> <nav> <aside>@MANDY_KERR Use sectioning elements
<section> <article> <nav> <aside>@MANDY_KERR Use sectioning elements
<section> <article> <nav> <aside>@MANDY_KERR CLEAR STRUCTURE & HIERARCHY
@MANDY_KERR If you have headings, use the heading elements.
<h1> <h2> <h3> <h4> <h5> <h6 >@MANDY_KERR If you have a header, use the
<header> element < header > This is a header </ header >@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
<figure> & <figcaption> element s* *not every image etc is a figure@MANDY_KERR If you need pre-formatted text use the
<pre> e lement@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
<dl> <kbd> <wbr> <bdo> <time > <dialog> <address> <picture> <progress> <datalist> <mark> <bidi> <audio> <track> <video>@MANDY_KERR APPS & TOOLS
@MANDY_KERR Improved readability, and options for personalisation
@MANDY_KERR
using the
<div> What does it look like inWhat does it look like in using semantic
<html>@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
schema.org
@MANDY_KERR THANKS BURNT TOAST CREATIVE @ burnttoastcre8v
@MANDY_KERR THANKS & RESOURCES Julie Grundy
schema.org
HTML, the foundation of the web! With so much time being spent on typed javascript, functional programming, unit tests, visual regression testing, tools, frameworks and a drive to write better more efficient code we often forget that the web starts with HTML.
I will demonstrate why semantics are important and why choosing the right html elements will help you write better code not just for browsers but other technologies as well.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.