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

学習中のカメ

Webサイトを作るHTMLのタグっていっぱいあるんだね〜、覚えるの大変だ〜
タグは暗記しなくても、必要なときに見返せば良いから分かりやすくまとめておくよ

学び続けるウサギ

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

 

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

 

 

HTMLって英語の文字とか数字がいっぱい書いてある画面のイメージですよね、、。

 

普段、何気なく見ているWebサイトには表示されないので初めて見るとビックリしますよね。

 

 

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

 

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

 

見出しを指定するタグ

HTML

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

hとは・・・heading(見出し)

よみ:ヘディング エイチワン、エイチツー、、

 

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

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

 

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

最も重要な見出し(タイトル)がh1で、それ以降は重要度がh2・h3と順番に続きます。

 

段落を指定するタグ

HTML
<p>〜</p>

pとは・・・paragraph(段落)

よみ:パラグラフ ピー

 

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

主に文章を書くときにpタグを使います。

 

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

HTML
<a href="〜"></a>

aとは・・・anchor(錨 しっかり固定する)

よみ:アンカー エー

 

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

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

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

hrefとは・・・Hypertext Reference   (リンクする場所)をどこか指定。

よみ:ハイパーテキストレファレンス エイチレフ

 

<a href=”URL“>〜</a>と書くと、
のテキストをWebブラウザ上でクリックすると”URL”のページに飛ぶことができます。

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

<a href=”mailto:メールアドレス”>〜</a>にするとメールクライアントソフトが開きます。

 

画像を表示させるタグ

HTML
<img src="〜">

imgとは・・・image (イメージ画像)

よみ:イメージ

 

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

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

 

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

HTML
<li>〜</li>

liとは・・・list(箇条書き)
よみ:リスト

 

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

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

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

ulとは・・・unorder(ulで囲んだリスト全てに黒い点がつく)
よみ:アンオーダー

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

olとは・・・order(olで囲んだリスト全てに数字が連番でつく)
よみ:オーダー

 

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

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

 

親要素と子要素のイメージ図の画像

 

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

 

学習中のカメ

タグにも親子関係があるんだね〜

表を表すタグ

HTML
<table></table>

tableとは・・・表

よみ:テーブル

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

表の見出しを表すタグ

HTML
<th></th>

thとは・・・table header

よみ:ティーエイチ

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

HTML
<tr></tr>

trとは・・・table row

よみ:ティーアール

表の1行を囲みます。

行が横、列が縦

HTML
<td></td>

tdとは・・・table data

よみ:ティーディー

表のデータのセルです。

tableタグの表

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

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

colspan(横)とrowspan(縦)

colspanとrowspanの説明

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

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

colspanはcolumnspanの略語ですね。

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

要素を分割させるタグ

HTML
<div>〜</div>

div・・・division(分割する グループ化する)
よみ:ディブ ディビジョン

 

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

 

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

HTML

<header>〜</header>

<footer>〜</footer>

<main>〜</main>

<nav>〜</nav>

<section>〜</section>

<article>〜</article>

<aside>〜</aside>

headerタグは、Webページの上部のコンテンツ要素を区切ります。

よみ:ヘッダー

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

footerタグは、Webページの下部のコンテンツを区切ります。

よみ:フッター

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

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

mainタグは、Webページのメインのコンテンツを区切ります。

よみ:メイン

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

navタグは、Webページの主なナビゲーションを区切ります。

よみ:ナブ

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

naviじゃなくてnavです。

sectionタグは、同じ章の内容のコンテンツのかたまりで区切ります。

よみ:セクション

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

articleタグは、単独で成り立つコンテンツ(記事)を区切ります。

よみ:アーティクル

意味:記事

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

asideタグは、関係性のないコンテンツや、補足するための情報を区切ります。

よみ:アサイド

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

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

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

HTML
<!--  --!>

 

<!–  –!>で囲んだテキストをコメントといいます。

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

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

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

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

学習中のカメ

すぐに忘れそうだからコメントアウトしよっと〜 普段のうっぷんも、、検証ツールで見えるからやめとこう、、

 

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

 

HTMLタグの復習

 

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

 

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

 

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

 

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

 

\1週間無料体験/

コメントを残す

メールアドレスが公開されることはありません。