Webコーディング初心者が学ぶべきHTML5の基本と覚えるべきタグ
HTMLは文章の骨格を表すものです。「ここは見出しです」「ここは本文です」と文章の意味付けをしていくものです。
コンピュータに文章の意味を伝えるものなので、コンピュータとの約束事があります。
「段落を表すためにはｐタグを使います」
「HTML５で記述する場合は、このように宣言をしてから記述します」
などです。
まずはこのルールを覚えなければいけません。
たくさんのタグの種類があるのですが、初めからすべてを把握しようとはせず、よく使うものを厳選して学んでみましょう。
HTML５に必要な記述
HTML5としてコンピュータに認識してもらうために、必ず記述しなければいけない形があります。
まずはこの形を覚えましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>それぞれのタグに意味があります。
書籍やサイトを使って、意味を確認しておきましょう。
例えば、
<!DOCTYPE html>は、DOVTYPE宣言と呼ばれるもので、ブラウザの表示モードを「標準モード」にする目的で指定するものです。
では、標準モードって何だろう？
…という風に、一つずつ調べていきます。
ポイントは、あまり深入りしないようにする、ということです。
調べすぎると、どんどん深入りしてしまって学習が進みません。ある程度のところで切り上げることも必要です。
え、どのくらい調べたいいの？
と思うかもしれませんが、今後コーディングするうえでは調べながら作業することが多々あります。
そのあたりの勘を身に着けることも大切です。
初めのうちはわからないと思いますが、どんどん調べて「話がネットワークのことになってきた」や「HTMLとはかけ離れてきた」など、本来知りたかった内容から変わってきたなと感じたらストップしましょう。
Webコーディング初心者まずおさえるべきHTML５を学習するポイント
ここでは、二つのポイントを押さえておきます。
- タグは対になっている
- bodyタグの中に表示したいものを記述する
タグは対になっている
HTMLを使って文章の構造を示すわけですが、その際に使われるがタグです。
段落ならpタグ、トップの見出しであればh1といった具合です。
そしてこれらのタグは、一部の例外を除いて対になっています。
例えば、
<p>と</p>が２つ１セットで対になっています。
<h1>と</h1>も２つで１セットです。
<p>は開始タグと呼ばれます。そしてスラッシュがついている</p>は終了タグです。
これらのタグで囲んだ部分が、段落だったり、見出しだったりします。
そして、タグに囲まれた内容も含んで、それらを要素と呼びます。
タグと要素は明確に違うのですが、書籍やサイトでは同じものとして扱われていることもあります。
混乱しないように読み替えていきましょう。
bodyタグの中に表示したいものを記述する
タグと要素は明確に違うのですが、書籍やサイトでは同じものとして扱われていることもあります。
混乱しないように読み替えていきましょう。
bodyタグの中に表示したいものを記述する
先ほど紹介したHTML５に必要な記述ですが、そのタグの中でheadタグとbodyタグがあります。
そのうち、bodyタグに囲まれた部分に記述したものが、ブラウザに表示されることになります。
headタグ内に記述するのは、ブラウザ表示させるものというよりは、そのドキュメントの設定項目を書いていく、というイメージです。
初めに覚えるべきタグ
Pは段落、h1はトップの見出し、と紹介していますが、ほかにもたくさんのタグが存在します。
代表的なものは必ず覚える必要がありますが、まずは以下のタグを中心に学びましょう。
a
br
h1
h2
h3
h4
h5
h6
img
p
ul
ol
li
table
tr
th
td
div
span
article
section
nav
main
aside
header
footer
うわぁ・・・たくさんあるなぁ、と思われましたか？
大丈夫です。覚えられます。これらはよく使うタグです。必ず覚える必要があります。
タグの意味と、どのように使うのかを学びましょう。
必ず手を動かしてコードを入力し、表示をブラウザで確認しながら進めましょう！
HTMLタグの補足情報である属性を理解する
タグの意味、使い方を学ぶことも大切ですが、タグと一緒に使用する属性についても覚える必要があります。
属性とはタグの補足情報のようなものです。
タグ名の後に半角スペースを入れて、そのあとに「属性名=”値”」といった具合に指定をします。
属性は複数指定することができます。複数指定する場合は、さらに半角スペースを入れて、「属性名=”値”」と次の属性を指定します。
属性は、タグによって設定できるものが決まっています。
例えば、aタグに囲まれた文字はリンクとして機能し、クリックすれば別のページや別の場所に表示を変えることができますが、aタグだけでは「リンクです」と伝えることができるだけで「どこに？」「何のページを表示する？」という情報が不足しています。
そのため、href属性を使って「どこに？」といった情報を補足するわけです。
<a href=”kaisya.html”>会社概要</a>のように記述した場合、会社概要という文字がリンクの働きをすることになり、「会社概要」をクリックすると、kaisya.htmlが表示されるようになります。
また、imgタグは画像を表示するためのタグですが、alt属性を指定することができます。
imgタグによって指定された画像が、何らかの原因で表示できなかった場合に、alt属性で指定された文字が表示されることになります。
<img src=”photo.jpg” alt=”白黒の猫”>といったように記述します。この場合、画像ファイルであるphoto.jpgが表示されるわけですが、ファイルが見つからないなどの何らかの原因でphoto.jpgが表示できない場合、「白黒の猫」という文字がブラウザに表示されるようになります。
このalt属性は必須ではないのですが、ほぼ必ず記述するべき属性です。
そして、装飾などの画像の場合はalt=””と、alt属性の指定はしても、文字などは記述しないほうがいいとされています。
理由としてはＳＥＯやアクセシビリティの観点からなのですが、この点は調べてみてください。
ここでお伝えしたいのは、タグに指定できる属性が決まっている。
そして属性によっては、指定しなければならないものがある、ということです。
そういったルールを、タグを覚えながら属性についても確認していくことが大切です。
