かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

HTMLとは?【入門者向けHTMLの基礎知識】

この記事をシェアする

 

whatisHTML

HTMLとは?

HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとった言葉です。

ただ、HTMLという名称以外は普通聞かないので、HTMLとだけ覚えておけばOKです。

HTMLを使う意味 

まずはウィキベディアでHTMLの概要を見てます。

ウィキベディアによると

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

…意味がよくわかりません。何を言っているのでしょうか?

HTMLとは一言でいうと、サイトの見た目を作るためのプログラミング言語です。

今見ているこのブログもHTMLで見た目が作られています。

私もプログラミングの学習を始めてから知ったんですが、ウェブサイトって文字をただ書くだけだと、本当に文字が並ぶだけのサイトになってしまうんですね。文字の色も変えられないし画像も貼れないのです。なんと不便なことでしょうか。

そこで、HTMLを使って、改行したり、画像を貼れるようにしたり、文字を大きくするなどの指示をコンピューターに伝えます。

ですから、ほとんどのサイトでHTMLは使われています。そしてあなたも、これからサイトを作ろうとする時にこのHTMLを使うはずです。

HTMLの構造

ではどうやってHTMLはコンピューターに見た目を伝えているのでしょうか?

それは、マークアップという方法を使います。

マークアップは「目印」という意味で、目印を書くことでコンピュータは判断します。先ほどのウィキペディアで、HTMLがマークアップ言語と呼ばれるのはこのためです。

例えば、「HTMLとは?」という文字をコンピューターに『見出し』だと伝えたい場合は

『<h1>HTMLとは?</h1>』

と、『 <h1> 』という目印をつけます。そして、どこまでが『見出し』なのか範囲をコンピューターにわからせるために『 </h1> 』で対象を囲むことで範囲を指定しています。

HTMLとは?

こんな感じですね。もしかしたら、あなたもこんな文字をどこかで見たことがあるかもしれません。

このようなHTML独特のマークアップがいくつか存在しており、このマークアップの種類や使い方を覚えることが、「HTMLを学習する」ということになります。

HTMLの学習方法

HTMLは、ウェブサイトの基本的な見た目を作るためのプログラミング言語ですので、プログラミングを学ぶほとんどの人が学習します。そのため、初心者向けの学習教材やサイトは他の言語と比べても充実しており、選択肢も多くあります。

ただ、HTMLの学習を行うのに、わざわざ書籍を買うまでのことはないのかな?というのが私の意見です。ですので、無料で学習できる学習サイトを利用して勉強するのが良いと思います。

私のHTMLを学習する時のオススメサイトをご紹介します。

 プロゲート

プロゲートは、オンラインプログラミング学習サイトです。初心者向けにプログラミング学習ができる教材を提供しています。

利用するのに会員登録は必要ですが、「入門編」と名前がついている学習コースは無料会員でも学習できます。

ですので、まずは無料会員で「HTML & CSS 初級編」をやってみましょう。一応の目安は3時間半で一通り学習できるということです。

このCSSは、HTMLと同じようにサイトの見た目に関わる言語です。このコースなら一緒に学習できるので一石二鳥ですね。

ドットインストール

ドットインストールは、1レッスン3分間のプログラミング動画学習サイトです。こちらも無料会員で、「はじめてのHTML」が勉強できます。全15レッスンなので、初めてHTMLを学習するにはちょうど良いボリュームだと思います。

ドットインストールで学習するところの良い点に、動画で確認しながら学べるということがあります。初心者の時には、書籍だと、次にどうすれば良いのかわからなくなってしまうことが結構ありますが、動画なら教えてくれる内容の全てが録画されているのでそう言った危険が無くなります。動画での学習はおすすめです。

 

HTMLは、この二つの学習サイトの入門コースで学習すれば基本は身につきます。また、ある程度プログラミングについてイメージがつくと思います。

まとめ

HTMLはプログラミングを学ぶ上で身につけるべき基本的な言語です。

学習用のサイトや情報も豊富ですので、初心者は学習しやすいかと思います。

HTMLは、サイトの見た目を作る言語ですから、これだけではただ表示するだけなので物足りない方もいるかもしれません。ですが、後々本格的なウェブサービスを作る際には必ず必要になる基礎知識となりますので、プログラミングのイメージを掴む上でも、ぜひ今回紹介した学習サイトで、HTMLの学習にチャレンジして見てください。

 

関連記事:

 

下のはてなブックマークをしていただけると、より多くのプログラミング初心者の方にこの記事が届けられます。私もとても励みになりますので「ブックマークしても別に良いよ」という方は是非よろしくお願いいたします。