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
55
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
150
Django - A Whirlwind Tour 2016
bkmontgomery
0
150
(more) Fun with Markov Chains
bkmontgomery
0
78
Context Managers
bkmontgomery
0
110
A quick look at Redis
bkmontgomery
1
110
Fun with Markov Chains
bkmontgomery
1
420
python decorators
bkmontgomery
0
270
Building GIS Web Apps with Python & Django
bkmontgomery
3
1k
My Startup Failed and it's all Marketing's Fault
bkmontgomery
0
410
Other Decks in Technology
See All in Technology
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
180
Prox Industries株式会社 会社紹介資料
proxindustries
0
260
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
140
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
390
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
184
16k
Optimizing for Happiness
mojombo
379
70k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Site-Speed That Sticks
csswizardry
10
660
Faster Mobile Websites
deanohume
307
31k
Facilitating Awesome Meetings
lara
54
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Cult of Friendly URLs
andyhume
79
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing Experiences People Love
moore
142
24k
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)