HTMLタグの読み方と使い方を初心者にもわかりやすく解説

2024.01.11

HTMLのタグは数えきれないほどあります。そんなタグは略称が多く読みにくいものが多いです。

今回の記事では、HTMLのタグの読み方と使い方について初学者にもわかりやすく解説します。

HTMLタグの名前は基本的に英語がもととなっているので、読み方がわかると意味も理解しやすくなります。HTML、CSSの学習初期より読み方を理解しておくことでコーディングも早くなるでしょう。

HTMLタグの正しい読み方を知り、コーディングのレベルを上げていきましょう。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLの意味と読み方

HTMLとは、「Hyper Text Markup Language」の頭文字を取ったものです。Web上にテキストなどを表示する際に、コンピューターが理解できるように目印を付けるという意味があります。

文字や画像をそのまま記述しても、コンピューターはそれが何かを理解することはできません。そこで、HTMLを用いて文字や画像であるという情報をコンピューターに伝えることでWeb上で文字や画像を表示できるのです。

ちなみに、CSSは「Cascading Style Sheets」の頭文字を取ったもので、HTMLに装飾をするための言語です。

ここからは、HTMLを記述していく上で知っておくべきHTMLタグの読み方と意味を紹介していきます。

<!DOCTYPE html>の読み方と意味

HTMLを記述していく際に最初に記述するのが<!DOCTYPE html>です。現在のWebサイトのHTMLの最初には必ず記載してあります。

<!DOCTYPE html>の読み方

読み方は、「ドックタイプエイチティーエムエル」です。

<!DOCTYPE html>の意味

<!DOCTYPE html>は文章の型を宣言するという意味があります。現在のHTMLはHTML5が使用されており、<!DOCTYPE html>は「HTML5を使用して、HTMLを記述していきます」という宣言をしているのです。

<!DOCTYPE html>は、必ず<html>タグの上で宣言しなければなりません。

基本的にはHTMLファイルの一行目に記載します。

<head>内のタグの読み方と意味

<html>タグの次に<head>タグを書きます。<head>の読み方は「ヘッド」です。<head>タグの中には、Webサイトに表示されるものを書く場所ではなく、情報を記載する場所です。

<head>タグ内には、主に3つのタグを記載します。

meta
title
link

Webサイトを作成する上では非常に重要なタグになりますので、意味と使い方を理解しておきましょう。

<meta>

CSS
<meta charset=””> 　　　　　　　　　　　　　　　　<!--文字コードを指定します。UTF-8がよく指定されます-->
<meta name=”description”>  <!--Webサイトの説明文を書きます-->
<meta name=”keyword”>  　　　　<!--Webサイトのkeywordを記載します-->
<meta name=”viewport”>  　　　　<!--Webサイトを表示する画面幅を指定します-->

上記コードのように、Webサイトには表示されない情報を記載するのが<meta>タグとなります。

<title>

<title>タグは、WebサイトやWebページのタイトルをブラウザやユーザーに伝える重要な役割を担います。読み方は、「タイトルタグ」です。

<title>に記載された内容はGoogleChromeであれば上部のタブに表示されるものです。

Webサイトを作る上では重要なタグですが、忘れることも多いので注意しておきましょう。

<link>

HTML
<link rel="stylesheet" href="style.css">

他にも、外部ファイルを読み込みたい時に使います。読み方は「リンクタグ」です。

<body>内で使用するタグの読み方と意味

ここからは、実際にWebサイトに表示される部分で使われるタグについて読み方と意味を解説していきます。

Webサイトに表示される部分のタグを記載する場所は、<body>タグです。読み方は「ボディ」であり、その名のとおりWebサイトの体の部分という意味です。

<body>タグの記載は決して忘れてはいけません。

<div>

もっとも頻繁に使用させるHTMLタグの一つが<div>タグです。divは英語の「divide」の略語であり、「分けられる、分配する」などの意味があります。読み方は「ディブ」が一般的です。

<div>の使い方としては、特別な意味を持たないブロックを作るときに使用します。<div>タグにクラス属性を付与して使うことが多いです。

HTML
<div class="container">
    ディブのHTML
</div>

<h1>~<h6>

<h1>~<h6>タグは見出しを作成する時に使われるHTMLタグです。読み方は「エイチワン~エイチシックス」です。見出しはWebサイトにおいてSEOやユーザビリティの観点から重要なものとなります。

<h1>から<h6>までしか指定できず、<h7>などは存在しないので注意が必要です。基本的には<h1>は1ページにつき1回だけ使用します。他の<h2>以降のタグは何回使用しても問題ありません。必ず階層を意識して記載しましょう。

<p>

<p>タグは、段落を意味する「Paragraph」の頭文字を取っています。読み方は「ピータグ」です。

文章を記載する時に使用します。

HTML
<p>段落を意味します。文章を書くときに使用します</p>

<a>

<a>タグは、「anchor」の頭文字を取ったもので、「アンカー」や「エータグ」と読みます。

<a>タグの役割は、他のページやサイト、ファイルなどにリンクさせることです。

文字に対して<a>タグを使うとデフォルトでは、青文字に下線となります。リンク先を指定する際はhref「エイチレフ」を使用します。

HTML
<a href="https://web-camp.io">DMM WEBCAMP</a>

<img>

画像を扱う時に使用するのが<img>。imageの略であり、読み方は「イメージタグ」となります。

<img>タグの中では、画像のwidth(幅)やheight(高さ)を指定することも可能です。<img>タグは閉じタグはありません。

<img>タグ内のsrc(ソース)に画像のURLを記載し、alt(オルト)に画像の説明文を書くことができます。

HTML
<img src="computer.jpg" alt="コンピューターの画像です" width="200px" height="150px">

<li>

<li>タグはlist itemの略であり、読み方は「リストタグ」です。

文字を箇条書きにしたい時に使用します。

基本的に、<ul>や<ol>の階層の中で使用され、type属性を指定することにより箇条書きの種類を変更することができます。

HTML
<ul>
    <li type="square">四角アイコンです</li>
    <li type="circle">白丸アイコンです</li>
    <li type="disc">黒丸アイコンです</li>
</ul>

<ul>

<ul>タグは、unordered listの略語であり、読み方は「ユーエルタグ」や「アンオーダーリスト」です。

アンオーダーからわかるように順序がないリストを作る際に用いられます。

<ul>タグは<li>タグとセットで使われることを理解しておきましょう。

HTML
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

<ol>

<ol>タグは<ul>タグとは逆に順序があるリストという意味です。ordered listの略称であり、「オーエルタグ」もしくは「オーダータグ」と読みます。

<ol>タグも<ul>タグと同様に<li>タグとセットで使われます。

順序の値は通常は数字で表示されますが、<li>タグのtype属性を用いることで表示を変えることができます。

HTML
<ol>
    <li type="1">数字の順序</li>
    <li type="i">小文字のローマ数字</li>
    <li type="a">小文字の英数字</li>
</ol>

<header>

<header>タグは、Webサイトの一番上の部分やコンテンツの先頭に用いられます。読み方は「ヘッダー」です。ヘッダー部分のブロック要素を作成するときに使用します。

<footer>

<footer>タグは、Webサイトの一番下の部分に用いられます。読み方は「フッター」です。通常のWebサイトであれば、フッターにはサイトマップや運営情報などが記載されます。

<span>

インライン要素の代表とも言えるのが<span>タグです。読みますは「スパンタグ」です。<span>タグはこれだけを指定してもなんの意味もありません。文章のなかで一部分だけの表示を変えたい時などに使用し、CSSで表示を変えることができます。

HTML
<p><span class="red">DMM</span>WEBCAMP</p>

<button>

<button>タグは、その名の通りボタンを作成したいときに使用されます。読み方は「ボタンタグ」です。

<button>はtype属性を指定することができ、type属性の値により役割が変わります。

HTML
<button type="submit">お問い合わせ</button>

<input>

<input>タグは、ユーザーに入力してもらうための入力欄を作る際に使用します。

基本的にはお問い合わせフォーム内で使用することが多いです。読み方は、「インプットタグ」です。

<input>は様々な入力方法を指定できます。

HTML
<input type="text">

<textarea>

<textarea>タグは、複数行の入力欄を作成する際に使用します。読み方は「テキストエリア」です。

<input>タグでは賄い切れない文字数があるときに使用します。

お問い合わせフォームのお問い合わせ内容などを記載してもらう欄を作成する時に使われます。

HTML
<textarea name="contact" id="" cols="30" rows="10"></textarea>

<label>

<input>や<textarea>などの項目に名前を付ける際に使用されます。読み方は「ラベル」です。入力フォームがなにを記載するべきかを表すときに使用します。

HTML
<div>
<label for="rei">お問い合わせ</label>
<input type="text" id="rei">
</div>

<figure>

<figure>タグは、画像や図解などを一つのコンテンツとしてまとめる役割があります。

読み方は「フィギュア」です。figcaption要素を使用することにより画像や写真の説明も入れることができます。

HTML
<figure>
    <img src="computer.jpg" alt="" width="200px">
    <figcaption>コンピューターの画像</figcaption>
</figure>

<main>

<main>タグは、Webサイトなどの主要なブロックを囲むためのものです。基本的には1ページに一つの指定となります。

読み方は、「メインタグ」です。

ヘッダーやフッターを除いたコンテンツのメインとなる場所に用いられます。

<nav>

<nav>タグは、「ナビゲーションタグ」と読みます。その名のとおりグローバルナビゲーションやパンくずリストを作成する際にそのブロックを作る際に使用されます。

基本的には、<ul>タグや<li>タグと併用して記述することが多いです。

HTML
<nav>
    <ul>
        <li>home</li>
        <li>about</li>
        <li>works</li>
    </ul>
</nav>

<script>

JavaScriptのコードを<script>タグの中に直書きすることもできますし、もしくは外部ファイルも読み込むことが可能です。

一般的には、<script>タグを記載する場所は、<body>の閉じタグの直前です。JavaScriptを読み込むためには、他のHTMLの読み込みを止める必要があるためです。

HTML
<!-- 外部ファイルの読み込み -->
<script src="portfolio/script.js"></script>
</body>

<table>

<table>タグは、表を作成する際に使用します。読み方は、「テーブルタグ」です。

表を作成する時に<table>タグで囲み、<tr>や<th>、<td>を記載して表の見出しや行数を指定します。

ちなみに、<tr>はtablerowの略であり、行を表します。<th>はtableheaderの略であり、見出しを表します。<td>はtabledateの略であり表の中身を記載します。

HTML
<table>
  <tr>
    <th>野菜</th><th>色</th>
  </tr>
  <tr>
    <td>キャベツ</td><td>緑</td>
  </tr>
  <tr>
    <td>にんじん</td><td>橙色</td>
  </tr>
  <tr>
    <td>トマト</td><td>赤</td>
  </tr>
</table>

<video>

<video>タグは、動画や映像をWebサイトに埋め込む際に使用します。

現在は、Webサイトに動画を埋め込むことが一般的になりつつあります。読み方は、「ビデオタグ」です。

<video>タグで囲み、中に動画や映像のソースを書き込みます。

HTML
<video>
  <source src=”dog.mp4” type=”video/mp4”>
</video

<address>

<address>タグは、Webサイトの運営者の連絡先やメールアドレスを記載するときにその情報を囲むためにあります。読み方は「アドレスタグ」です。

特にフッターなどに使用されることが多いです。

HTML
<address>
  <p>田中太郎</p>
  <p>090-xxxx-xxxx</p>
</address>

<article>

<article>は、一つのコンテンツを表すタグです。<article>で囲まれた部分は、そこだけで完結するものです。

<section>タグが部分的なコンテンツであるのに対し、<article>は完成した一つのコンテンツとなります。

読み方は、「アーティクルタグ」です。

HTML
<article>
    <h2>HTMLの読み方講座</h2>
    <p>HTMLの読み方を解説するよ</p>
    <h2>HTMLの使い方講座</h2>
    <p>HTMLの使い方を解説するよ</p>
    <h2>まとめ</h2>
    <p>HTMLは楽しいよ</p>
</article>

<aside>

<aside>タグは、サイドバーを作成する時に使われることが多いです。補足情報を記載する時にも使用されます。読み方は、「アサイドタグ」です。

<aside>を記述したからといって表示が変わるわけではないですが、Googleのクローラーに補足情報であることを伝えるために記載します。

HTML
<article>
    <h2>HTMLの読み方講座</h2>
    <p>HTMLの読み方を解説するよ</p>
    <aside>
        <p>HTMLはマークアップ言語だよ</p>
    </aside>
    <h2>HTMLの使い方講座</h2>
    <p>HTMLの使い方を解説するよ</p>
</article>

<br>

<br>タグは、breakの略称であり改行を表します。読み方は「ブレークタグ」です。

<p>タグ内の任意の場所で改行したいときに使用します。閉じタグは現在のHTMLでは必要ありません。

HTML
<p>
    HTMLの読み方は人それぞれかもしれません。<br>しかし、基本は知っておく必要があります。
</p>

<form>

<form>タグは、お問い合わせフォームなどを作成する時に使用します。

<form>でブロックを作成し、中に<input>や<textarea>を記載してフォームを作成します。読み方は、「フォーム」です。

HTML
<form>
  <label for="name">氏名</label>
  <input name="name" type="text">
  <label for="rei">お問い合わせ内容</label>
  <textarea name="rei" id="rei" cols="30" rows="10"></textarea>
</form>

HTMLタグの読み方と意味を解説：まとめ

今回の記事では、実際に使用される主要なHTMLタグについて使い方の簡単な解説と読み方を解説しました。

HTMLには他にもたくさんのタグが存在します。読み方を知るだけでも使い方を想像できる場合があるので、余裕があれば読み方まで学習しましょう。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする

資料請求一覧はこちら