【超初心者向け】HTMLとは!?【基礎からわかりやすく解説】

【超初心者向け】HTMLとは!?【基礎からわかりやすく解説】
男性イラスト
プログラミングを勉強したいな。
でも、そもそもHTMLって何かもわからない。
誰か、初心者にもわかりやすく解説してくれないかな。。。

こんなお悩みを解決する記事です。

HTMLはプログラミングの基礎の基礎であり、ウェブデザインの全体像を知るために必要不可欠な言語です。これからウェブサイトを作ってみたいという方や、自分のブログをカスタマイズしてみたいという方には絶対に必要な知識なので、その仕組みをしっかりと理解しておきましょう。

スポンサードサーチ

HTMLとは【超初心者向け基礎の基礎】

HTMLとは超初心者向け基礎の基礎

 

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、プログラミングに必要な言語の中で最も基本な言語のひとつです。基本的にほとんどのサイトがHTMLをベースにして作られています。

専門用語でマークアップ言語と呼ばれますが、今はまだ「ふーん」くらいに思っていただければOKです。

 

HTMLで何ができるの?

HTMLではページの骨組みを作ることができます。

「ここにはこんな文章が入るよー。この部分に画像を表示してねー。」などの印となるコードを記載していくことで、ブラウザ上でその通りに表示させます。

 

HTMLってどうやって確認できるの?

HTML = ページの骨組みを作る

と言われれば、なんとなく意味は理解できても実際に見てみないとイマイチわからないかもしれません。実はHTMLはブラウザ上で確認することができます。このブログももちろんHTMLがベースになっているので確認することができますよ。

 

ページ上で右クリック > 「ページのソースを表示」を選択

このページのどこでもいいので、右クリックをして「ページのソースを表示」を選択します。ブラウザによって少し表記方法が違うのでそれっぽいのをクリックしてみてください。

このブログのソースコードはこんな感じです。

html表示サンプル

 

これがHTMLです。このようにHTMLでマークをつけながら構成された文書の集合体がウェブサイトということになります。

 

HTMLの役割とは

先述しましたが、HTMLの役割はウェブサイトの骨格を作ることです。

HTMLの役割 = ウェブサイトの骨組みを作る

骨組なので、HTMLだけのサイトデザインはめちゃくちゃシンプルです。じゃあ、どうやってかっこいいデザインのサイトを作るかというと、HTMLで作った骨組みに、CSSやJavascriptなどでデザインを施していくことでカッコいいサイトに仕上げていきます。

 

HTMLでできること

HTMLでできること

具体的にHTMLでは下記のようなことが実装できます。

画像を表示する | <img>タグ
リンクを設定する | <a>タグ
段落表示ができる | <p>タグ
見出しが作れる | <h>タグ
リスト表示ができる | <ul><ol>タグ

 

HTMLを勉強すると何がいいの?

HTMLを勉強すると何がいいの?

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

HTMLはプログラミングの基礎の基礎です。ですが、HTMLがわかるとウェブサイトの仕組みが全体的に理解できるようになります。「このサイトはこういう風に書き出されているのか」ということがわかれば、どんなサイトにも応用することができます。

 

WEBデザインもできるようになる

繰り返しますが、HTMLはウェブプログラミングの基礎の基礎です。

HTMLを学ぶと、基本的なサイト構築ができるようになります。言い換えれば、HTMLの知識なしでウェブサイトを作ることはできません。WordPressなどのCMSにも必要な知識なので、身につければテーマのカスタマイズができるようになります。

 

HTMLのおすすめ勉強法って?

HTMLのおすすめ勉強法って?

最近はプログラミングスクールなども増えてきていますが、HTMLは独学でも習得することができます。正直、ぼくは独学で十分だと思います。

 

HTMLが独りで学べるおすすめ勉強法

HTMLの勉強におすすめなサイトは下記の通り。どれも無料で利用できて、基礎知識の習得にはこれで十分です。

 

HTML勉強におすすめなサイト・ドットインストール
・Progate
・Learn to Code

 

どのサイトも段階ごとに知識をつけていける仕組みになっていますが、ドットインストール、Progateは日本語にも対応しているので特におすすめです。英語でもいいよという方はLearn to Codeをおすすめします。個人的には海外サイトの方が情報量に優れていると思います。

 

HTML学習におすすめの本

手元に本を置いて勉強したいというのであれば、おすすめの本はこちらです。

初心者にもわかりやすく簡単な内容でまとめられているので、入門編としておすすめの一冊です。ウェブデザインに必須のCSSの基礎も合わせて勉強することができますよ。

スポンサードサーチ

まとめ【何事も基礎が重要ですね】

まとめ

今回HTMLの基礎を初心者向けに解説しました。HTMLはプログラミングの基本なので、ウェブデザインやブログカスタマイズをしたいという方はその構造をしっかりと理解しておきましょう。

シェアしてくれると嬉しい

Scroll to top