20110128 HTML5 Markup My Blog

HTML5

Rimpei Ogawa <ogawa@tejimaya.com>
2011/1/28 Fri.

HTML5

• http://rimpei.org/blog/
• Symfony2 + BalibaliBlogBundle

•
GitHub

•
• Firefox 3.6 (Mac), Google Chrome (Mac),
MobileSafari (iPhone)

HTML
<!doctype
html>
<html>

<head>

<meta
charset="UTF-‐8">

...

<link
rel="stylesheet"
href="/bundles/balibaliblog/syntaxhighlighter.css">

<script
src="/bundles/balibaliblog/syntaxhighlighter.js"></script>

...

</head>

HTML

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

• Content-Type : <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />

•

• article
• section
• header
• footer
• time

(before)
<body>

<div
id=”container”>

<div
id=”header”>

<div
class="site-‐name"> </div>

</div>

...

<div
id=”footer”>...</div>

</div>
</body>

(after)
<body>

<div
id=”container”>

<header>

<h1> </h1>

</header>

...
(secHon,
arHcle)
...

<footer>...</footer>

</div>
</body>

• div 3
• div#header → header
• div#footer → footer
• div.site-name → h1
• h1
h1
article section

(before)
<div
class=”post”>

<h1>{{
Htle
}}</h1>

<div
class=”date”>{{
pubdate
}}</div>

<div
class=”body”>{{
body
}}</div>
</div>

(after)
<arHcle>

<header>

<h1>{{
Htle
}}</h1>

<p
class=”date”><Hme
pubdate
dateHme=”{{
pubdate
}}”>
{{
pubdate
}}</Hme></p>

</header>

{{
body
}}
</arHcle>

• div

• div.post → article

• div.date → p time
• div.body →

• header div
• pubdate

(before)
<ul>
{%
for
post
in
posts
%}

<li>{{
pubdate
}}

<a
href=”{{
path(‘show’)
}}”>{{
Htle
}}</a></li>
{%
endfor
%}
</ul>

(after)
<ul>
{%
for
post
in
posts
%}

<li><Hme
dateHme=”{{
pubdate
}}”>{{
pubdate
}}</
Hme>

<a
href=”{{
path(‘show’)
}}”>{{
Htle
}}</a></li>
{%
endfor
%}
</ul>

• time

• time pubdate
article

• footer hCard

• hCard 1.0 Microformats Wiki
<http://microformats.org/wiki/hcard-ja>

hCard

<p
class="vcard">

<img
src="..."
alt=""><span
class="fn">Rimpei
Ogawa</
span>(@<span
class="nickname">balibali</span>)

<a
class="url"
href="..."><img
src="..."
alt="">TwiTer</a>

<a
class="url"
href="...">GitHub</a>

<a
class="url"
href="...">Utasuki</a>

</p>

20110128 HTML5 Markup My Blog

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

20110128 HTML5 Markup My Blog