目次
あらすじ
フロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML5。
HTML5の5はバージョンを表しており、今現在の最新のバージョンが5となります。
今回はそんなHTML5についてどのようなことができるのか、もしくはどのように書いていけばいいのかを解説していきたいと思います。
おすすめの書籍
マークアップ言語とは
HTMLの前にご説明しておきたいのが、マークアップ言語です。
マークアップ言語とは簡単にいってしまえば、主にタグなどの表現を使ってコンピュータに文章を分かりやすく伝える言語のことを言います。
マークアップ言語の種類には、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年に開発した言語です。
このHTML言語を使用することで、文章や画像、動画などのメディアをWebサイト上に表現することができます。
基本的に全てのwebページはこのHTML、CSS(シ―・エス・エス)、JavaScript(ジャバスクリプト)といった言語からできています。
また、冒頭でも少し説明しましたが、タグとは開始タグ<要素>を最初に記載し、コンテンツの終わりの意味をあらわす終了タグ</要素>を必ず記載する必要があります。
HTMLの文法
HTMLの基本的な文法は
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
となっています。
最初の<!DOCTYPE>タグでは、「これからHTML5を使用しますよ」とコンピュータに宣言する意味を持ちます。
バーションに関しては後ほど解説します。
次の<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のように毎年ではありませんが、今までに何回かバーション変更がされています。
HTMLタグの代表例
HTMLタグにはたくさん種類がありますが、今回はその中でも代表的なものを紹介したいと思います。
具体的には
- <h1>〜<h6>
- <header>
- <footer>
- <nav>
- <div>
- <p>
といったタグがよく使用されます。
<h1>〜<h6>
hはheading(見出し)の略で、1〜6の数字はそれぞれ見出しの重要度によって使い分けることができます。
例えば、ページ内で一番重要な見出しには<h1>タグを使用し、次に重要なものに<h2>タグ、その次が<h3>タグといった具合に、数字が大きくなるにつれてタグの重要度が下がっていきます。
<header>
その名の通りヘッダー(あたま)部分を構成するタグです。
主にwebページ用のロゴやバナー、タイトルといった要素を記載するためのタグです。
こちらも<header>タグとは逆にフッター(あし)部分を構成するタグです。
フッター部分には主に
- 著作権表示
- 利用規約
- 個人情報保護方針
- 会社概要
などを記載するところとなっています。
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を一から学ぶことができるおすすめのプログラミングスクールfa-arrow-circle-down
