このページの本文へ

SwapSkillsのHTML5勉強会レポート

HTML5って結局何が変わるの?制作者向け勉強会に潜入

2010年06月18日 17時05分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

 Web業界は“勉強会好き”だ。有料・無料、規模を問わず、週末ともなると必ずどこかで何らかの勉強会が開催されていて、多くの制作者や開発者が参加している。常に新しい技術への対応が欠かせない業界とはいえ、これほど勉強熱心な人が多い業界はほかに思い浮かばない。

 4月、5月と「HTML5」をテーマに都内で開催された勉強会「SwapSkills」(主催=allWebクリエイター塾)に潜入する機会があったので、当日の様子をお届けしよう。

4月のSwapSkillsの様子

HTML5のマークアップで変わること

 4月29日の「今から、ハジメる人へのHTML5」は、タイトルのとおり、HTML5ビギナーのための勉強会だ。スピーカーにallWebクリエイター塾講師の菊池 崇さん、「HTML5本」をそれぞれ執筆した羽田野太巳さん、白石俊平さんの3名を迎えて、約80人がHTML5の概要と基本を学んだ。

 HTML5と一口に言っても、マークアップの方法から関連APIと組み合わせたJavaScriptプログラミングまで、多岐にわたる。(Web Professionalも含めて)よくメディアが取り上げるのはvideoやcanvasなどの新しいタグ(要素)、Webアプリのプラットフォームとしての可能性、といったあたりだが、実はマークアップの変更点も大きい。菊池さんはHTML5が登場した背景の1つに「XHTMLは厳格すぎてエラーが含まれるWebサイトばかりになってしまったこと」への反省があるという。そこで「HTML5では寛容な書き方を許容している」と特徴を説明する。

羽田野太巳さん

 一方でHTML5は「セマンティックの徹底」と話すのは羽田野さん。ブロックレベル要素/インライン要素を廃止し、コンテンツモデルという新しい考え方に移行するHTML5では、section(節)、article(記事)、nav(ナビゲーション)など、従来はいずれもdivでマークアップしていた要素を使い分ける必要がある。また、見た目の制御に使われていたsmallやhrなどの要素も、それぞれ「脚注などに使われる細目用のテキスト」「文脈の区切り」のように意味を持つ要素へと役割が変わるのも従来のHTML/XHTMLとの違いだ。

 羽田野さんは、主な要素の意味・役割を説明し、実際のWebページにおけるHTML5でのマークアップの勘所を解説。サンプルページをHTML5でどうマークアップすべきか、参加者とともに考える簡単なワークショップを実施した。セッション自体は約1時間ほどとそれほど長くはなかったが、実例を交えた説明は分かりやすく、「HTML5はまったくの初めて」というWeb制作者にもうれしい勉強会になったはずだ。

実際のページのマークアップを考えるワークショップ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く