HTMLの基礎知識
プログラミングを学習するにあたって、ほとんどの人が最初に学習するHTMLについてまとめました。
HTMLとは
HTML（Hyper Text Markup Language）とは、ウェブサイト上に文字や構造を作成するために開発されたプログラミング言語です。
ほとんどのウェブサイト（電子メール、スマホアプリも含む）は文字や構造を作成するHTMLとスタイルなどを決めるCSSという２つの言語を組み合わせて作られています。
HTMLでできること
具体的には、HTMLを使ってウェブサイト上に以下のようなことができます。
- ウェブサイト上に文字・画像・リンクなどを表示したり、動画、音声などのデータファイルも組み込むことができる。
- 各文字がウェブサイト上でどのような役割（見出し・段落・表・リストなど）を果たしているかの目印をつけることができる。 これにより、例えば見出しを指定した場合、そこからCSSというウェブサイト上のスタイルを変更する言語を使って簡単に見出しから目次を作ることができたりする。
HTMLの書き方の基本
タグではさむ
HTMLというプログラミング言語では、「<〇〇>～</〇〇>」が基本形です。「<〇〇>」、「</〇〇>」の部分は「タグ」といいます。このタグに見出し・段落・表・リストなどの記載をすることで、役割を果たしているのかを明示することになります。また、HTMLではこのタグの間にある「～」に文などを記載しプログラムを実行するとウェブサイトにその内容が表示されることになります。
なお、タグの種類はたくさんありますが、まずは以下のようなものが理解できるといいでしょう。
- <title> 文書のタイトル
- <div> 範囲の指定（ブロックレベル）
- <h1>～<h6> 見出し
- <p> 段落
- <br> 改行
- <strong> より強い強調
- <ul> 順不同のリスト
- <li> リストの項目
- <img> 画像の埋め込み
【例１】見出し
（HTML）
<h1>HTML</h1>
（結果）
「HTML」という文字がウェブサイトに表示され、h1（見出し）という意味が加わります。
【例２】段落
（HTML）
<p>タグ</p>
（結果）
「タグ」という文字がウェブサイトに表示され、p（段落）という意味が加わります。
【例３】箇条書き
（HTML）
<ul>
<li>昨日</li>
<li>今日</li>
<li>明日</li>
</ul>
（結果）
・昨日
・今日
・明日
【例４】画像
（HTML）
<p><img src="〇〇" alt="△△ " /></p>
〇〇には「画像のファイル名とありか」を書く。
△△には「画像が読み込めなかったときに代わりに表示してくれる文」を書く。
（結果）
〇〇の画像が表示される。
あくまでHTMLが基礎
現在、HTML以外の言語も使われており、より綺麗なレイアウトや複雑な動きが可能になっています。
しかし、一般的なウェブサイトではたくさんのHTMLタグが使われており、HTMLがあらゆるウェブサイトの基礎となっています。そのため、HTMLが最初に学ばれるプログラム言語であることが多いのでしょう。
HTMLを理解できれば、テンプレートを自分でカスタマイズしたり、SEO（検索エンジン最適化）施策を自分で実施することができるようになります。
