Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
html - back to basics
Search
Brad Montgomery
June 14, 2017
Technology
0
60
html - back to basics
Presented at the Memphis WebWorkers meetup, June 2016.
http://memphiswebworkers.com/
Brad Montgomery
June 14, 2017
Tweet
Share
More Decks by Brad Montgomery
See All by Brad Montgomery
Fun with Markov Chains (DevSpace 2016)
bkmontgomery
0
160
Django - A Whirlwind Tour 2016
bkmontgomery
0
160
(more) Fun with Markov Chains
bkmontgomery
0
83
Context Managers
bkmontgomery
0
120
A quick look at Redis
bkmontgomery
1
110
Fun with Markov Chains
bkmontgomery
1
440
python decorators
bkmontgomery
0
280
Building GIS Web Apps with Python & Django
bkmontgomery
3
1k
My Startup Failed and it's all Marketing's Fault
bkmontgomery
0
420
Other Decks in Technology
See All in Technology
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
200
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.6k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
PFEM Online Feature Flag @ newmo
shinyaishitobi
2
270
.NET開発者のためのAzureの概要
tomokusaba
0
210
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1.1k
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
480
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
490
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
240
GCASアップデート(202506-202508)
techniczna
0
230
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
180
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
360
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
How STYLIGHT went responsive
nonsquared
100
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Review Best Practice
trishagee
70
19k
The Invisible Side of Design
smashingmag
301
51k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Building Applications with DynamoDB
mza
96
6.6k
BBQ
matthewcrist
89
9.8k
Transcript
html <webworkers june=“2017”> <back to basics /> <brad montgomery/> </webworkers>
a short history
Tim Berners-Lee https://www.w3.org/People/Berners-Lee/
html 5.1 2016-11-01
html5 2014-10-28
xhtml 2.0 abandoned for html5 thanks to the WHATWG 2004
- 2010
xhtml 1.1 2010-11-23
<?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>
xhtml 1.0 XHTML™ 1.0 The Extensible HyperText Markup Language (Second
Edition) 2002-08-01
<!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>
<!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>
<!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>
html 4.01 1999-12-24
<!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>
html 3.2 1997-01-14
html 2? html 1? There are suddenly no links for
these specs. http://memtech.website/~bkmontgomery/
html == html5.1 <!doctype html>
<!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>
the rules ok, just my rules
None
Mind your <head> Use unique content for your <title> Write
a decent <meta name=“description” …> Declare a <base> tag.
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>.
headings (with ids) Give your headings an id. It’s always
awesome. <h1 id=“the-beginning”>The Beginning</h1>
structure Make use of content sectioning elements: <nav> <header> <section>
<article> <aside> <figure> <footer>
css is for style Keep your html as clean as
possible (I know, I know). Try to avoid style attributes.
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!
validate Why in the world is HTML validation not built
into every single browser? Use the w3’s validator service or a browser extension.
be semantic The stuff in <html> describes a document. Everything
has meaning (or it should).
accessibility We should all learn more. Check out WAI-ARIA &
Section 508.
so… assuming html 5 what’s wrong with this code?
what’s wrong? <body> <div> <h2>Hello. </h2> <h5>there</h5> </div> </body>
what’s wrong? <p>Here's a <b>bold statement</b></p>
what’s wrong? <p> <font face="verdana" color=“green"> This is some text!</font>
</p>
what’s wrong? <i> <p>This paragraph is in italics!</p> </i>
what’s wrong? <big> <p>This paragraph is in italics!</p> </big>
what’s wrong? <center> This text will be centered. <p>So will
this paragraph.</p> </center>
what’s wrong? <button> <h1>Download our Ebook</h1> </button>
what’s wrong? <p><em>Yep</p></em>
what’s wrong? <p><div> Here's a div for you</div></p>
what’s wrong? <img src="http://lorempixel.com/640/480/cats">
what’s wrong? <a href=“?a=1&b=2">click me</a>
what’s wrong? <ul> <li>Do this first.</li> <li>Then do this thing.
</li> <li>Finish with this.</li> </ul>
what’s wrong? <form action="" method="get"> <p> <input type="radio" name="thing"> you
want this thing? </p> </form>
what’s wrong? <table> <hr> <tr> <td>column 1</td> <td>column 2</td> </tr>
</table>
what’s wrong? <video src="videofile.webm" autoplay poster="posterimage.jpg"></video>
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>
what’s wrong? <div style="text-align:center"> This text will be centered. <p>So
will this paragraph.</p> </div>
what’s wrong? <script defer> console.log("Why won't this ever run!?"); </scrip>
what’s wrong? <a href="/report/" download=“report.pdf"> Download our Report </a>
what’s wrong? <dialog open> <p>Hello World!</p> </dialog>
what’s wrong? <details> <summary>Some details</summary> <p>More info about the details.</p>
</details>
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>
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)