- HTMLとは何か
- HTMLでできること
- HTMLのタグとは
前回のゼロわかはこちら▼
HTMLとは簡単に言うとWebページの土台
HTMLはWebページの土台で、Webページがどういう構造かを表します。
HTML（エイチティーエムエル）と読み、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の頭文字でHTMLと略されています。
すごく雑な日本語訳をすると「高機能な文字に目印をつける言語」というような意味です。
このHTMLで書かれたWebページを、SafariやChromeなどのブラウザが解釈することで、私たちが目にするWebページが表示されるのです。
HTMLでできることはWebページの作成
HTMLを学べば、Webページを作ることが出来ます。
Webページの構造はHTMLで表現されますので、文章の表示、文字や画像の配置、大きさの調整などを自由自在に操ることができます。
最近はWebページを簡単に作成可能なWordPressなども多いですが、HTMLを知っていることでそれらの理解が深まり、なんらかのトラブルがあっても対処可能です。
HTMLはとにかくWebページの土台で基礎。
Webページを作成したければ、とにかくHTMLを学ぶ必要があるでしょう。
では、HTMLはどのように作られているのでしょうか。
HTMLはタグの集まり
HTMLはマークアップ言語と言われ、タグという考え方を使って文字で表現されています。
タグというのは「ここにこういう役割の情報を置きますよ」という役割を与える印で、それにより目印をつける（＝マークアップ）のでマークアップ言語と言います。
SNSでハッシュタグ（#こういうやつ）がありますが、考え方は同じです。
SNSでのハッシュタグは「この投稿はこういう情報の投稿ですよ」というものですよね。
#アニメ のような投稿があれば、その投稿はアニメの事が書かれているのだなとわかります。
HTMLでも同じで、文章を表示する役割のタグや、画像を表示する役割のタグ、別ページへのリンクを作るためのタグなどがあり、そのタグを見ればどういった情報があるかわかります。
HTMLではタグは<p>文章用のタグ</p>このように表現します。
SNSと違うのは、役割が決められたタグが複数あり、すべて書き方が決められているということでしょうか。
ですので、文字を配置したいなと思えば文字のためのタグを覚えておく必要がありますし、画像を配置したければそのためのタグを覚えて書いてあげる必要があります。
こうした文章や表など文書内で役割を与えられた各部分は要素（element）と呼ばれます。
タグとは？こんな役割を付けられる
タグとはそれぞれに役割を与えられた目印で、文章のためのタグや画像のためのタグなどがあります。
タグはたくさんありますが、まず代表的でわかりやすいタグ5つはこんな感じ。
| タグ | 役割 |
|---|---|
| h(エイチ)タグ | 見出しを付ける。h1,h2,h3などと続く |
| p(ピー)タグ | 段落を作る。文章が配置される |
| a(エー)タグ | リンクを作る。最重要、再頻出とも言えるタグ |
| img(イメージ)タグ | 画像を挿入する。 |
| strong(ストロング)タグ | 文字を強調する。 |
この代表的なタグ5つでも、簡単なWebページを作ることが出来ます。
例えばこんな感じ▼
コードと、その対照はこんな感じ
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>わかドリのHTML講座（見出し１）</h1>
<p>ようこそわかドリのHTML講座へ！（文章）</p>
<h2>わかドリの状態（見出し２）</h2>
<p>わかドリです！（文章）</p>
<p>わかドリは<strong>元気（強調）</strong>です（文章）</p>
<p>わかドリのプロフィールは<a href="https://www.zerowaka-drill.tech/home/">こちら（リンク）</a>です</p>
<img src="img/ブログイメージ画像.png" width="600px">
</body>
</html>
シンプルではありますが、5つのタグでもWebページは作れるのです。
タグはすべて覚える必要はありませんが、英語の単語のように覚えておくと検索の手間が省けるなど効率を上げられます。
HTMLの基本的な書き方＝タグではさむ
HTMLの基本的な書き方は、タグではさむというものです。
わかりやすい pタグ で説明すると、以下のようになります。
<p>文章用のタグ</p><p>と左側に書かれたものを開始タグ、</p>と右側に書かれたものを終了タグといい、基本的にセットで使用されます。
なお、この時pタグで囲まれたものが要素となります。
これが基本的な書き方となります。
また、タグの中にタグを書く入れ子構造がHTMLの基本的な構造になります。
こちら▼は、pタグの中の文章の一部を強調するコードです。
<p>わかドリは<strong>元気（強調）</strong>です（文章）</p>このように、タグの中にタグを書くことができ、HTMLはこれを組み合わせてWebページを作っていくことになります。
なお、この時strongタグで囲まれた要素は、pタグの中の要素となります。
このページではこれだけ覚える！
タグ
役割を与えるための目印。HTMLの材料で、Webページの素。
<p></p> ← こういうやつ！
要素
役割を与えられた文書。
<p>文章を書くためのやつ</p> ← タグで囲まれたこういうやつ！
今回のゼロわか
- HTMLとは何か
- HTMLはWebページの土台
- HTMLでできること
- Webページを作ることができる
- HTMLのタグとは
- 役割が書かれた目印 <p></p> ← こういうやつ！
- 簡単なWebページなら、少ないタグでも作れる
お疲れさまでした。
今回は、HTMLとは何かを少し詳しくゼロからわかっていただきました。
次に学ぶこと
次に学ぶことはHTMLの基本的な構造です。
これを学べば、どんなHTMLでも読めるようになります。
プログラミングをゼロから学ぶあなたはこちらから▼
