YeomanではじめるHTML5

先日、HTML技術の最新規格として「HTML5」が勧告されましたね。15年ぶりの規格更新みたいですが、15年って長いですね。でももうHTML5はここ数年でかなり広く利用されるようになりました。

tenpuもHTML5の技術の一つ「File API」を利用してファイルを転送しています。ブラウザでファイルを扱えるようになるなんて便利になりましたね。

HTML5という言葉は、HTML自体のことだったり、CSS3のことだったり、Javascriptのことだったり・・・言葉自体がとても広い意味で使われています。なので、結局HTML5ってなんなの？という方多いかと思います。

そこで、HTML5の仕様が勧告されたこの機会に、HTML5を始めてみましょう！

HTMLってそもそも

HTMLはマークアップ言語といって、文章構造や見栄えを記述する言語です。といってもよくわからないので

という文章があった時、人はこの文章を見て、「タイトル(見出し)」とその「内容」が書かれていることがわかります。けどコンピューターからするとどちらもただの文章です。これをコンピューターにも理解できるようにするのがマークアップ言語！

h1タグは「見出し」という意味があるので、見出しにあたる文章をh1タグで囲います。

pタグは「段落」という意味があるので、h1タグとpタグで見出しに対する文章の段落であることがコンピューターに理解できます。

このように、ある文章がどういう意味なのかを定義できるのがHTMLで、意味をつけていくことを「セマンティック」といいます。

HTML5とは

マークアップ言語としての仕様で、数年前まではHTML4.01が主流でした。少し前までHTMLファイルはdivタグの嵐になりがちで、class名やid名を見ないとなんのタグなのかがわかりませんでした。コンピューターにとっても理解不能です。。。

そこで、HTML5では「わかりやすいセマンティックなHTML」を目指しました。先ほどのHTMLがこうなります。

headerタグがヘッダーであることを意味し、navタグはメニューなどのナビゲーションを意味します。articleは記事、fotterはフッターの意味があり、全体の構成がぱっと見でわかるようになりました。そしてコンピューターにも理解しやすくなってます。

コンピューターが理解しやすくなったおかげで、Googleなどの検索エンジンがより正確にWebページを理解できるようになり、正確な検索結果を表示できるようになります。

HTML5でアクセシビリティも向上

Webページを正確にコンピューターが理解できるようになったことで、「アクセシビリティ」も向上しました。

「アクセシビリティ」とは、『だれでもその情報にアクセスでき、取得・発信・共有ができる度合い』のこと。一般的に「障害者でもアクセスできるようにすること」と認識されているけど半分間違い。

例えば、「マウスがない」「キーボードがない」など、「何かしら制限がある人でもアクセスができるかどうか」が正しい意味です。その中に目が見えないなど障害が含まれるという感じ。

先程も書きましたが、divタグの嵐だと、どれが本文でどこにメニューがあるのかがコンピューターには理解できませんでした。しかし、HTML5にはメニューなどを表すnavタグであったり、記事本文であることを意味するarticleタグがあるため、コンピューターが音声で伝えたり、色で伝えたりと、「色んな伝え方ができる=だれでもアクセスできる=アクセシビリティが高い」ということになります。

ちゃんとマークアップしましょう

「HTML5にすればアクセシビリティあがるぜ」「SEOにも効果絶大！！」は大きな間違いです。

確かにWebページを正確に解釈してくれるので、検索エンジンが正確に理解してくれます。

 

でも・・・

ちゃんとマークアップしている場合に限ります。

ナビゲーションとなる部分にちゃんとnavタグを利用する、記事本文が来るところにちゃんとarticleタグを利用する。

タグの意味をちゃんと理解して、使い分けないといけません。間違った使い方をすれば、検索エンジンも間違ったまま表示しちゃいます。ここが難しいところですね。

HTML5始めたいけど・・・

HTML5始めたいけどなんだか難しそう、と思っている方もいると思いますが、今はツールがとても進化していて、コマンド1つでひな型を作成してくれたりします。

そのツールが「Yeoman(ヨーマン)」

このおじさんが色々作ってくれますｗ

ざっくり説明すると、以下コマンドを打つだけでHTML5アプリケーションができちゃいます

 

yeomanを使うためには、色々と準備する必要があるので、次回その手順をまとめたいと思います。

まとめ

HTML5が勧告されましたが、既に広く利用されている技術で、気が付かないうちにHTML5を利用しています。HTML5でできたiOSアプリもありますし、車のカーナビにもHTML5(Javascript)が使われてたりしてます。今後どんどん活躍の場が広がっていくと思うので、必須の技術だと思います。

なのでみなさんもHTML5で面白いアプリを作りましょう！

---

さくっと送って、さくっと受け取る
ファイル転送サービス　「tenpu」

tenpuは、一度に2GBまでのファイルを無料＆会員登録の不要で、さくっと転送できます。
シンプルで美しい背景画面はファイルを受け取る人にも気持よく使えます。
有料プランは最大20GBまで転送可能、背景画像変更、ファイルの保存期間変更など無料版より裕福な機能を用意しています。
有料プランの詳細はこちらからご確認下さい。