Slide 1
Slide 1 text
html
Slide 2
Slide 2 text
a short history
Slide 3
Slide 3 text
Tim Berners-Lee
https://www.w3.org/People/Berners-Lee/
Slide 4
Slide 4 text
html 5.1
2016-11-01
Slide 5
Slide 5 text
html5
2014-10-28
Slide 6
Slide 6 text
xhtml 2.0
abandoned for html5 thanks to the WHATWG
2004 - 2010
Slide 7
Slide 7 text
xhtml 1.1
2010-11-23
Slide 8
Slide 8 text
…
Slide 9
Slide 9 text
xhtml 1.0
XHTML™ 1.0
The Extensible HyperText Markup Language
(Second Edition)
2002-08-01
Slide 10
Slide 10 text
…
Slide 11
Slide 11 text
…
Slide 12
Slide 12 text
…
Slide 13
Slide 13 text
html 4.01
1999-12-24
Slide 14
Slide 14 text
My first HTML document
Hello world!
Slide 15
Slide 15 text
html 3.2
1997-01-14
Slide 16
Slide 16 text
html 2?
html 1?
There are suddenly no links for these specs.
http://memtech.website/~bkmontgomery/
Slide 17
Slide 17 text
html == html5.1
Slide 18
Slide 18 text
Example
Slide 19
Slide 19 text
the rules
ok, just my rules
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Mind your
Use unique content for your
Write a decent <meta name=“description” …>
Declare a <base> tag.
Slide 22
Slide 22 text
headings
Headings (
-
) imply an hierarchy. They have meaning (semantics). Don’t use them for “text size”. Don’t skip sizes. Shoot for a single
.
Slide 23
Slide 23 text
headings (with ids)
Give your headings an id. It’s always awesome.
The Beginning
Slide 24
Slide 24 text
structure
Make use of content sectioning elements:
<figure>
Slide 25
Slide 25 text
css is for style
Keep your html as clean as possible (I know, I know).
Try to avoid style attributes.
Slide 26
Slide 26 text
Beware the
How to build a slick marketing page:
1. Copy something from StartBootstrap
2. Strip out all the placeholder text.
3. Change the color scheme in CSS.
4. Publish, FTW!
Slide 27
Slide 27 text
validate
Why in the world is HTML validation
not built into every single browser?
Use the w3’s validator service or
a browser extension.
Slide 28
Slide 28 text
be semantic
The stuff in describes a document.
Everything has meaning (or it should).
Slide 29
Slide 29 text
accessibility
We should all learn more.
Check out WAI-ARIA & Section 508.
Slide 30
Slide 30 text
so… assuming html 5
what’s wrong with this code?
Slide 31
Slide 31 text
what’s wrong?
Hello.
there
Slide 32
Slide 32 text
what’s wrong?
Here's a bold statement
Slide 33
Slide 33 text
what’s wrong?
This is some text!
Slide 34
Slide 34 text
what’s wrong?
This paragraph is in italics!
Slide 35
Slide 35 text
what’s wrong?
This paragraph is in italics!
Slide 36
Slide 36 text
what’s wrong?
This text will be centered.
So will this paragraph.
Slide 37
Slide 37 text
what’s wrong?
Download our Ebook
Slide 38
Slide 38 text
what’s wrong?
Yep
Slide 39
Slide 39 text
what’s wrong?
Here's a div for you
Slide 40
Slide 40 text
what’s wrong?
Slide 42
Slide 42 text
what’s wrong?
- Do this first.
- Then do this thing.
- Finish with this.
Slide 43
Slide 43 text
what’s wrong?
you want this thing?
Slide 44
Slide 44 text
what’s wrong?
column 1 column 2
column 1 column 2
Slide 45
Slide 45 text
what’s wrong?
Slide 46
Slide 46 text
what’s wrong?
Term: Here's a description for the meaning of this Term.
Other Term: Here's the meaning of this Other Term.
Slide 47
Slide 47 text
what’s wrong?
This text will be centered.
So will this paragraph.
Slide 48
Slide 48 text
what’s wrong?
console.log("Why won't this ever run!?");
</scrip>
Slide 50
Slide 50 text
what’s wrong?
Hello World!
Slide 51
Slide 51 text
what’s wrong?
Some details
More info about the details.
Slide 53
Slide 53 text
tools
• W3 Validator
• HTML 5.1 Spec
• MDN HTML Element Reference
• MDN: Learn HTML
• Validity Extension for Chrome
• html-tidy (or brew install tidy-html5)