おすすめ記事
HTML
スポンサーリンク

あらすじ

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

今回はそんなHTMLとは具体的にはどのようなものなのかを詳しく紹介していきます。
 
主に

  • マークアップ言語とは
  • HTMLとは
  • HTMLの文法
  • HTMLのバーション
  • HTMLの代表的なタグ例

といった項目で解説していきたいと思います。

 

スポンサーリンク

マークアップ言語とは

 

HTML

 

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 css

 

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

 

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

 

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>

 

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

 

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

 

<header>

 

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

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

 

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

 

<footer>

 

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

 

フッター部分には主に

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

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

 

<nav>

 

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

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

 

ナビゲーション

 

<div>

 

divdivision(区別)の略です。

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

 

<p>

 

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

 

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

 

まとめ

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

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

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

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事