「HTML5カルタ」で覚えるHTML5の108つのタグ
動画が表示されない場合は
html5jのYoutubeチャンネルへ！
Created by
WEBCRE8.jp
四畳半ワークス
Supported by
動画が表示されない場合は
html5jのYoutubeチャンネルへ！
Created by
WEBCRE8.jp
四畳半ワークス
Supported by
HTML自体のタグ
ルート要素
manifest属性でキャッシュさせるファイルを定義できる
ページ自体のメタ情報をまとめるタグ
ドキュメントのメタデータ
例外を除きtitle要素が一つだけ必須
ページ自体の題名のタグ
ドキュメントのメタデータ
HTMLメールなどでは件名が代わりになるので省略可能
外部ファイルとのリンクのタグ
ドキュメントのメタデータ
type="text/css"は省略可能
ページ自体のメタ情報のタグ
ドキュメントのメタデータ
title, base, link, style, script要素で表現できない全てのメタ情報を表す
主にCSSをページ内に書き込むタグ
ドキュメントのメタデータ
scoped属性で親要素内のみにCSSを適用できる
主にJavaScriptをページに埋め込むタグ
スクリプティング
type属性は"text/javascript"のときのみ省略可能。JavaScript以外も指定できる
ブラウザに表示する内容全体のタグ
セクション
background,vlinkなどの属性は廃止されている
見出しのタグ1
セクション
主にセクショニング・ルートの見出しとして使われる
文章の段落のタグ
コンテンツのグループ化
会話文にも使われる。フレージング・コンテンツしか入れることが出来ない
引用するコンテンツのタグ
コンテンツのグループ化
cite属性にURLを指定することでどこから引用されたコンテンツかを示せる
順番の決まったリストのタグ
コンテンツのグループ化
reversed属性で逆順のリストも作れる。CSS3でマーカーの自由度が増している
順番の決まってないリストのタグ
コンテンツのグループ化
type属性は廃止された。順不同リストではあるがCSSで番号を振ることもできる
リストの内容のタグ
コンテンツのグループ化
ol,ul要素以外にmenu要素の子にもなる
項目に関する記述リストのタグ
コンテンツのグループ化
単語の定義以外にも単なる項目への説明にも使えるようになった
項目に関する記述リストの項目のタグ
コンテンツのグループ化
用語の定義などに使う場合は子要素にdfn要素を置く
項目に関する記述リストの記述のタグ
コンテンツのグループ化
p要素と違い、フロー・コンテンツをなんでも置ける
特定の意味を持たないブロックのタグ
コンテンツのグループ化
レイアウトのためだけに用いる。div=division(分割・区画)の意
テキストや画像に埋め込むリンクのタグ
テキストレベルの意味づけ
divなどのフロー・コンテンツも入れられる
文章内の重要性の高いテキストのタグ
テキストレベルの意味づけ
strong要素を入れ子にして重要性のレベルも明示できる
文章内の特定の意味を持たないテキストのタグ
テキストレベルの意味づけ
何かの意味を持つ他のフレージング・コンテンツに該当しない場合のみ使う
文章内の改行のタグ
テキストレベルの意味づけ
詩など、改行がコンテンツの一部となる場合に使う
写真や画像のタグ
組込コンテンツ
figcaption要素を持つfigure要素の子の場合などでalt属性を省略できる
表組み自体のタグ
テーブルデータ
border属性やcaption要素を持つことでレイアウト目的でないことを示すことが出来る
表組み内の行のタグ
テーブルデータ
デフォルトでunicode-bidi:isolate(文章方向の独立)が設定されている
表組み内の行の内容のタグ
テーブルデータ
セクショニング・ルートである為内容にセクションがある場合見出しが必要
表組み内の行の見出しのタグ
テーブルデータ
使用することでレイアウト目的のtable要素でないことを示すことが出来る
見出しと内容をまとめるセクションのタグ
セクション
見出しのある段落(章や節)というような意味なので見出しはほぼ必須
リンクをまとめるセクションのタグ
セクション
含まれるリンクがページ内か通常のリンクか、主要かそうでないかを問わず使用出来る
単独で扱える記事のようなセクションのタグ
セクション
ブログの記事や、ページの本文とその見出しが入る
本筋から逸れる解説などのセクションのタグ
セクション
「関連する記事の紹介」のような補助的なコンテンツや、広告などにも使える
コンテンツのヘッダー情報をまとめるタグ
セクション
見出し、リード、目次、ナビゲーションなどを入れる
コンテンツのフッター情報をまとめるタグ
セクション
address、フッターリンク、補足情報などを入れる
コンテンツの作者の連絡先のタグ
セクション
ルートまたは記事等、親要素についての作者の連絡先を示す
本文を補足するコンテンツのタグ
コンテンツのグループ化
図表、画像、コード等、どのフロー・コンテンツも入れられる
figcaptionfigureタグにつけるキャプションのタグ
コンテンツのグループ化
figureの内容がいくつあってもキャプションは一つになる
2012年現在、W3Cで正式に採用されているHTML5のタグは108つあります。HTML5KARUTAは、このHTML5のタグを日本古来から伝わる伝統的な遊戯、カルタとして遊びながら覚えようというものです。
このページの殆どの機能がご利用できます。
札一覧にはHTML5の36つのタグの意味が書かれています。マウスを合わせるとそのタグの名前が分かります。
このページの殆どの機能がご利用できます。
札一覧にはHTML5の36つのタグの意味が書かれています。タップするとそのタグの名前が分かります。
このページの殆どの機能がご利用できます。
札一覧にはHTML5の36つのタグの意味が書かれています。タップするとそのタグの名前が分かります。
スマートフォンでアクセスした場合に限り、札一覧では札が一枚ずつ表示されます。HTML5KARUTAのPDF版で遊ぶ場合にご利用ください。
このページの一部の機能がご利用できます。
札一覧にはHTML5の36つのタグの名前と意味が書かれています。簡単なリファレンスサイトとしてご利用できます。
まず購入またはダウンロードからHTML5KARUTAを手に入れてください。
ダウンロードできるPDF版の絵札とwebサイトの札一覧にある読み札は、108あるタグの中からHTML5のページにおいて一般的なタグだけを選んだ36枚です。これだけで一通りHTML5のタグを網羅しています。
購入できるHTML5KARUTAは、初級セット、中級セット、上級セットの三つがあります。これらは裏面の色が違いますが、参加者の人数やHTML5の理解度、プレイ時間に合わせてセットを合わせたりすることもできます。
HTML5KARUTAはタグについて学びながらプレイするため、1セットは36枚と普通のカルタより少なめになっています。
他にもHTML5KARUTAには次の様な使い方があります。
HTML5KARUTAを使って遊ぶなら、こういったシーンにオススメです。
名刺サイズなので、名刺入れに好きなタグをしのばせたりも出来ます★
HTML5KARUTAを遊ぶには二つの方法があります。
HTML5のコーディングにおいてよく使われる36のタグを選び、その絵札をPDF形式で配布しています。これを印刷し、厚紙などに貼りつけることでカルタを遊ぶことができます。なお、読み札にはこのページの札一覧をお使いください。スマートフォンでのご利用が便利です。
ダウンロードする場合は上のボタンを押してください。PDFファイルでダウンロードできます。購入する場合はHTML5KARUTAを購入するの項に進んでください。
HTML5KARUTAには、HTML5以前から変わらず残っているタグで構成される初級セット、HTML5でコーディングをするとき使う事の多いタグで構成される中級セット、あまり使われることのないタグや解釈の変わったタグで構成される上級セットがあります。これらのセットをそれぞれ購入することができます。
各セットは名刺サイズ、36つのタグの読み札と絵札が一枚づつ、計72枚のセットです。
※近日中に購入受付を開始致します。販売スタートは@webcre8から、またはWEBCRE8.jpのブログ記事等で告知しますので、情報を知りたい方はフォローもしくはRSS登録を宜しくお願いします。
1980円(税込)
1980円(税込)
1980円(税込)
来る2013年1月6日(日)、このカルタを使ったカルタ大会を行います★
カルタ大会は13:00から16:00までの間、各コワーキングスペースで行われます。
まずカルタを使って軽くHTML5のタグにはどんなものがあるのか、これまでのHTMLとはどう変わったのか等の解説を致します。その後軽い練習の後、皆さんでカルタを遊びましょう。
HTML5がよくわからない人には解説をしながらゲームを進めますので、お気軽に遊びに来てください。ゲームの勝者には各スペースごとにHTML5関連グッズなどの賞品をご用意させて頂いております★
当日はどうぞ着物を着てきたりして、お正月イベントとしてお楽しみください！場所によっては懇親会も行われる予定です。
Twitterでのハッシュタグは#HTML5KARUTAです。
その他、この日に同じようにイベントを行いたいという団体やスペースがございましたらmail＠webcre8.jpまたは@webcre8までご連絡ください。
その他わからないことなどありましたらTwitterの@webcre8または@glatyou、メールではmail@webcre8.jpまでご連絡ください。
HTML5KARUTAは個人の完全な自主制作です。もしこのプロジェクト自体にご興味があり、かつ一緒に盛り上げていきたいという意志をお持ちの方がおられましたらmail@webcre8.jpまでご連絡ください。
当イベントはweb制作に興味を持つ方を対象としております。スポンサーになることをご検討頂ける方に対しましてこちらで可能な貢献の仕方としては以下になります。
ご協力頂きたいものは以下になります。
以上何卒よろしくお願い致します。とりあえず、Twitterやメールなどでもお気軽にお声がけください。
エンジニアとクリエイターがスキルを軸に、仲間や仕事に出会うためのサービスForkwell様にスポンサーとしてご協力頂いております。