HTMLやCSSやってみたいけど良くわからない！という初心者の方が
分かりやすくイメージできる読み解き方を伝えます。
今回はHTML編です。
目次
1.HTMLって何ですか？
2.HTMLの基本構造
3.HTMLタグとは
4.HTMLをタグごとに見てみる
5.違った角度から見る1
6.違った角度から見る2
7.まとめ
1.HTMLって何ですか？
HTMLとはWebページを作成するための基本的なマークアップ言語で、ほとんどのWebページがhtmlで作成されています。
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の頭文字をとった略語です。
簡単に説明すると、テキスト内の指定した箇所に画像やハイパーリンク（クリックすると別ページに移動できるもの）を、配置することができる高機能なテキストのことです。マークアップとは、テキスト内に目印をつけて、その部分がどういう役割を持っているかを表すことです。
2.HTMLの基本構造
基本的なHTMLを見ていきましょう。ここではHTML5で書いてます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>好きなもの</title>
</head>
<body>
<header>
<h1>好きなもの</h1>
</header>
<main>
<h3>好きな果物</h3>
<p>りんご</p>
<a href="リンク先">ふじりんご</a>
<img src="apple.jpg">
</main>
<footer>
<small>Copyright(C) sample All Rights Reserved.</small>
</footer>
</body>
</html>
「いきなり見てもわからんよ」という方もいると思うので、HTMLタグごとに説明していきます。
3.HTMLタグとは
HTMLはコンピュータが理解できるように目印をつける必要があります。
その目印となるのが< >で囲まれたHTMLタグです。
HTMLタグによって、見出し、段落、リスト、画像、リンクなど、テキスト内で各部分が果たしている役割が分かるように目印をつけます。
HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があります。
HTMLタグに違いがあるので、確認しましょう。
※2016年現在では、HTML5.1が最新となっています。
https://www.w3.org/TR/2016/REC-html51-20161101/
4.HTMLをタグごとに見てみる
<!doctype html>
DOCTYPE宣言。
HTMLはHTML5で作りました。というのをブラウザに伝えるためものです。
<html lang="ja">
HTMLとlang属性。
HTMLは日本語です。というのをブラウザに伝えるためものです。
英文の場合はlang="en"となります。
<head></head>
headタグ。headタグ内には、テキストに関する情報が入ります。
metaタグやtitleタグ、スタイルシート（CSS）の読み込みなどを記入します。
<meta charset="UTF-8">
metaタグ。HTMLの文字コードはUTF-8です。というのをブラウザに伝えるためものです。
<title></title>
titleタグ。Webページのタイトルです。
<body></body>
bodyタグ。bodyタグ内に記述されたものは、基本的にユーザーがブラウザで見ることができます。
<header></header>
headerタグ。webページの頭の部分です。多くの場合ロゴやタイトル、メニューボタンが入ります。
<main></main>
mainタグ。webページの主要な部分です。
<h1></h1> <h3></h3>
h1タグ・h3タグ。見出しでh1からh6まであります。
h1が最高位で数値が低いほど高いランクになります。
<div></div>
divタグ。divisionの略語です。
特別な意味はありません。
適切なタグに該当するものがない状況で使用します。
<p></p>
pタグ。paragraphの略語です。
段落である時に使います。
<a href="リンク先のURL"></a>
aタグ。リンクにする場合に使用します。
aはanchor（錨）の略語です。hrefはhyper reference（参照）の略語です。
<img src="画像ファイル名">
imgタグ。画像を配置する際に使用します。
imgはimageの略語。srcはsourceの略語です。
<footer></footer>
footerタグ。footerである際に使用します。
webページの最下層にある場合が多いです。
<small></small>
smallタグ。警告・著作権などの注釈を表す際に使用します。
参照元はこちら
HTMLクイックリファレンス
各種HTMLタグで省略表記の基になっている語句一覧
この時点でHTMLがなんとなくわかってきた方は、実際にHTMLを触って作ってみることをおすすめします。
おすすめサイトはこちら
ドットインストール HTML入門
5.違った角度から見る1
まだよくわからない方は、
実際はありえませんが違った角度から
HTMLを見てみてみましょう。
英語だからわからんという方に日本語訳（無理矢理）にしました。
<!文書タイプ html>
<html 言語="日本語">
<!-- ブラウザで見えない -->
<頭の中>
<メタ情報 文字コード="UTF-8">
<題名>好きなもの</題名>
</頭の中>
<!-- ブラウザで見える -->
<身体>
<頭部>
<見出し1>私の好きなもの</見出し1>
</頭部>
<主要部>
<見出し3>好きな果物</見出し3>
<段落>りんご</段落>
<リンク ここへ="リンク先">ふじりんご</リンク>
<画像 出所="ファイル名">
</主要部>
<足>
<注釈>Copyright(C) sample All Rights Reserved.</注釈>
</足>
</身体>
</html>
6.違った角度から見る2
まだよくわからない方は、人を想像してみましょう。こんな感じ。
_ _ _ _ _ _
/ \
( )
( head )
( )
\ _ _ _ _ _ _ /
○
○
___________
/ \
| |
( header )
| |
\ /
\__ __/
_____| |____
/ \
| |
| |
| |
body | main |
| |
| |
| |
(__ __)
| footer |
| |
| | |
| | |
(_____|______)
ここまでイメージで捉えられると楽しいですね。
7.まとめ
今回はHTML超初心者の方へ書いてみました。
HTMLに限らずですが、違った角度で見たら難しいことも楽しくできると思います！
自分にあったやり方で楽しく覚えましょう。