【プログラミング】HTMLタグの意味を理解して覚えよう【マークアップ言語】

HTMLタグの学習をしてWebサイトを作れるようになろう

Webページの基本部分のHTMLについて記述していきたいと思います。

Webページにわかりやすく文章を表示させるために必須のマークアップ言語なので頑張って一緒に身につけていきましょう。

忘れた時にいつでも見返せるようにHTMLタグの意味や発音、特徴を記述していきます。

見出しを指定するタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

h1が一番大きい見出しで、h6が一番小さい見出しになります。

h1要素からh6要素まであり、< >で囲んで全て終了タグ（/）が必要になります。

<h1></h1><!-- 一番大きい見出し -->

hタグの使い方は、見出しの重要性や大きさによってそれぞれを使い分けをしていき、hタグで囲んだテキストは改行されます。

最も重要な見出し（タイトル）はh１で、それ以降は重要度がh2→h3と順番に続きます。

最も伝えたいメッセージなどをh1タグで挟んで使用することも多いです。

段落を指定するタグ

<p>

pタグは終了タグ（/）が必要になり、pタグで囲んだテキストは改行されます。

<p>こちらのpタグで囲われたテキストが１つの段落になります。</p><!-- 段落 -->

主に文章を書くときにpタグで段落を作り使用します。

リンクを指定して他のページなどに飛ばすタグ

<a>

aタグは終了タグ（/）が必要になります。

<a href="○○○">他のページ・リンクへ</a> <!-- href="○○○"の中に記述したURLへ遷移します -->

aタグで囲まれたテキストがリンクになります。

a要素にリンクの飛び先を指定するときは、href属性を追加することで指定できるようになります。

a href=”URL“と書くと、
aタグの間に入力したテキストをWebブラウザ上でクリックすると”URL”のページに飛ぶことができます。

URLを指定する時はダブルクォーテーションで囲んで、aタグとhref属性の間に半角スペースを入れます。

URLをmailto:メールアドレスにするとメールクライアントソフトが開きます。

画像を表示させるタグ

<img>

imgタグは画像を表示させるタグなので終了タグはいりません。

<img src="" alt=""> <!-- src=""の””の中に画像のURL -->

src=表示したい画像のURLで画像をWebブラウザ上に表示することができます。

箇条書き（かじょうがき）を指定するリストタグ

<li>

liタグは終了タグ（/）が必要になります。

箇条書きしたいテキストをliで囲んで、さらにli要素をulやolで囲みます。

<!-- 先頭に黒点 -->
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

<!-- 先頭に数字 -->
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

ul要素で囲むと黒い点がリストの先頭につきます。

ol要素で囲むと数字がリストの先頭に連番でつきます。

li要素を囲むulやol要素のことを親要素といいます。

そして、その親要素に囲まれるli要素のことを子要素といいます。

入れ子の構造の要素がある時には、インデント（字下げ）をしてあげるとコードがごちゃごちゃにならずに見やすくなります。

表を表すタグ

<table>

tableタグは表の全体を囲んで表を表すタグです。

日程表や料金表などを作ることができます。

表の見出しを表すタグ

<th>

表の見出しを表すタグです。

<tr>

表の１行を囲みます。

行が横、列が縦

<td>

表のデータのセルです。

tableの中に全て入っていてtrの中にそれぞれ見出しのthやtdが入っているイメージです。

そのままだと表の枠がないのでcssで枠を追加するか、tableにborderをつけて枠を作ります。

colspan（横）とrowspan（縦）

thなど表のタイトルを繋げたいときはcolspanでつなぐことができます。

thにcolspan=””でつなげたいセルの数を入れて使います。

colspanはcolumnspanの略語ですね。

縦に繋げたいときはrowspan=””で同じくセルをつなげます。

要素を分割させるタグ

<div>

div自体に意味はないのですが、divで囲むことによってグループ化、ブロック要素にしてWebページをCSSで整える時によく使われます。

HTML5から使われるようになった新しいタグ

<header>

<footer>

<main>

<nav>

<section>

<article>

<aside>

<header>
</header>

headerタグの中には、タイトルロゴやナビゲーションバーなどを入れることが多いです。

<footer>
</footer>

footerはページ下の小さい文字などで記入しているリンクやコピーライト表記を囲みます。

フーターじゃなくフッターです。

<!-- 文書の主要なコンテンツ（メインコンテンツ） -->
<main>


</main>

メインなので、そのページの中心コンテンツを囲います。

<!-- リンクを囲うセクション（ナビゲーションリンク） -->
<nav>


</nav>

ナビゲーションメニューなのでnaviと間違えやすいですね笑

naviじゃなくてnavです。

<!-- 文書内での自立した１つのまとまり（h2などの見出しも使用する） -->
<section>


</section>

同じテーマのグループで区切られている感じです。

<!-- 文書内などの中で自己完結している構成（ブログ記事など・独立したコンテンツ項目） -->
<article>


</article>

まとめサイト・ブログ記事などのそれぞれ単独で独立した記事のような感じです。

<!-- メインコンテンツとは間接的な関係の文書（サイドバーなど） -->
<aside>


</aside>

asideは、メインコンテンツではない補足情報などを囲むタグです。

よくある２カラム（２列）のレイアウトで、メインの本文が大きく左側・補足が右側の列で記事を書いている人など本文とは関連性が低い時に使われています。

ブラウザには表示されないコメント

<!-- こちらはWebブラウザに表示されません (￣▽￣)b -->

command + / で囲んだテキストをコメントといいます。

囲んだ部分はブラウザに表示されないので、Webブラウザ上で見られたくないメモや連絡手段、注意書きを書くコメントアウトとして使うことができます。（※google chromeの検証ツール等を使うことでソースコードを見ることができますので注意です）

Macを使っている方のショートコードはcommand + / になります。

コードの上でcommandを押しながら / を押すとコメントしたり解除したりとすることができますね。

コメントを記述しながら、コードを書いていくと覚えやすいです。

お問い合わせフォームを作る為のタグは、お問い合わせフォームの学習【HTML学習】を参考にして下さい。

HTMLタグの復習

See the Pen
HTMLタグ復習 by moku11 (@moku11)
on CodePen.

HTMLの文法チェック

自分で記述したHTMLの文法が正しいかどうかチェックできるMarkup Validation Serviceを使うとエラー箇所が分かるので便利です。

まとめ:マークアップ言語のHTMLを理解していこう！

Webページの基礎となるHTMLタグの学習をしてきました。最初はタグを覚えるのがしんどいですよね…

HTMLタグの発音と英語の意味がざっくりとわかるようになれば理解しやすくなり、少しは覚えやすくなると思いますのでこれからも頑張っていきましょう。