HTML5とは？初心者必見！できることや書き方について解説します！

2019年7月24日 2021年2月21日

xxsuguruxx

1 あらすじ
2 マークアップ言語とは
3 HTMLとは
4 HTMLの文法
5 HTMLのバージョン
6 HTMLタグの代表例
7 まとめ

あらすじ

フロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML5。

HTML5の5はバージョンを表しており、今現在の最新のバージョンが5となります。

今回はそんなHTML5についてどのようなことができるのか、もしくはどのように書いていけばいいのかを解説していきたいと思います。

おすすめの書籍

リンク

マークアップ言語とは

HTMLの前にご説明しておきたいのが、マークアップ言語です。

マークアップ言語とは簡単にいってしまえば、主にタグなどの表現を使ってコンピュータに文章を分かりやすく伝える言語のことを言います。

memo

<p></p>といったものをタグと言います。

マークアップ言語の種類には、HTMLを始め

SGML (Standard Generalised Markup Language)
XML (eXtensible Markup Language)
XHTML (eXtensible HyperText Markup Language)
DHTML (Dynamic HyperText Markup Language)

といった種類があります。

今回はその中でもWebサイト作成に欠かせない要素である「HTML」について詳しく解説していきます。

HTMLとは

HTMLとはHyper Text Markup Languageの略でW3C (World Wide Web Consortium)という組織が1993年に開発した言語です。

memo

W3C (World Wide Web Consortium)とは創設者ティム・バーナーズ＝リーを中心に組織される非営利団体のことで、主な活動としてはWorld Wide Web(www)内での基準を決定したり、ウェブに関する教育活動などを行なっています。

このHTML言語を使用することで、文章や画像、動画などのメディアをWebサイト上に表現することができます。

基本的に全てのwebページはこのHTML、CSS(シ―・エス・エス)、JavaScript(ジャバスクリプト)といった言語からできています。

memo

CSS(シ―・エス・エス)はwebページに色付けやサイズといったものを調整する言語で、JavaScript(ジャバスクリプト)はwebページに動きをつける言語です。

　HTMLタグはWebサイトの型(フレーム)を作るようなものだと思ってください。

また、冒頭でも少し説明しましたが、タグとは開始タグ<要素>を最初に記載し、コンテンツの終わりの意味をあらわす終了タグ</要素>を必ず記載する必要があります。

　終了タグを記載していない場合でもwebサイト上では正しく表示される場合もありますが、思わぬエラーが起きたり、webサイト自体の表示がおかしくなったりすることも考えられますので、終了タグは必ず記載してください。

HTMLの文法

HTMLの基本的な文法は

<!DOCTYPE HTML>
<html>
　<head>
　</head>
　<body>
　</body>
</html>

となっています。

最初の<!DOCTYPE>タグでは、「これからHTML5を使用しますよ」とコンピュータに宣言する意味を持ちます。

memo

＊HTML5は「最新バーションのHTML」のことです。

バーションに関しては後ほど解説します。

memo

<!DOCTYPE XML>であれば、これからXMLを使用することを意味します。

次の<html></html>タグはこのタグ内にHTMLを記載することを意味します。

<head></head>内には

ページのタイトル
CSSファイルのリンク
JavaScript(ジャバスクリプト)
metaデータ

といった情報を記載します。

そして、<body></body>内にはwebページのメインとなるコンテンツを書いていきます。

詳細：W3Cホームページ

HTMLのバージョン

HTMLには今までいくつかのバーションが存在しています。

バーションとは、iPhone(アイフォン)が毎年のように新しく

iPhone 8
iPhone 9
iPhone X

といった感じで毎年色々な機能が追加されていくのと同じようなものだと考えてもらえれば大丈夫です。

下記が今までの代表的なバーションです。

HTML 1.0 (1993年誕生)
HTML 2.0 (1995年)
HTML 3.0 (1997年)
HTML 4.0 (1997年)
HTML 5.0 (2014年)

※()内はそのバーションに変更された年です。

iPhoneのように毎年ではありませんが、今までに何回かバーション変更がされています。

memo

現在の最新のバーションは5.0を使用しており、これからHTMLを学習する方は、このバーション5.0を勉強することをおすすめします。

HTMLタグの代表例

HTMLタグにはたくさん種類がありますが、今回はその中でも代表的なものを紹介したいと思います。

具体的には

<h1>〜<h6>
<header>
<footer>
<nav>
<div>
<p>

といったタグがよく使用されます。

<h1>〜<h6>

hはheading(見出し)の略で、1〜6の数字はそれぞれ見出しの重要度によって使い分けることができます。

例えば、ページ内で一番重要な見出しには<h1>タグを使用し、次に重要なものに<h2>タグ、その次が<h3>タグといった具合に、数字が大きくなるにつれてタグの重要度が下がっていきます。

<header>

その名の通りヘッダー(あたま)部分を構成するタグです。

主にwebページ用のロゴやバナー、タイトルといった要素を記載するためのタグです。

　<head>タグとは異なるタグですのでご注意を。

<footer>

こちらも<header>タグとは逆にフッター(あし)部分を構成するタグです。

フッター部分には主に

著作権表示
利用規約
個人情報保護方針
会社概要

などを記載するところとなっています。

<nav>

navはnavigation(ナビゲーション)の略で、主にwebページの上部に表示され、webサイト内のリンク先を表示してくれます。

このサイトでいうと、下記画像がナビゲーション部分になります。

<div>

divはdivision(区別)の略です。

その名の通りブロックレベルで要素を作成(divide)してくれるタグです。

<p>

paragraph(文)の頭文字をとって<p>となり、</p>タグ内に文章を記載することで、その文章をwebページ上に表示することができます。

例えば、<p>こんにちは、今日はいい天気です。</p>と文章を<p>タグ囲ってあげることで、「こんにちは、今日はいい天気です。」がwebブラウザ上に表示されます。

まとめ

いかがだったでしょうか。

HTMLはweb制作では欠かすことのできない要素ですので、是非ともしっかりと学んで、基礎を固めておくことが大事です。

また、HTMLの他にCSSという言語がありますが、HTMLとこのCSSの二つを使いこなすことができるようになれば、ある程度のwebページは作れるようになるはずです。

HTML&CSSを一から学ぶことができるおすすめのプログラミングスクール

この記事を書いた人

xxsuguruxx

Web Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。