html - back to basics

D57aec10399cbb252bd890c2bb3fe1c9?s=47 Brad Montgomery
June 14, 2017
Technology
0
25

html - back to basics

Presented at the Memphis WebWorkers meetup, June 2016. http://memphiswebworkers.com/

D57aec10399cbb252bd890c2bb3fe1c9?s=128

Brad Montgomery

June 14, 2017
Tweet

More Decks by Brad Montgomery

See All by Brad Montgomery
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
95
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
56
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
40
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
30
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
1
27
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
1
230
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
160
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
3
850
D57aec10399cbb252bd890c2bb3fe1c9?s=48 bkmontgomery
0
140

Other Decks in Technology

See All in Technology
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
130
25325b405f9ca72c4c8024727c41cb98?s=48 hisayuki
1
270
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
1
270
F301c0275838d562c72ea9177e7ddc68?s=48 fkino
7
870
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
1
200
253ab1300a7e9526141c2f15d3cb4ae7?s=48 shinpy
0
110
A2cd163fd3cfca5204b0d8f0c17eea29?s=48 yujif
2
120
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
18
1.6k
5bbbb20da49b1f802af50b0f17a4f31f?s=48 miuranobuki
0
1k
74948d1118cd84528f7861a3069dd8d9?s=48 qryuu
8
2.4k
61a68b2172503ecdf7a7f7757df56071?s=48 toyship
0
260
53850955f15249a1a9dc49df6113e400?s=48 line_developers
2
200

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
12k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
250k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.5k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
124
21k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
184
14k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
112
24k

Transcript

  1. html <webworkers june=“2017”> <back to basics /> <brad montgomery/> </webworkers>

  2. a short history

  3. Tim Berners-Lee https://www.w3.org/People/Berners-Lee/

  4. html 5.1 2016-11-01

  5. html5 2014-10-28

  6. xhtml 2.0 abandoned for html5 thanks to the WHATWG 2004

    - 2010

  7. xhtml 1.1 2010-11-23

  8. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

    “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> … </html>

  9. xhtml 1.0 XHTML™ 1.0 The Extensible HyperText Markup Language (Second

    Edition) 2002-08-01

  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

    lang="en" xml:lang="en"> … </html>

  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

    lang="en" xml:lang="en"> … </html>

  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

    lang="en" xml:lang="en"> … </html>

  13. html 4.01 1999-12-24

  14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd”> <HTML> <HEAD> <TITLE>My

    first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML>

  15. html 3.2 1997-01-14

  16. html 2? html 1? There are suddenly no links for

    these specs. http://memtech.website/~bkmontgomery/

  17. html == html5.1 <!doctype html>

  18. <!doctype html> <html> <head> <title>Example</title> <base href=“http://example.com/"> <meta charset="utf-8"> <meta

    name="description" content="Actual description"> </head> <body> </body> </html>

  19. the rules ok, just my rules

  20. None

  21. Mind your <head> Use unique content for your <title> Write

    a decent <meta name=“description” …> Declare a <base> tag.

  22. headings Headings (<h1> - <h6>) imply an hierarchy. They have

    meaning (semantics). Don’t use them for “text size”. Don’t skip sizes. Shoot for a single <h1>.

  23. headings (with ids) Give your headings an id. It’s always

    awesome. <h1 id=“the-beginning”>The Beginning</h1>

  24. structure Make use of content sectioning elements: <nav> <header> <section>

    <article> <aside> <figure> <footer>

  25. css is for style Keep your html as clean as

    possible (I know, I know). Try to avoid style attributes.

  26. Beware the </div> 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!

  27. validate Why in the world is HTML validation not built

    into every single browser? Use the w3’s validator service or a browser extension.

  28. be semantic The stuff in <html> describes a document. Everything

    has meaning (or it should).

  29. accessibility We should all learn more. Check out WAI-ARIA &

    Section 508.

  30. so… assuming html 5 what’s wrong with this code?

  31. what’s wrong? <body> <div> <h2>Hello. </h2> <h5>there</h5> </div> </body>

  32. what’s wrong? <p>Here's a <b>bold statement</b></p>

  33. what’s wrong? <p> <font face="verdana" color=“green"> This is some text!</font>

    </p>

  34. what’s wrong? <i> <p>This paragraph is in italics!</p> </i>

  35. what’s wrong? <big> <p>This paragraph is in italics!</p> </big>

  36. what’s wrong? <center> This text will be centered. <p>So will

    this paragraph.</p> </center>

  37. what’s wrong? <button> <h1>Download our Ebook</h1> </button>

  38. what’s wrong? <p><em>Yep</p></em>

  39. what’s wrong? <p><div> Here's a div for you</div></p>

  40. what’s wrong? <img src="http://lorempixel.com/640/480/cats">

  41. what’s wrong? <a href=“?a=1&b=2">click me</a>

  42. what’s wrong? <ul> <li>Do this first.</li> <li>Then do this thing.

    </li> <li>Finish with this.</li> </ul>

  43. what’s wrong? <form action="" method="get"> <p> <input type="radio" name="thing"> you

    want this thing? </p> </form>

  44. what’s wrong? <table> <hr> <tr> <td>column 1</td> <td>column 2</td> </tr>

    </table>

  45. what’s wrong? <video src="videofile.webm" autoplay poster="posterimage.jpg"></video>

  46. what’s wrong? <p> <strong>Term:</strong> Here's a description for the meaning

    of this Term. </p> <p> <strong>Other Term:</strong> Here's the meaning of this Other Term. </p>

  47. what’s wrong? <div style="text-align:center"> This text will be centered. <p>So

    will this paragraph.</p> </div>

  48. what’s wrong? <script defer> console.log("Why won't this ever run!?"); </scrip>

  49. what’s wrong? <a href="/report/" download=“report.pdf"> Download our Report </a>

  50. what’s wrong? <dialog open> <p>Hello World!</p> </dialog>

  51. what’s wrong? <details> <summary>Some details</summary> <p>More info about the details.</p>

    </details>

  52. what’s wrong? <body> <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <div

    class="container topnav"> <div class="navbar-header"> <a class="navbar-brand topnav" href="#">Start Bootstrap</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- snipped... --> </div> </div> </nav> <a name="about"></a> <div class="intro-header"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="intro-message"> <h1>Landing Page</h1> </div> </div> </div> </div> </div> </div> </body>

  53. 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)