Webクリエイター【初級/前編】,  ◎ HTMLを学ぶ

HTML5の特徴

HTML5とは


HTML5は、2014年10月28日にW3C(World Wide Web Consortium)によって勧告されました。HTML5では、以前のバージョンより多くのタグが増えています。現在のWebサイトはHTML5での位置付けがほぼ整い始めています。(2018年現在)
特に、スマートフォン用のWebブラウザは、HTML5のリリース後に作られたため、パソコン用のWebブラウザよりHTML5に対応しやすい環境が整っています。近年スマートフォン利用者が増加しているため、マルチデバイス最適化が求められています。パソコン用Webブラウザとスマートフォンやタブレット用などに適用させる「レスポンシブWebデザイン」が多く取り入れられており、ResponsiveWebDesignを略してRWDなどと呼ばれる場合もあります。
Webサイトは、RWD手法だけでなく各デバイスの専用サイトを個別に構築し、ユーザーエージェントによる振り分けさせる手法も存在しています。
現在のWebサイトは様々な手法が混在しており、公開・制作する側によって異なっています。これが「正解」という考え方ではなく、それぞれの環境やボリュームに見合った手法を選択します。何よりも、ブラウザを通してレイアウトの崩れなく見やすく分かりやすく発信することが大切です。
HTML5は、比較的まだ新しいバージョンなので、策定中のものや、突然廃止や変更が生じる要素も控えているので、注意が必要です。
初級のカリキュラムでは、限られた基本的なタグだけを練習していきます。

W3C(World Wide Web Consortium)


World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、World Wide Webで使用される各種技術の標準化を推進する為に設立された団体です。ティム・バーナーズ=リーが創設し、率いています。たくさんのWebサイトが、それぞれ勝手に開発したりバラバラな技術を採用すると、ブラウザ側も統一性を取ることが困難になり大変なことになってしまいます。このような団体が存在しているからこそ私たちは、パソコンやスマートフォンで安全にかつ豊富なWebサイトを閲覧できたりするわけですね。
W3C(World Wide Web Consortium)

W3C(World Wide Web Consortium)

「Webクリエイター能力認定試験」では、HTMLの最新バージョンであるHTML5を対象に試験を行っています。過去のバージョンから追加・変更された問題などが出題されているのでご紹介します。

● 新規追加されたタグ

HTML5では的確な意味付けができるように複数のタグが新しく追加されました。
[code]
<article>
<section>
<aside>
<header>
<nav>
<footer>
[/code]
※Webクリエイター能力認定スタンダードテキスト資料 P.54参照

● 意味が変更されたタグ

<strong>タグは従来のHTMLでは「強調」を意味するタグでしたがHTML5では「非常に重要、深刻、緊急」に意味が変更されました。
※Webクリエイター能力認定スタンダードテキスト資料 P.55-56参照

● 廃止されたタグ・属性

HTML5ではフレームを使用したページの作成方法が廃止されました。また、<font>タグ等の直接表示を制御するようなタグや、もともとあまり使用されていなかったタグが廃止されました。
[code]
<basefont>
<big>
<center>
<font>
<strike>
<tt>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<isindex>
<dir>
[/code]

書式が簡略されたタグ

HTML5では一部のタグが従来の記述方法から簡略化され、全体的に記述しやすくなっています。一例として文書型宣言と<link>を紹介します。

文書型宣言(DOCTYPE宣言)

文書型宣言とは、文書がどのバージョンのHTMLで、どの仕様に従って作られているのかを宣言し、表示するブラウザに伝えるためのものです。
[code]
<!DOCTYPE html>
[/code]

<link>タグのtype属性が不要に

外部のCSSファイルを読み込む際には<link>を使用していましたが、HTML5ではこの記述が不要になりました。
[code]
【従来の<link>タグの記述】
<link rel="stylesheet" href="ファイルのパス.css" type="text/css">
【HTML5での<link>タグの記述】
<link rel="stylesheet" href="ファイルのパス.css">
[/code]
詳しくは、「Webクリエイター能力認定試験」受験向けの特設カリキュラムで、解説いたします。