Soweeb!

html4とhtml5は大きな違いがあるのかな?

      2013/12/06

html5が話題になってるし、html5をマスターしたいな~と思いました。いや話題ななってるのかどうかはよく分かりませんが、html5を使ったwordpressのテーマもあったりで、html5をマスターしたいな~とは考えたわけです。

wordpressのテーマ使ったwordpressのテーマはと言うとTwenty Twelveというテーマがあります。このTwenty Twelveはwordpressの公式テーマですね。シンプルなデザインなのでオールマイティーに使えると思います。

実はこのサイトでも今のところTwenty Twelveを使ってはいるのですが、初期デザインのままではコメントをしてみようとか上についていたりとちょっと私的には微妙な点も多くはありました。そこで子テーマを使って多少いじってはいます。デザイン的にはあんまり変化してませんけどね。

子テーマの初歩的な使い方については別記事で紹介してますので、良かったら見てください。
WordPressで子テーマを使いテーマの複製代わりにする方法

でTwenty Twelveのソースを見てみるとなんじゃこりゃと思ってしまうタグがいっぱい並んではいたのです。よく分からんな~とは思っていたのですが、子テーマでいじる時はhtml自体にそんなに変更加えたわけでもなかったのでなんとかはなりました。

いらない部分を消したりとか、cssでちょっとだけ文字の配置などをいじったりとかそんな程度でしたからね。あとは広告が使いにくいので根本的なファイルを追加してみたりとか、そんな改造を加えてはいます。

後ちょっとびっくりしたのがh1タグがいっぱい並んでいる事でした。ブログのソースを表示してみると同じページにh1タグいっぱいなのです。seo的にはh1タグは1ページに1個が基本ですよね。これスパムにならないの?とは思ったわけです。

でこのテーマを使うの微妙かな~って思っていたんですが、調べてみるとどうやらhtml5ではh1タグを複数使っても問題ないようです。ハイ、そうなんだそうです。具体的にどんな風にh1タグを複数使っていいのかは今のところよく分かりません。調査中ではあります。

そんなこんなでhtml5を改めて勉強するのはめんどくさかったので、しばらくhtml5の事は放置してました。html5は動画も埋め込む事ができるだとか、動的なページも作れるだとか?そんな噂話しを聞いていたので難しそうだな~とは思っていたのです。

でもこれからhtml5も本格的に広まっていく感はあるし、それじゃちょっと勉強してみるか~とは考え始めました。でいろいろ検索してみてみました。この辺のページなどが分かりやすかったです。
http://www.htmq.com/html5/002.shtml

ちょっと勉強して感じた事ですが、html5は基本的にはこれまでのhtml4の知識も十分に使えます。基本的な事はhtml4の知識が使い回しできて、廃止になったタグや新しくできたタグがあるというところですね。

例えば<video>は動画を再生するタグなのですが、このタグを使ってファイルを指定してやるとweb上に動画プレイヤーが表示されて動画が再生できるようになります。

こういった新しいタグは使う必要性があればそのタグの使い方を勉強していけばなんとかなる感じです。

Twenty Twelveに訳の分からないタグがいっぱいでてきていたのですが<header>とか<footer>とかですね。これらのタグの正体は構造を決めるためタグでした。

構造を決めるという事はサイトの基本的なデザイン構造を決めるという事ですが、html4まででは<div>などを使ってここがヘッダー部分とかフッター部分とか決めてましたよね。

それが構造を決めるための専用のタグがあるという事になるのわけです。これの利便性はと言うと検索エンジンに対してここがヘッダー部分だよ~とかコンテンツの部分だよ~とか明確に教え易くなるようですね。たぶん。

html5はなかなか便利に使えるようになってるじゃんという感想です。という事でhtml4とhtml5は今までと同じように使う分には大きな違いはないのかな~という印象になりました。

新しく追加されたタグなどは必要になれば勉強していけばいいかなという印象です。動的なサイトを作れるらしい?ので多少難しくはあるのかもしれませんけどね?

 - web製作