【記事内に広告が含まれる場合があります】
今回は、HTMLの基礎知識を初心者でもわかるようにまとめていきます。
HTMLはプログラミングの基礎中の基礎で、最も大事な言語と言っても過言ではありません。
HTMLを理解することで、簡単なWebページを作れるようになるので、この記事でさわり部分だけでもサクッと把握しておきましょう！
HTMLとは？【まずはざっくり把握】
HTMLとは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の頭文字をとった言葉で、インターネット上で公開されているWebページを作成するための言語です。
Hyper Textとは、Hyper Link（ハイパーリンク）を形作れる高機能なテキストのことです。
ハイパーリンクは、
みたいな、青字・下線などで他のページに飛べるリンクのことですね。
このリンクで色々なWebページを繋ぐことがWebの本質です。
Markup Languageとは、テキスト（文字）や文章の役割を示す言葉です。
例えば、
- 見出し
- 強調
- 表
- 箇条書き
- リンク
などを設定できるようになるということですね。
HTMLの使い方
HTMLは「タグ」を利用して書いていきます。
タグは
<>
のことです。
例えば、文字を強調させたいときは、単に
強調
と書くのではなく
<strong>強調</strong>
のように、強調させたいテキストをタグで囲うことで、
強調
のように文字を太字で目立たせられるようになります。
タグを使うときは、基本的には
- 始まり：<>
- 終わり：</>
の2つのタグで挟んで使います。
一部のタグでは、終わりの</>は使わないものもあります。
HTMLの主要タグ一覧
一例ですが、よく使われる主なHTMLタグをまとめました。
| タグ | 意味 | 例 | 表示結果 |
|---|---|---|---|
| a | リンクを挿入 | <a href=”https://yuyanote.com/”>yuya note</a> | yuya note |
| h1〜h6 | 見出し | <h1>見出し</h1> | 見出し |
| p | 段落 | <p>段落</p> | 段落 |
| br | 改行 | <p>改<br> 行</p> | 改 行 |
| strong | 文字の強調 | <strong>強調</strong> | 強調 |
| img | 画像を挿入 | <img src=”skytree.png”> |  |
このようにHTMLを使うことで、テキストに役割を持たすことができます。
HTMLの学習方法【初心者向け】
HTMLの学習するためには
- 本
- Web記事
- YouTube
- ネット教材
- オンライン動画サービス
- プログラミングスクール
など、色々な方法があります。
基本的には気になるものから実際に触ってみて、自分に合うやり方でやっていけばOKなのですが、知識ゼロだとどれから手をつければいいか迷いますよね。
僕が初めてHTMLを学習したときは、以下の手順でやりました。
- Progateで学ぶ
- 困ったときは本やネットの記事で都度検索して振り返る
最初に本やYouTubeを使って学ぶのももちろんいいのですが、勉強してるだけで実際に手を動かさない状態になってしまうと身に付きづらいです。
なので、初心者の人ほど、手を動かしながら学習できるProgateがおすすめです。
基礎知識は無料で使えて、実践形式になっている（実際にWebページを作りながら学べる）ので
「このタグを使うと、こういう表示になるのか！」
といったことが、その場ですぐに理解できます。
もし「一人だと不安…」「すぐに質問できる人がいてほしい」といった方は、
- DMM WEBCAMP：未経験OKで無料相談もできる
- TechAcademy：現役エンジニアから直接学べる
のようなプログラミングスクールを使ってみると、挫折せずにHTMLが身に付くかもしれないですね。
