初心者が覚えておくべきhtmlタグを紹介！これだけ覚えればサイトの構造は作成できます！！

これからWebデザイナーを目指そうと考えている方が、必要となるスキルの1つ、HTML。初心者の方にとっては、英語が羅列しているだけでとても難しく感じてしまいますね。

この記事では主にbodyタグ内で使用する主要なタグを説明していきたいと思います。

これからHTMLを学習する方は、どこから手を付けたらよいかわからないという方も多いのではないでしょうか？この記事では実際のサイトで主に使用されているタグを中心に説明していきます。

実際のサイトでもほとんどはこれから説明するタグで構成されてます。

学習はポイントを抑えることが大切です。

ここでの内容を覚えれば、ほとんどのサイトのHTML構成を作成することができますので、最後までしっかりと読み進めてください。

HTMLとは？

そもそもHTMLとはなにか？

HTMLはサイトの構造を作成するための言語で、Hyper Text Markup Languageの略で、マークアップ言語と呼ばれています。

現場でサイトを作成する流れを簡単に説明しますと、

つまりデザインしたものをWebサイトとして表示するための基礎構造を作成する言語が、HTMLです。

HTML学習のポイント（bodyタグ内）

HTML学習をするにあたって、まずはheadタグ内とbodyタグ内に学習を分けたいと思います。この記事では主にbodyタグ内で使用するタグを説明していきます。

bodyタグ内で使用するタグは、サイト構造のまさにボディとなる部分です。一方でheadタグに記入する内容は少し様相が違いますので、分けて説明していきます。

headタグ内のhtmlに関する記事はこちら（記事準備中）

学習はポイントを押さえて行ったいきましょう。間違ってもHTMLに関する本を端から順番に学習する、ということは行わないように。

HTMLは手を動かし、実際にコードを書いていくことで知識を吸収していくことが何よりの近道です。HTMLのタグはたくさんありますが、それを全て覚えてからサイト作りにとりかかる、ではあまりに遠回りです。

今回説明するタグはHTML全体のほんの一部ですが、しかしそれだけでサイトの構造は作成できます。

あとは作成しながら、調べて使用するタグを徐々に増やしていけばよいのです。全く知識がない状態では、身に付く知識も身に付きませんが、最低限でも基本的なタグやその使用を覚えることで、新しいタグの知識も頭に入りやすくなります。

ブロックレベル要素とインライン要素

HTMLタグはブロックレベル要素とインライン要素に分けられます。

ブロックレベル要素とは？

ブロックレベル要素は一つのかたまりとして扱われ、通常ブロックレベル要素の前後には改行が入るため、縦に整列します。

インライン要素

インライン要素はブロックレベル要素の内容を表し、主にテキストや画像などの構造を形成します。

タグがブロックレベル要素かインライン要素かを知る大きな重要な理由は、

１．はHTML記述をする上でのルールであり、これを遵守する必要があります。２．に関しては他の記事で説明していきます。

CSSに関する記事はこちら（記事準備中）

ここからは具体的なタグについて、ブロックレベル要素とインライン要素を説明していきます。

ブロックレベル要素のHTMLタグ

divタグ

これはとても汎用性のあるタグで、いくつかの要素（ブロックレベル要素・インライン要素問わず）を一つのまとまりとして、グループ化したいときに主に使用します。

背景を付けたい範囲をdivタグでひとまとまりに指定したりします。サイト内で複数divタグを使用する事が多いため、ほとんどの場合class名やid名を付けて指定することがほとんどです。

classやidの指定はこちら（記事準備中）

pタグ

Paragraphの略で、段落を意味しています。文章を記述する時に使用します。

h1～h6タグ

見出しを示すためのタグです。pタグと差別化するためにも、またSEOの点でも重要なタグですので、適切に使用する事が大切です。

h1タグは1ページに1つだけ使用しましょう。

ol、ulタグとliタグ

olとliタグ、ulとliタグはセットで使用します。olはordered listの略で文章の前に番号が付きます。ulはunordered listの略で文章の前に付くのは番号ではなく、黒丸が付きます。

この番号や黒丸はCSSで色々な種類の設定を行うことが出来ます。

dl、dt、ddタグ

定義タグと呼ばれるもので、3つセットで使用します。なれるまで使用箇所に迷うかも知れませんが、dtで指定したテキストや画像に対して、ddタグでその説明文を記述するといった解釈で理解しておきましょう。

tableタグ

表を作成するタグです。tableタグに関連するタグはいくつかあります。

thead・tbody・tr・th・td

thead、tbodyタグの使用は必須ではありません。theadは最上段に見出しを入れない表であれば指定する必要はありませんが、tbodyは使用するようにしましょう。

trはtable rowの略です。rowは行を意味します。ちなみに列はcolumnでcolと略します。tableはtrを使用して行ごとに指定していきます。

trの中で使用するthとtd。thは表の見出しを指定します。上のコードの結果を見ていただくとわかりますが、thで指定したテキストは太字となります。

細かな表のレイアウトはCSSで行いますが、セルの結合に関してはHTMLで行います。

セルの結合はthやtdタグに、縦に結合する場合はrowspan=”結合するセル数“を、横に結合する場合はcolspan=”結合する数“を指定して行います。

formタグ

フォームの作成を行うときのタブです。Webサイト作成の一つのハードルであるフォーム作成。この後に説明するインライン要素のinputと一緒に使用する事が多いですが、レイアウトに関しては、このformタグ内にtableタグやdlタグを使用したりします。

上の例ではtableタグを使用してコーディングしています。formタグは、入力する箇所を覆うように記述すると覚えてください。他にもformタグにはactionやmethodの指定等が必要になりますが、システムに関する部分になりますので、また別の記事で説明していきます。

ブロックレベル要素に関しては、これらのタグを押さえておけばほどんどのサイトの構造を作成する事は出来ますので、まずはこれらのタグの使用方法をしっかりと身につけましょう。

注意点として、今回説明したタグは全て閉じタグが必要です。tableタグであれば</table>、pタグであれば</p>が必要となりますので、記述忘れの内容にしましょう。

ここから説明するブロックレベル要素のタグは、それほど使用頻度は高くないですが、覚えておくと便利！！というものなので、余裕が出来てから覚えても大丈夫です。

blockquoteタグ

引用や転載を使用する時のタグになります。

fieldsetタグ/legendタグ

フォームの入力箇所をグループ化する時に使用します。legendはそのグループのキャプションを示すタグになります。

noscriptタグ

これはJavaScriptで表示させている内容を

preタグ

htmlでの記述は通常改行やインデントは、Webサイトへの表示に影響しませんが、preタグで囲むことで、記述した通りに表示するようになります。

hrタグ

横罫線を引くためのタグです。

インライン要素のHTMLタグ

aタグ

リンクタグと呼ばれるものです。Webサイトを見ていると良くありますが、ボタンやテキストなどをクリックすると、別のページやサイトに移動する、それを行うためのタグがaタグとなります。

どこに移動するかはhrefを使用して指定します。他のサイトのurlやページ内の指定の場所のid名を記述することで、指定することが出来ます。上のサンプルコードでは移動先を指定せず、#を指定しています。移動先が未定の場合は#をとりあえず記述しておきます。

brタグ

改行を行うためのタグです。

このタグには閉じタグはありません。

emタグ

強調を意味するemphasisの略で、ブラウザではイタリック体で表示されるのが一般的です。

文章の一部の色やサイズをCSSで変更したりするために、使用されます。

strongタグ

emタグに近いものですが、emタグよりも強調した部分に使用するのが一般的です。

spanタグ

これはタグ自体に意味は特にありません。文章などの一部をひとかたまりにし、CSSを適用するために使用する事が一般的です。ブロックレベル要素で説明しましたdivタグに近いですが、spanタグはインライン要素なので間違えないようにして下さい。

imgタグ

画像を表示するためのタグです。

src=”○○”の○○に画像の保存先のurlやパスを記述して表示します。imgタグも閉じタグはないので注意してくださいね。

ここから説明するタグは、ブロックレベル要素で説明したformタグ内で入力箇所を作成するために使用するタグを説明していきます。

inputタグ

selectタグ

textareaタグ

labelタグ

codeタグ

記述の内容がプログラムコードであることを示すタグです。

supタグ/subタグ

上付き・下付きを行うタグです。

コメントアウトの記述について

大規模なサイトを作成するときは、複数人でそのサイトのコーディングを行うことも少なくありません。そのため、どの箇所のコーディングであるのかを分かりやすくするために、コメントを付けることが大切です。普段からコメントを付ける癖をつけておきましょう。

コメントアウトするには、<!– –>でコメントの内容を覆います。これでサイトには表示されず、htmlを編集する人が確認することが出来ます。

まとめ

本文の内容を箇条書きでまとめる

学習をこれから始める方は、どこから手を付けて良いかわからない方もいるかと思いますが、まずは今回の記事で説明したhtmlタグを覚えていきましょう。

そしてこれらの学習を終えましたら、次のステップです。しっかりとレベルアップをしていきましょう。