HTMLって何？Web初心者でも理解できるように簡単に解説！

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

ホームページ制作をする際に必ず登場する言語としてHTMLを挙げることができます。Web初心者の中には、HTMLがどのような言語なのかわからない方も多いのではないでしょうか。今回は、初心者でも理解できるように、HTMLとは何かについて解説していきますので、興味のある人は是非チェックしてみてください。

HTMLとは何か？

HTMLは、Webページ制作におけるマークアップ言語として知られ、Webサイトでは主に骨組みの役割を担います。正式名所は、HyperText Markup Languageで各単語の頭文字を取ってHTMLと表現されます。骨組みにあたるため、インターネット上に公開されている多くのWebサイトでHTMLが使われています。 HTMLを使用することで、Webページでさまざまな表現ができるようになります。例えば、文字を太くすることができたり、リンクを挿入することができたりします。このように、Webページを装飾していくことができるというわけです。

HTMLは初心者でも学ぶことができる？

これからHTMLの学習をスタートさせたい人の中には、初心者が学びやすい言語なのか知っておきたい方もいるでしょう。結論から言えば、初心者でも習得できる言語です。 Web制作が使われる言語はHTMLだけではありません。例えば、JavaScriptやPHPなど、本格的なプログラミング言語も使用されます。HTMLは実際に簡単ではありませんが、プログラミング言語と比較すれば、習得しやすくこれからはじめてWebに関する知識を学ぶ人がはじめて勉強する言語として適していると言えます。

HTMLを習得すると何ができるようになるの？

習得することで、Web制作の中で何ができるようになるのでしょうか。具体的にチェックしていきましょう。

Webサイトの仕組みがわかる

Webサイトに関するすべての知識が身に付くわけではありませんが、ある程度の仕組みを理解することができます。例えば、HTMLのほかにもCSSでデザインの装飾が行われているということがわかるようになります。

Webデザインを習得できる

タグなどをしっかりとマスターすれば、ホームページやブログのある程度の装飾が可能となります。つまり、サイトにデザインを施せるようになります。

学習しておけばプログラミングへの理解も早くなる

プログラミングを学び始めたときに、習得スピードが早くなります。記述方法はプログラミング言語と類似するものではありません。しかしながら、英数字で表記される点などが似ているため、習得していればプログラミング言語を学習し始めるときも”とっつきづらさ”を感じづらくなります。

このタグは覚えておこう！制作で頻繁に使用するタグ6選

ここでは、簡単に覚えておくと便利かつ頻繁に使われるタグを6つご紹介していきます。タグとはどのようなものなのか触れることもできますので、学習を開始する前に見ておくと役に立つでしょう。

リンクを貼るときに使う「aタグ」

リンクとは、簡単に言えばURLのことです。リンクをクリックもしくはタップすると、別のページに遷移させることができます。例えば、サイトAからサイトBにページを移動させることができるわけです。 リンクを貼ってページを遷移させるときは、通常aタグを使用します。実際には下記のように記述します。

<a href="”サイトBのURL”">サイトBのページ</a>

このように書くことで、”サイトBのURL”というテキストをクリックすると、サイトBのページに遷移させることができます。

リスト表示ができる「ulタグ」「liタグ」

リスト表示をさせるために使用するタグがulタグとliタグです。一般的には下記のように記載することが多いです。

<ul>
     <li>項目1</li>
     <li>項目2</li>
     <li>項目3</li>
</ul>

リスト表示で表現したいときに使われます。例えば、複数のページをリスト形式で紹介したいときなどです。また、Webサイトに設けられているサイドバーなどもリストでHTMLが書かれている場合が多くなっています。

画像の挿入ができる「imgタグ」

Webページに欠かすことができない要素のひとつに画像を挙げることができます。もちろん、画像を挿入できるタグがあります。それは、imgタグです。具体的には下記のように記載します。

<img src="”画像が保存されている場所のURL”" alt="”画像の説明”" />

srcとは、画像までのパスです。例えば、表示させたい画像がresourceフォルダーの中にある場合、src=”/resource/画像.png”と記載します。 altは、画像の説明のことです。例えば、統計データを写した画像の場合、alt=”○年○月の統計データ”と書きます。

見出しを作れる「h○タグ」

本にも見出しがあるように、Webページにも見出しを使用するのが一般的です。見出しを使うことで、ページ全体の構成がわかりやすくなります。また、どこに何が書かれているのか見つけやすいので、ユーザービリティを高められます。 見出しを挿入するときは、h2タグやh3タグなどを使用します。

<h2>見出し</h2>

Webページで使用する見出しタグはh2〜h4ぐらいまでを使うのが一般的です。h1タグは使用しないの？と疑問を持たれる方もいますが、h1タグはWebページのタイトルとなっているケースが多いため、通常はh2タグから見出しを付けていきます。

レイアウトを作れる！「divタグ」

divタグを使用することで要素をグループにわけることができます。つまり、レイアウトを作ることが可能となります。例えば、２つのレイアウトにわけて、表示させる場合、下記のような記述になります。

<div>グループA</div>
<div>グループB</div>

レイアウトをわけてCSSで装飾をすれば、グループAは黄色の文字、グループBは青色の文字にまとめて変更することができます。

段落を作れる！「pタグ」

pタグを使用することで段落にわけて表示させることができます。一般的には、下記のように記載します。

<p>文章1</p>

<p>文章2</p>

このように記述することで、文章1と文章2の間に段落が生まれますので、ユーザーが文字を読みやすいように工夫をすることができます。pタグに関してもWeb制作では頻繁に使われるタグとなっています。

学習するときに使えるおすすめのツール

いざHTML学習をスタートさせようと思っても、どのようなツールを使って勉強をすればいいのかわからない方もいるのではないでしょうか。ここでは、よく活用される学習ツールをピックアップしていきます。

書籍を活用して勉強

1つ目は書籍を使って勉強する方法です。非常に一般的ですが、現在書店でHTMLに関する書籍がたくさん販売されています。そのため、勉強を開始するときには、準備しておくといいでしょう。書籍を使う場合、パソコンを使用して実際にコードを書きながら覚えると効率的です。そのため、打ちながら覚えることをおすすめします。

学習サイトを利用する

2つ目の方法は学習サイトを活用することです。学習サイトは無料で利用できるものもあり、活用ハードルは高くありません。また、書籍よりも効率的に学べるように工夫されているものあるので、効率さを求める人は活用するといいでしょう。

Webデザイナーを目指す人におすすめのUdemyコース

まだ、学習ツールが決まっていない方へUdemyコースのご紹介をさせていただきます。Udemyには、自分のペースで学ぶことができるオンラインコースが数多く提供されています。専門的な指導を受けられるので、HTMLの習得が早くなります。ぜひ気になる方は下記からUdemyコースを確認してみてください。未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース