はじめに
HTMLをこれから始める人、HTMLってプログラムみたいで難しそうと思っている人、HTMLで挫折してしまった人。そういった人たちでもHTMLがわかるようになってほしいと思って「現役Webデザイナーが教えるHTML初心者講座」を始めてみました。
まずは簡単にタグを覚える方法を紹介します。
HTMLってなに？
HTMLとは（Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ）と呼ばれる言語のことで、書き方でタイトルや文章、箇条書き、画像の挿入ができたりします。
たとえば
<h1>タイトル</h1>
<p>文章</p>
<a href="#">リンク</a>
という内容であればヘッドラインと文章とリンクになります。
他のプログラムのようにHTML自体で何かを動かすということはできませんが、Web上でなにか公開すると、HTMLを使う必要が出てきます。
タグを覚えよう
HTMLにはタグと呼ばれるものがあり、それぞれ意味を持っています。
「たくさんあって覚えられないよ」という人もいるかと思います。HTMLは覚えたらそれがすべてというわけではなく、年々更新されて、知らないようなタグが出てきたりします。
とはいっても、基本的なタグは変わりません。
ここでは基本的なタグを覚えてみましょう。
覚え方はすごく簡単です。英語にしたときの頭文字だと思っておけば9割は覚えられました。
残りの1割程度は頭文字ではなく、単語の確率が高いです。
これでHTMLのタグはほぼほぼ覚えられました。
他の言語と違って、すごく簡単だと思いませんか？
それでは主要なタグを見てみましょう。
ヘッドライン <h1> <h2> <h3> <h4> <h5> <h6>
Headline（見出し）の頭文字hを使ったタグです。
文章を書く上で大事なのがhタグです。h1からh6まであります。
h1は最上位の見出しタグで、基本的にはサイト内に1つしか存在してはならないとされてます。
そのページのいちばん大事なタイトル部分にh1を設定する事が多いです。
h2は大見出し的な扱いです。h1よりも重要度は下がってきます。
h3は小見出し的な扱いです。
そして、h4、 h5、h6となっていきます。
文章 <p>
Paragraph（文章）の頭文字で、文章を表すタグが<p>です。
<p>今日はいい天気だ。</p>
とすることで、1つの文章になります。
段落を構成したい場合は、
<p>今日はいい天気だ。</p>
<p>洗濯物もよく乾く。</p>
と<p>を続けて書いてやれば大丈夫です。
改行 <br>
さきほどの文章内で改行したいとなったときはBreak（壊す）の<br>を使ってみましょう。
「いい天気だ」の「いい」という部分で改行したい場合は
<p>今日は<br>いい天気だ。</p>
<p>洗濯物もよく乾く。</p>
とすることで改行がされます。
リンク <a>
次に、リンクを張りたい場合は、Anchor（いかり）のリンクの出発点や到達点を指定するタグ<a>を使いましょう。
<a>タグは今までのタグと少し違い、属性と呼ばれる文字を追記する必要があります。
たとえば、googleにリンクを張りたいと思ったときは
<a>リンクだよ</a>
とするのではなく、
<a href="https://google.com/">リンクだよ</a>
とする必要があります。
このhrefは「hypertext reference」の略です。日本語訳すると「参照」とかになるのでしょうか。
href部分にはリンクしたいサイトのURLを貼り付けて、囲んだタグの中には表示したい文字列を入力します。
画像 <img>
Image（画像）はHTMLでも<img>となってます。
このタグも前回のリンクと同じように属性が必要です。
画像に必要な属性はsrcとaltになります。
srcは「source（元）」の略で、画像のURLを入力します。
altは「alternate」の略です。日本語では「代替」となります。画像が何らかの原因で表示できなかったり、目の不自由な方に対して、その画像がどういったものなのかを記述することで、画像を表現できます。
箱的なもの <div>
divはちょっと厄介で、今まで出てきたタグのように意味を持っていません。
しかし、このタグで囲ったものをグループとして機能させるようにできます。
divideやdivisionの略で、分割するという意味になります。
たとえば、サイトを3つの構成に分けたいとしましょう。
その場合は、
<div>
<h2>コンテンツ1</h2>
</div>
<div>
<h2>コンテンツ2</h2>
</div>
<div>
<h2>コンテンツ3</h2>
</div>
などとすることが可能です。
リスト <ul> <ol>
リスト形式の文章を作りたいときには<ul>や<ol>を使用します。
ulは「unordered list」の略で、順序がないリストと言う意味です。
olは「order list」の略で、順序があるリストと言う意味ですね。
ulやolの中には<li>というタグを記述します。
これは「list」を意味するタグです。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
ulとolの違いは、ulの場合はliの頭に「・」が付き、olの場合は「数字」が付きます。
以上が比較的よく使うHTMLタグになります。
まとめ
すごく簡単でしたが、HTMLのタグの説明になります。
タグが多くて難しいと感じている方は、やりたいことを英語にしたときになんていうのかということを考えれば、HTMLタグに置き換えることができるのではないかと思います。
たとえば、文章を強調したいなと思ったとしたら、強調は強くしたいってことだから「strong」だよな。となります。
そして、HTMLには<strong>という強調のためのタグが存在しています。
また、ここは関係ないところだなというのは、脇に追いやっておきたいので、<aside>というタグを使うことが可能です。
このように、HTMLタグは自分がやりたいとを英語にしたときになんて言うのかさえわかってしまえば簡単に記述することが可能です。
