WEBデザイン

コーディング初心者必見!覚えておきたいHTML5の追加要素と変更要素

コーディング初心者が覚えておきたいHTML5の要素

どうも、あいまるです。

私は、WEBデザインを学ぶ専門学校に通っているのですが、中でも、コーディングが好きで日々勉強しています。

コーデイングをする上で、HTML5で追加・変更された要素をうまく使いこなすことが必要不可欠です。

この記事では、コーディング初心者のために、HTML5の最新情報を紹介します。

そもそも『HTML5』とは?

HTML5とは、HTMLのバージョン5のことです。

HTMLはお分かりの通り、WEBサイトを作成する言語です。

iPhoneのバージョンがアップデートしているのと一緒で、HTMLもアップデートしていき、バージョンが5になっているということです。

HTML5が2014年10月に発表され、その2年後には、後継となるHTML5.1が2016年11月に勧告されました。

さらに、2017年の後半には、HTML5.2の勧告も目指しています。

以前のHTML4との違いが大きく変わっていることがたくさんあります。

HTML5で追加された要素の一覧

まずは、HTML5で使いされた要素です。

要素名 説明
article 独立したコンテンツを表す
aside 補足的なコンテンツを表す
nav ナビゲーションを表す
section 見出しの及ぶ範囲を表す
main サイトのメインのコンテンツを表す
figure 参照される図版を表す
figcaption 図版の説明文を表す
details,summary 詳細情報とその要約を表す
menu,menuitem コンテキスト・メニューやツールバーを表す
dialog ダイアログを表す
footer フッターを表す
header ヘッダーを表す
keygen 暗号鍵を表す
output 計算結果の出力先を表す
detalist 入力候補のリストを表す
mater 特定の範囲内の数量や割合を表す
progress 特定の範囲の進捗を表す
embed 埋め込みのプラグインのデータを表す
source 異なる複数の表示・再生候補を表す
picture 画像コンテンツを表す
audio 音声コンテンツを表す
video 動画コンテンツを表す
track 動画・音声の字幕などのテキストトラックを表す
ruby,rt,rp ふりがなを表す
bdi 隔離されたテキストを表す
time 日付や時刻を表す
mark テキストをハイライトしていることを表す
wbr 改行位置の候補を表す
canvas スクリプトを使ってグラフィックが描かれることを表す
template スクリプトから参照されるテンプレートを表す

HTML5で定義が変更された要素の一覧

要素名 説明
a href属性が必須ではなくなった。中にブロック要素を含まれるようになった。
address article要素の中でにマークアップ可能になった。その場合articleの作者の連絡先を表す
dl,dt,dd 名前と値からなる連想リスト
small 注釈を表す
s すでに正確でなくなった内容、関係なくなった内容を表す
dfn 定義されたキーワードを表す。文章内で説明されている必要がある。
abbr 略語や頭文字を表す
kbd ユーザー入力を表す
i 分類名称、別の言語の慣用句的なフレーズ、短い字訳、思考などを表す
b 重要性は示さずに強調したいテキストの範囲を表す
u 発音しない非文字の注記を表す
cite 引用元の作品名や作者名を表す
strong 強い重要性や緊急性を表す
script スクリプトだけでなく、カスタムデータブロックも表す
noscript JavaScriptが非対応の環境での表示で、head内に配置も可能になった

終わりに:HTML5のバージョンアップに期待

HTML5で追加された要素、定義が変更された要素を紹介しました。

見慣れない要素、使わない要素がもしかしたら多くあったかと思います。

全ての要素を駆使して、コーディングすると、アクセシビリティの高いWEBサイトになります。

ぜひ、この機会に覚えて、コーディングに活かしてみてください。

ABOUT ME
たぬきちまん。
Webデザインの専門学生。「何にも縛られない自由な暮らし」を求め、アフィリエイトやWEBデザイン、マインドについての情報を発信。