HTMLって何？プログラミング初心者の人必見！

プログラミング学習

公開日 : 2019年08月04日 | [更新日] 2023年09月01日

皆さんが普段表示しているWebサイトはどのように動いているのでしょうか？

Webサイトを動かすためには、裏で様々な技術が動いています。

今回は、Webサイトを作るために必要な技術である”HTML”と呼ばれる言語について、プログラミング初心者の方向けにご説明します。

具体的には、
・HTMLとはどんな物なのか？
・HTMLでできること
・HTMLの基本的な書き方
・HTMLの効率的な学習方法
についてご説明します。

これからWebについて勉強してみたいとお考えの方は是非参考にしてみてください！

HTMLとは
入門編！HTMLを学ぶとできることになること
実際にHTMLのコードを見てみる
実際にHTMLを書いて練習してみましょう
- 練習あるのみ！実際にHTMLを書いてみましょう
HTMLの基礎文法
- html
- head
- title
- body
- div
- p
- a
独学も可能？HTML勉強の流れ

HTMLとは

HTML(HyperText Markup Language)とは、Webページを記述するためのマークアップ言語の事です。インターネット上に公開されているWebページはこの言語が基礎となって作られています。

HTMLでは、ハイパーテキストと呼ばれる技術を使うことができ、文字列に他のページへのリンクを埋め込むことができます。

また、文字を記述するほかにも、画像や音声などのデータファイルもリンクで埋め込むことができます。

入門編！HTMLを学ぶとできることになること

HTMLでできること

HTMLは、Webページ制作用に開発された言語です。HTMLを使って、ブログのようなWebページを作ることができます。
一般的なブログサービス(Amebloやはてなブログなど)などで配布されているテンプレートに頼ることなく、自分で1から作る場合は基本的には必ず必要になある知識です。
また、1からではなく、テンプレートを自分でカスタマイズして利用する際にも必要な知識になります。

実際にHTMLのコードを見てみる

HTMLのコード

皆さんが普段閲覧しているWebページは基本的にはHTMLを使用しています。

どのようなHTMLでWebページが書かれているかは、実はとても簡単に見ることができます。

まずは皆さん、普段利用しているサイトを1つ開いてください、

YahooのホームページやGoogle、Youtube等どのサイトでも構いません。

サイトを開いたら、サイト内のどこか適当な場所を右クリックしてください。

すると、色々な項目が表示されてその中に「ページのソースを表示」と呼ばれる項目があるので、その部分をクリックします。

そうすると、大量の文字列が表示されると思います。それがホームページのHTMLコードです。

初心者の方は「難しそう…」となるかもしれません。

ですが、ここまで大きなサイトを作るのには勉強が必要であり、現時点で理解できないのは仕方のないことです。

実際にHTMLを書いて練習してみましょう

実際に練習

ここまでの説明を聞いて、「書くための準備が大変そう…」とか「何から準備すれば良いんだろう…」のような印象を持つ方もいらっしゃるかもしれません。

実は、HTMLはすぐに書き始めることができます。

HTMLはメモ帳があればすぐに書き始めることができるのです。

練習あるのみ！実際にHTMLを書いてみましょう

それでは、実際に書いてみましょう。

まずはメモ帳を開いてください。

<html>
<head>
<title>HTMLを試してみよう！</title>
</head>
<body>
Hello World
</body>
</html>

細かいコードの意味は後から説明します。

上記のコードを打ち込んだら、テキストデータを「お試し.txt」という名前で保存してください。

それでは次に、今作ったWebページを見てみましょう。

作成したWebページを見るために、次はテキストファイルの形式を変更します。

先ほど保存した「お試し.txt」を「お試し.html」という名前に変更してください。

そうすると、テキストファイルをHTMLファイルに変更できます。

形式を変更したら、再度「お試し.html」を開いてください。

すると、ページ上に「Hello World」と描かれたWebページが表示されます。

もしもWebページを開く事ができない場合は、「お試し.html」を右クリックします。その後、「プログラムから開く」の中にある「Google Crome」や「Internet Explorer」等の普段使用しているWebブラウザを選んでください。

そうすると開くことがことができます。

HTMLの基礎文法

HTMLの基礎

HTMLでは、のようなタグを使って記述します。

今回は、HTMLで使用される基本のタグを一部抜粋して解説します。

html

htmlタグは、HTMLファイルを書く際の始まりを示しています。
つまり、この記述をする事で「このファイルはHTMLファイルです！」と宣言をする事ができます。

このタグを使う際は、HTMLファイルの開始位置に、終了位置にと記述します。

head

headタグでは、HTMLファイルの裏側の情報を定義することができます。

ここで設定された情報は、基本的にはブラウザ上には表示されません。

title

titleタグでは、Webページのtitleを決めることができます。

このタグを使うときは、headタグの内部で設定する必要があります。

body

bodyタグでは、Webページ上に表示する本文を書く事ができます。

このbody内に”Hello World”と記述したから、上記の例では”Hello World”と書かれたWebページが完成したという事です。

ページの本文を変えたいときは、このbodyタグ内の情報を書き換えます。

div

divタグでは、特定の範囲を1グループにしてひとまとまりにすることができます。

グループとなった部分をブラウザで表示するときは前後で改行が行われるようになります。

また、align属性を追加する事で文字の設定を行う事ができるようになります。

p

pタグでは、文字列や画像に対して段落を設定することができます。

pタグで囲まれた要素は1つの段落として扱われるようになり、前後に行間隔が空いた状態で表示されるようになります。

a

aタグでは、別のファイルへのリンクを設定することができます。

このタグで囲われた文字列をクリックすると、別のページへ移動する事ができるようになります。

aタグは基本的に単体では使わず、href属性等の別属性とセットで使います。

href属性にはリンク先のファイルのパスを記述します。

同一のWebサイト内のファイルの場所は相対パスで指定します。

また、外部サイトへのリンクであれば直接URLを指定することもできます。

独学も可能？HTML勉強の流れ

勉強の流れ

HTMLには、前項で紹介したタグ以外にも沢山の文法があるので、まずは一通りタグを把握する所から始めるましょう。
こちらに関しては、大体の人が1か月程度で一通りマスターできるようになります。

スクールに通ってもいいですし、こちらに関しては個人的にネット上の無料学習ソフトや教材のみでも習得できるかと思います。
もちろん学ぶ気持ちは大事なので、挫折しないようここの基礎を妥協せずにしっかり学びましょう。
まずは基礎となるHTMLを学習して、プログラミング学習の第一歩を歩みましょう!!

WRITER

codelearn_jp

コードランとは、プログラミング初心者や副業/フリーランス向けに、プログラミングスクールの評判や口コミを比較できるサイトです。スクール比較のほかに、現役エンジニアたちが現場で活躍できるようになるまでのストーリーや「未経験でもプログラマーになれるの？」「スキルアップするには何からはじめればいいの？」「フリーランスはみんなどうやって稼いでるの？」「実際のお給料は？」など、プログラミングを志すみなさん向けの記事を集めています。