HTMLとはどんなもの？ハイパー簡単にできることをまとめてみた！

こんにちは、セブ島でエンジニア留学を経て住み着いたKuniyoshiです。

さて、本日のテーマは、「HTMLとは？」ということで、IT留学の最初の方で習ったことを思い出しながら書いていこうと思います。

初めて「HMTL」という単語と、そのコードを見たときには、「コレで一体何ができるんだろう」と疑問に思いました。

きっと、この記事を読んでいる方と同じ気持ちです。

調べても、説明にカタカナが多すぎて、読む気が失せた私のような方のために、極力難しい単語抜きで説明していきます。

 

HTMLとは

HMTLは、「Hyper Text Markup Language/ハイパー・テキスト・マークアップ・ランゲージ」の略です。早速カタカナですね。

つまり、「すんげー機能たくさんな文章作れるやつ」ということです。

真面目なことを言うと、みなさんが今見ているwebページを作るための最も基礎的なプログラミング言語です。

みなさんが普段見ているwebページ、サイトは、文字が作文のように並んでいるだけではありませんよね？読みやすく、「タイトル」や「見出し」があるはずです。色も様々です。そのwebページやwebサイトを作っている基礎が、HTMLという文字の並びです。

 

(このブログも、HTMLで作られている！ブラウザ(SafariやChrome)が読み込むことで、普段みなさんが見るwebページが表示されます)

 

元々、どこぞやの研究者が、「論文とか、資料とか読み辛いわ！」「共有サクッとできないものかね？」と考え出したのが、この「HMTL」と「WWW(world wide web)」だったと言います。

読みづらい資料を読みやすくするには、見出しや、段落や、他の資料もすぐに参照できる、そしてどのコンピュータで見てもその役割が再現される、といった「ハイパーな機能」が必要です。

コンピュータが「見出し」や「段落」や「リンク」を理解するための、なにかが必要だったのです。その結果、「HTML」が誕生しました。めでたしめでたし

 

HTMLとはどんな言語か、特徴など

HTMLの特徴は、様々な「タグ」と呼ばれるもので、文字に役割を与えることです。

たとえば、

<h1>見出しだよ</h1>

これは、大見出しを作るタグです。「見出しだよ」という文が、<h1>(開始タグ)と</h1>(終了タグ)で囲まれています。

囲われていることによって、コンピュータが「あぁ、これが見出しか、このサイズにしなきゃな」と理解してくれます。

 

また、もう一つ、HTMLの特徴に、「CSS」という別のプログラミング言語とセットで使われるというものがあります。

CSSでは、HTMLで作られた様々な部品をwebページのどこに配置するか、どう修飾するか、などを指定できる言語です。

 

 

HTMLが使われる場面

WebサイトのほとんどはHTMLで作られています。

また、企業のメールマガジンで使われる、装飾や、ボタンが付いたメールも、HTMLで作られています。

 

HTMLの基本構文

HTMLには、基本構文という、書き方のルールがあります。

開始タグと終了タグで囲む

先程少し説明した、<開始タグ>と</終了タグ>で囲むと、役割を与えることができるようになります。

また、それぞれのタグごとに、指定できる決められた属性があります。

タグに属性を指定することにより、より詳細な設定できます。

 

HTMLを勉強するには

1.Progate

Progateは、早速コードを書きたい！という、「思い立ったが吉日派」の人にオススメの学習サイトです。

実際にコードを書き、実行しながら勉強ができるので、モチベーションに繋がります。

ProgateのHTML学習コースはこちら

 

2.ドットインストール

動画を見ながら勉強できる、PC初心者でも分かりやすい学習サイトがドットインストールです。

動画なので、小難しい文章を見ながら頭を痛める必要がありません。

ドットインストールのHTML学習レッスンはこちら

 

まとめ

いかがでしたか？

HTMLがどのようなものか、ご理解頂ければ幸いです。

さて、これからHTMLを学びたいという方に、最後に、3ヶ月でwebサービス、3ヶ月でiPhoneアプリが作れるようになるエンジニア留学もオススメです。

プログラミングで挫折した経験がある、年収アップしたい、海外で働きたい、という方は、下のリンクをクリック！

NexSeedのエンジニア留学について詳しく知りたい方はこちら