html - back to basics

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

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