【初心者向け】HTMLのタグについてよく使われる5つを紹介

HTMLは大体分かったけどWebページのアウトラインとレイアウトだったりタグなどがまだよくわからないな

今回はそんな方に必見となっております

そんなに難しい内容ではないので気負わず見てください

今回の目標は以下になります

• Webサイト制作でよく使うHTMLタグを知ること
• HTMLタグを使って文章を見出しや段落にしたりする方法を学ぶこと

HTMLの書き方

書き方はとてもシンプルな仕様になっています。

上記が基本的なhtmlの書き方になります。

この場合は<h1>と書かれたものが開始タグで</h1>が閉じタグになります

入れたい文を開始タグと閉じタグで挟むことで、ウェブページ表示させることができます。上記の場合ですと、ページには「Hello world」と表示されます。

※閉じタグを使わないタグもありますので注意が必要です。

HTMLでよく使うタグ

ここからはWEB制作をする上で、割と頻出なタグを解説します。

• h1~h6タグ
• pタグ
• ul/liタグ
• divタグ
• tableタグ

まずは上記の基本となるタグを覚えていきます

上記のタグだけでも、レイアウトの幅を広げて作れるようになります＾＾

①h1~h6タグ【見出しに使うタグ】

hタグで囲んだ文章は見出しとして表示され、pタグで囲んだ段落と比べると大きな文字になります。

※pタグも後ほど解説します

hタグにはh1～h6まで種類があり、h1が大見出しで、h2以降が小見出しです。それぞれの見出しの違いを見比べてみましょう。

このようにコードを書くと

以下のように表示されます。

②pタグ【通常の文章に使う】

文を書くときに使うタグです。

基本的に文章を書くときは、pタグを使います。
使用するイメージとしては下記のような感じです。

このようにコードを書くと

以下のように表示されます。

③ul/liタグ【箇条書き】

ul（unordered list）は、文章を箇条書き（行頭に「・」がつく）にするタグです。

「ulタグとliタグ」ように、セットで記述します

使用するイメージとしては下記のような感じです。

このようにコードを書くと

以下のように表示されます。

④ divタグ【グループ化】

グループ作るためのタグです。

WEB制作をしていく上で、重要になってくるポイントになります。この記事を読んでいる方は、まだCSSも学んでいない方が多いと思いますのでピンと来ないと思いますので「入れ物を作るタグ」と覚えておきましょう。

このようにコードを書くと

以下のように表示されます。

dブラウザ上では見た目の変化はありませんが、divタグによってh2要素とp要素がグループ化されています

⑤ tableタグ（表）

ここから少し難易度が上がりますが、一度覚えてしまえば簡単です。

上記のように書きます。テーブルタグは色々な書き方がありますが、これは僕的な書き方なので他のサイトには違うコードで解説されている場合もあります

表（テーブル）を作るタグです。tableタグは以下のタグを組み合わせて記述します。

タグ	用途	語源
tr	行	table row
th	見出し	table header
td	セル	table data

tableタグ

表の作成を宣言するタグです。表全体をtableタグで囲みます。

trタグ

表の行を作ります。

thタグ

表の見出しを作ります。

tdタグ

表のセルを作ります。

上記はゲーム機の例です。1行目はthタグで本体の名前の見出しを作成し、2～3行目はtdタグで会社と値段のセルを作成しています。

なおtableタグに記述したborder="1"は、境界線の太さを指定するための属性です。境界線の太さを指定しないと境界線の太さがゼロになり、枠のない透明な表になるのでわかりやすいように記述しました

するとブラウザでは以下のように表示されます。

まとめ

今回はHTMLタグについてでした

代表的な5つを紹介しました

• h1~h6タグ
• pタグ
• ul/ol/liタグ
• divタグ
• tableタグ

HTMLはイメージしながら書くのがポイントです

適当にHTMLを書いて、その後CSSを書こうと思った時に上手くいかなくて、

再度HTMLを書き直すみたいな事になると作業効率が落ちてしまいますので何となく書くのではなくて

考えながらコードを書いていきましょう。

どんどん手を動かして頑張っていきましょう！！