ホームページやブログをする上ではかかせない言語、HTML。
けど、なんか初めてみるものばかりで訳わかんないですよね。
僕も初めて見た当時は、こんなのわかる訳ない、と感じていました。
なので、とりあえず基礎の基礎の部分だけでもまずは理解してもらえたらという思いもあって、今回記事にして見ました。
HTMLとCSSを勉強して転職や就職に繋げたい方におすすめの方法
まず、HTMLってなに？
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略です。文書構造を定義するものになります。
webで見ているページ
僕らがweb上で見ているページは、HTMLで書かれたものです。
他にも要素はありますが、基本的にホームページの文章や画像などは全てHTMLによって表示されています。
サイトを作る上では、欠かせない重要な言語、それがHTMLです。
段落や見出しなどを作る
文書構造を定義する、ということで、HTMLでは段落や見出しなどをタグというものを使って指定することができます。
作文やワード文書を思い出してください。
小さな話題ごとに段落を変えたり、大きな見出しはほかの時よりも大きく書いたりした経験ありますよね。
それを、HTMLで指定することができます。
ちなみにこの場合は、二番目に大きい見出しで表示させてくださいという意味になります。
<h2></h2>がタグと呼ばれるものです。
CSSなどと組み合わせる
HTMLは文書を構造しますが、色や大きさ、線の色などの装飾まではできません。
そこで、HTMLと合わせて、CSSという言語を使います。よくHTMLとCSSはセットで勉強することがほとんどだと思います。
あくまでHTMLは、文書構造です。
HTMLの構造
大きく分けるとこんな感じ
<html>
<head>
フォント情報やサイト全体の情報など、サイト自体には表示されないものが記載されている。
</head>
<body>
文章。サイトに表示されるものが書かれている。今見ている画面は、bodyの中身ということになります。
</body>
</html>
ちなみに<html></html>が無いと、どんなにちゃんと中身を書いてもページとして反映されません。
htmlで書かれたものですよという意味合いも込めて、忘れずに<html></html>は書きましょう。
タグには、開始タグと終了タグがある
<h1>ここに文字</h1>
このように、タグには、文章の前に設置する「開始タグ」と文書の終わりに設置する「終了タグ」があります。（例外も時々ありますが、滅多にありません。）
これを守らないと、うまく表示されなくなります。
よく使うタグはこちら
- 見出しタグ → <h1></h1>(h6まであるが、h3より上はあまり使わない。数字が大きくなるほど小見出しになる)
- 段落タグ → <p></p>（見出しの中の文章を段落訳する時に使います。）
- リンクタグ → <a></a>（「詳しくはこちらのページ」など別のページに移動させる時に使います。）
- 文字強調タグ → <strong></strong>（太字にしたいときに使います。文章の中で目立たせたい箇所に。）
基礎を知っておけば、少しづつHTMLが見えてくる
なんでもそうですが、初見のものって難しく感じたり抵抗を感じたりしますよね。
だけど、こうやって基礎を抑えて行くことで少しづつ知識が付いてきます。
自分のペースでいいので、着実に覚えていきましょう。
ワードプレスでブログをやってみると、HTMLを扱う機会も増えるので、安いレンタルサーバーを借りてやってみるのもいいですよ！
