MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
HTMLって何?Web初心者でも理解できるように簡単に解説!

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

公開日:2019年06月13日
最終更新日:2019年06月19日
オンスタ運営
エンジニア
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > HTMLって何?Web初心者でも理解できるように簡単に解説!
このエントリーをはてなブックマークに追加
HTMLって何?Web初心者でも理解できるように簡単に解説!
ホームページ制作をする際に必ず登場する言語として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タグを使用することで要素をグループにわけることができます。つまり、レイアウトを作ることが可能となります。 例えば、2つのレイアウトにわけて、表示させる場合、下記のような記述になります。
<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レッスン以上の完全マスターコース

まとめ

今回は、HTMLとは?について詳しく解説しました。HTMLはWeb制作において必要な知識です。そのため、制作に携わりたい人やブログをはじめたい方は習得しておくことをおすすめします。

関連コンテンツ

【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2019年05月28日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
エンジニア
公開日: 2016年11月14日
最終更新日: 2019年05月28日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。