HTML5のタグの使い方の意味を理解してください

2月になり、日にちが経ちますが…

気候も少しずつ上がってきてるようになってきましたね。

体調にはしっかりと管理をしてくださいね。

一日より早く春が来ないかなーって待ち続けていますが…

寒さの季節が早く過ぎ去ってほしいものです。

話を取り戻して…

HTML5のタグの使い方の意味を理解してください

今はもう完全にHTML5の時代なので、タグの使い分けや意味を理解しないまま、適当にタグを使われているところが見られます。

見た感じでは、しっかりとしたデザインになっていますが、中身を見たところ、ホンマにええ加減なタグを使う人が良く見られます。

SEOにも大きく影響しますので、プロならプロらしくしっかりとしたコーディングをしておいてほしいものです。

ブロック要素インライン要素の使い分けもしっかりと熟知してください。

まずは、HTML4時代とHTML5時代のワイヤーフレームについて説明していきますね。

上の図のようにワイヤーフレーム構造を説明します。

HTML4時代のワイヤーフレーム

<div id="conteiner">
	<div id="header">
	</div><-- # Header -->

	<div id="navigation">
	</div><-- # Navigation -->

	<div id="sidebar">
	</div><-- # Sidebar -->

	<div id="content">
	</div><-- # Content -->

	<div id="footer">
	</div><-- # Footer -->
</div>

HTML4時代のワイヤーフレームはこんな感じでコーディングをしていました。

しかし、近年ではもう完全にHTML5時代なのでSEOの強化にもつながっています。

HTML5時代のワイヤーフレームの組み立て方はご存じでしょうね?

適当にワイヤーフレームを組み立ててる人はもうWeb業界から去ったほうがいいかと思います。

HTML5のワイヤーフレーム

<div id="conteiner">
	<header id="header" role="banner">
	</header><-- # Header -->

	<nav id="navigation" role="navigation">
	</nav><-- # Navigation -->

	<aside id="sidebar" role="complementary">
	</aside><-- # Sidebar -->

	<main id="content" role="main">
	</main><-- # Content -->

	<footer id="footer" role="contentinfo">
	</footer><-- # Footer -->
</div>

見て何か気づいたことありましたか?

気づかへんやつはもうそろそろ一から勉強をし直すか、足を洗って業種変更して転職するかにしてくださいね。

同じ、Web技術者としてはホンマに恥ずかしいからやめてねぇ…

ではまた!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む